feat(nav): Seitenleiste der Software spiegeln, Analytics als ein Menüpunkt

Der Prototyp hatte eine eigene Seitenleiste mit den fünf Analyse-Seiten als Menüpunkten. Die Software hat eine andere Navigation, in der Analytics noch gar nicht vorkommt. Beides zusammen ergab kein Bild davon, wo die Analyse später sitzt. Jetzt: - Die Seitenleiste spiegelt die von HiveGrid Cloud — dieselbe Komponente (SidebarWithSections aus der Cloud-Fassung portiert, inkl. der dortigen lokalen Fixes: Collapse-Breite, verdrahteter Toggle, Logo-Slot, Hover-Sweep), dieselben Gruppen, dieselbe Reihenfolge, dasselbe Logo. - 'Analytics' ist ein einzelner Menüpunkt, gleichrangig neben 'Dashboard'. - Die fünf Analyse-Seiten sind darin über Reiter erreichbar, nicht als Unterpunkte in der Navigation. Zwei Navigationsebenen für dieselbe Sache würden nur konkurrieren. Die Reiter folgen dem Hausmuster aus SettingsHubShell (Link um Tabs.Item), damit jeder Reiter eine echte Adresse hat und mittelklickbar bleibt. - Routen: /analytics, /analytics/finanzen, /auftraege, /kunden, /team. '/' leitet auf /analytics; das Dashboard liegt in der Software unter '/'. - Alle übrigen Einträge sind Kontext: Sie zeigen den Ort in der fertigen Anwendung und melden beim Klick, dass sie zur Software gehören. Kopfzeile und Filterleiste sind aus den fünf Seiten in die Analytics-Hülle gewandert — sie sind für alle gleich, und der Filterzustand gilt bereichsweit. Nebenbei: @radix-ui/react-slot war eine Phantom-Dependency (nur transitiv über @subframe/core vorhanden, vom portierten IconButton direkt importiert) und ist jetzt deklariert. verify-layout prüfte noch die alten Routen und lief damit auf 404-Seiten, die naturgemäß keine Kollisionen haben — Routen korrigiert und eine Absicherung ergänzt, die bei Statuscode >= 400 abbricht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
2026-08-29 20:25:04 +02:00
1 parent cdf9066076
commit e85ceb6f9d
@@ -7,10 +7,12 @@
 import React from "react";
 import { FeatherPlus } from "@subframe/core";
 import * as SubframeCore from "@subframe/core";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as SubframeUtils from "../../utils";

 export interface IconButtonRootProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
  disabled?: boolean;
  loading?: boolean;
  variant?:
@@ -39,17 +41,30 @@ const IconButtonRoot = React.forwardRef<HTMLButtonElement, IconButtonRootProps>(
      size = "medium",
      square = false,
      icon = <FeatherPlus />,
+      children,
      className,
      type = "button",
+      asChild = false,
      ...otherProps
    }: IconButtonRootProps,
    ref
  ) {
+    // @subframe/sync-disable -- local accessibility fix: external links keep
+    // native link semantics without wrapping a button.
+    const Root = asChild ? Slot : "button";
    return (
-      <button
+      <Root
        className={SubframeUtils.twClassNames(
-          "group/af9405b1 flex h-9 w-9 cursor-pointer items-center justify-center gap-2 rounded-round border-none bg-brand-brand-surface-solid-default text-left hover:bg-brand-brand-surface-solid-hover active:bg-brand-brand-surface-solid-active focus-within:shadow-focus disabled:cursor-default disabled:bg-surface-neutral-disabled disabled:pointer-events-none hover:disabled:cursor-default hover:disabled:bg-surface-neutral-disabled active:disabled:cursor-default active:disabled:bg-surface-neutral-disabled",
+          // @subframe/sync-disable -- local fix: rounded-round aus dem Basis-String genommen und konditional gemacht.
+          // twMerge dedupliziert das custom `rounded-round` nicht gegen `rounded-md`, daher gewann immer der Kreis.
+          // Jetzt liegt exakt EINE Radius-Klasse an: square -> rounded-md (Squircle), sonst rounded-round (Kreis).
+          // @subframe/sync-disable -- local fix: focus-within -> focus-visible.
+          // `focus-within` traf auch den Maus-Klick, sodass nach jedem Klick ein
+          // blauer Ring am Icon haengen blieb. `focus-visible` zeigt ihn weiter
+          // bei Tastatur-Navigation, wo er gebraucht wird.
+          "group/af9405b1 flex h-9 w-9 cursor-pointer items-center justify-center gap-2 border-none bg-brand-brand-surface-solid-default text-left hover:bg-brand-brand-surface-solid-hover active:bg-brand-brand-surface-solid-active focus-visible:shadow-focus focus:outline-none disabled:cursor-default disabled:bg-surface-neutral-disabled disabled:pointer-events-none hover:disabled:cursor-default hover:disabled:bg-surface-neutral-disabled active:disabled:cursor-default active:disabled:bg-surface-neutral-disabled",
          {
+            "rounded-round": !square,
            "rounded-md": square,
            "h-4 w-4": size === "2-x-small",
            "h-6 w-6": size === "extra-small",
@@ -75,20 +90,21 @@ const IconButtonRoot = React.forwardRef<HTMLButtonElement, IconButtonRootProps>(
          className
        )}
        ref={ref}
-        type={type}
-        disabled={disabled}
        {...otherProps}
+        type={asChild ? undefined : type}
+        disabled={asChild ? undefined : disabled}
+        aria-disabled={asChild && disabled ? true : otherProps["aria-disabled"]}
      >
        {icon ? (
          <SubframeCore.IconWrapper
            className={SubframeUtils.twClassNames(
-              "text-body-large-0 font-body-large-0 text-icon-neutral-on-solid group-disabled/af9405b1:text-icon-neutral-disabled",
+              "inline-flex h-5 w-5 flex-none items-center justify-center leading-none text-body-large-0 font-body-large-0 text-icon-neutral-on-solid group-disabled/af9405b1:text-icon-neutral-disabled [&>svg]:h-full [&>svg]:w-full",
              {
-                "text-body-small-semibold-0 font-body-small-semibold-0":
+                "h-3.5 w-3.5 text-body-small-semibold-0 font-body-small-semibold-0":
                  size === "2-x-small",
-                "text-body-default-semibold-0 font-body-default-semibold-0":
+                "h-4 w-4 text-body-default-semibold-0 font-body-default-semibold-0":
                  size === "extra-small",
-                "text-heading-0 font-heading-0": size === "large",
+                "h-6 w-6 text-heading-0 font-heading-0": size === "large",
                "text-icon-neutral-secondary": variant === "ghost",
                "text-icon-neutral-on-subtle": variant === "tertiary",
                "text-icon-neutral-primary": variant === "secondary",
@@ -116,7 +132,8 @@ const IconButtonRoot = React.forwardRef<HTMLButtonElement, IconButtonRootProps>(
            )}
          />
        </div>
-      </button>
+        {asChild && children ? <Slottable>{children}</Slottable> : null}
+      </Root>
    );
  }
 );
@@ -14,65 +14,53 @@ export interface LogoRootProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
 }

-const LogoRoot = React.forwardRef<HTMLDivElement, LogoRootProps>(
-  function LogoRoot(
-    {
-      size = "28",
-      showIcon = false,
-      hideText = false,
-      className,
-      ...otherProps
-    }: LogoRootProps,
-    ref
-  ) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "group/609493cb flex items-center justify-center gap-3 w-fit",
-          {
-            "gap-6": size === "128",
-            "gap-4": size === "64",
-            "gap-2": size === "32",
-            "gap-1": size === "16" || size === "8",
-          },
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <img
-          className={SubframeUtils.twClassNames(
-            "hidden h-7 flex-none object-contain",
-            {
-              block: showIcon,
-              "h-32": size === "128",
-              "h-16": size === "64",
-              "h-8": size === "32",
-              "h-6": size === "24",
-              "h-4": size === "16",
-              "h-2": size === "8",
-            }
-          )}
-          src="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_302_142' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='84'%3E%3Cpath d='M0 0H96V83.12H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_302_142)'%3E%3Cpath d='M95.9449 41.52L83.9589 20.76L48.0009 41.52H71.9719L59.9869 62.281H36.0139L24.0279 41.52L36.0139 20.76H83.9589L74.3919 4.188L71.9719 0H24.0279L0.0549316 41.52L24.0279 83.042H71.9719L95.9449 41.52Z' fill='%23F1B729'/%3E%3C/g%3E%3C/svg%3E"
-        />
-        <img
-          className={SubframeUtils.twClassNames(
-            "h-7 flex-none object-contain",
-            {
-              hidden: hideText,
-              "h-32": size === "128",
-              "h-16": size === "64",
-              "h-8": size === "32",
-              "h-6": size === "24",
-              "h-4": size === "16",
-              "h-2": size === "8",
-            }
-          )}
-          src="data:image/svg+xml,%3Csvg width='243' height='44' viewBox='3.4 3.6 243 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='123' height='55'%3E%3Cpath d='M122.88 0H0V55H122.88V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_15_21)'%3E%3Cpath d='M3.48022 8.81384H11.1272V22.1967H28.3362V8.81384H35.9831V42.2736H28.3362V28.8803H11.1285V42.2736H3.48022V8.81384Z' fill='%23111111'/%3E%3Cpath d='M42.4373 8.81384H50.0842V42.2736H42.4373V8.81384Z' fill='%23111111'/%3E%3Cpath d='M53.9084 12.6387V8.81519H61.0803L71.1187 34.8656H71.5978L81.6336 8.81519H88.8054V12.6387L76.3755 42.2736H66.3371L53.9084 12.6387Z' fill='%23111111'/%3E%3C/g%3E%3Cmask id='mask1_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='154' y='0' width='93' height='55'%3E%3Cpath d='M246.806 0H154.907V55H246.806V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_15_21)'%3E%3Cpath d='M197.555 8.78772H205.202V42.2462H197.555V8.78772Z' fill='%23111111'/%3E%3Cpath d='M211.657 8.78772H236.274C238.663 8.78772 240.575 9.50438 242.01 10.939C243.443 12.3736 244.161 14.286 244.161 16.6749V34.3603C244.161 36.7505 243.444 38.6616 242.01 40.0962C240.575 41.5308 238.663 42.2475 236.274 42.2475H211.657V8.78772ZM233.405 35.5547C235.478 35.5547 236.513 34.5196 236.513 32.4492V18.5873C236.513 16.5143 235.476 15.4791 233.405 15.4791H219.304V35.5547H233.405Z' fill='%23111111'/%3E%3C/g%3E%3Cpath d='M185.126 29.819C186.306 29.5958 187.374 29.1976 188.33 28.6246C189.157 28.1155 189.907 27.3753 190.576 26.4028C191.245 25.429 191.58 24.0988 191.58 22.4109V16.675C191.58 14.2861 190.864 12.3737 189.429 10.9391C187.994 9.50581 186.082 8.78784 183.693 8.78784H159.554V10.5501L168.179 25.5047L159.554 40.4135V42.2463H167.201V28.8948L174.939 28.8791L185.365 42.2463H192.297V38.4228L185.126 29.819ZM183.933 20.4985C183.933 22.5688 182.79 22.1968 180.718 22.1968H167.203V15.478H180.825C182.898 15.478 183.933 16.5144 183.933 18.5861V20.4985Z' fill='%23111111'/%3E%3Cpath d='M118.412 35.5797H100.041V28.8791H114.548L112.566 25.442L114.444 22.1968H100.041V15.5041H118.314L121.075 10.7329V8.81396H92.3943V42.2737H121.075V40.1968L118.412 35.5797Z' fill='%23111111'/%3E%3Cpath d='M165.334 25.3873L159.062 14.5213L140.242 25.3873H152.788L146.516 36.2521H133.968L127.696 25.3873L133.968 14.5213H159.062L154.054 5.84824L152.788 3.65649H127.696L115.15 25.3873L127.696 47.1181H152.788L165.334 25.3873Z' fill='%23F1B729'/%3E%3C/svg%3E"
-        />
-      </div>
-    );
-  }
-);
+const LogoRoot = React.forwardRef<HTMLDivElement, LogoRootProps>(function LogoRoot(
+  { size = "28", showIcon = false, hideText = false, className, ...otherProps }: LogoRootProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/609493cb flex w-fit items-center justify-center gap-3",
+        {
+          "gap-6": size === "128",
+          "gap-4": size === "64",
+          "gap-2": size === "32",
+          "gap-1": size === "16" || size === "8",
+        },
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <img
+        className={SubframeUtils.twClassNames("hidden h-7 flex-none object-contain", {
+          block: showIcon,
+          "h-32": size === "128",
+          "h-16": size === "64",
+          "h-8": size === "32",
+          "h-6": size === "24",
+          "h-4": size === "16",
+          "h-2": size === "8",
+        })}
+        src="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_302_142' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='84'%3E%3Cpath d='M0 0H96V83.12H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_302_142)'%3E%3Cpath d='M95.9449 41.52L83.9589 20.76L48.0009 41.52H71.9719L59.9869 62.281H36.0139L24.0279 41.52L36.0139 20.76H83.9589L74.3919 4.188L71.9719 0H24.0279L0.0549316 41.52L24.0279 83.042H71.9719L95.9449 41.52Z' fill='%23F1B729'/%3E%3C/g%3E%3C/svg%3E"
+        alt={hideText ? "HiveGrid" : ""}
+      />
+      <img
+        className={SubframeUtils.twClassNames("h-7 flex-none object-contain", {
+          hidden: hideText,
+          "h-32": size === "128",
+          "h-16": size === "64",
+          "h-8": size === "32",
+          "h-6": size === "24",
+          "h-4": size === "16",
+          "h-2": size === "8",
+        })}
+        src="data:image/svg+xml,%3Csvg width='243' height='44' viewBox='3.4 3.6 243 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='123' height='55'%3E%3Cpath d='M122.88 0H0V55H122.88V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_15_21)'%3E%3Cpath d='M3.48022 8.81384H11.1272V22.1967H28.3362V8.81384H35.9831V42.2736H28.3362V28.8803H11.1285V42.2736H3.48022V8.81384Z' fill='%23111111'/%3E%3Cpath d='M42.4373 8.81384H50.0842V42.2736H42.4373V8.81384Z' fill='%23111111'/%3E%3Cpath d='M53.9084 12.6387V8.81519H61.0803L71.1187 34.8656H71.5978L81.6336 8.81519H88.8054V12.6387L76.3755 42.2736H66.3371L53.9084 12.6387Z' fill='%23111111'/%3E%3C/g%3E%3Cmask id='mask1_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='154' y='0' width='93' height='55'%3E%3Cpath d='M246.806 0H154.907V55H246.806V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_15_21)'%3E%3Cpath d='M197.555 8.78772H205.202V42.2462H197.555V8.78772Z' fill='%23111111'/%3E%3Cpath d='M211.657 8.78772H236.274C238.663 8.78772 240.575 9.50438 242.01 10.939C243.443 12.3736 244.161 14.286 244.161 16.6749V34.3603C244.161 36.7505 243.444 38.6616 242.01 40.0962C240.575 41.5308 238.663 42.2475 236.274 42.2475H211.657V8.78772ZM233.405 35.5547C235.478 35.5547 236.513 34.5196 236.513 32.4492V18.5873C236.513 16.5143 235.476 15.4791 233.405 15.4791H219.304V35.5547H233.405Z' fill='%23111111'/%3E%3C/g%3E%3Cpath d='M185.126 29.819C186.306 29.5958 187.374 29.1976 188.33 28.6246C189.157 28.1155 189.907 27.3753 190.576 26.4028C191.245 25.429 191.58 24.0988 191.58 22.4109V16.675C191.58 14.2861 190.864 12.3737 189.429 10.9391C187.994 9.50581 186.082 8.78784 183.693 8.78784H159.554V10.5501L168.179 25.5047L159.554 40.4135V42.2463H167.201V28.8948L174.939 28.8791L185.365 42.2463H192.297V38.4228L185.126 29.819ZM183.933 20.4985C183.933 22.5688 182.79 22.1968 180.718 22.1968H167.203V15.478H180.825C182.898 15.478 183.933 16.5144 183.933 18.5861V20.4985Z' fill='%23111111'/%3E%3Cpath d='M118.412 35.5797H100.041V28.8791H114.548L112.566 25.442L114.444 22.1968H100.041V15.5041H118.314L121.075 10.7329V8.81396H92.3943V42.2737H121.075V40.1968L118.412 35.5797Z' fill='%23111111'/%3E%3Cpath d='M165.334 25.3873L159.062 14.5213L140.242 25.3873H152.788L146.516 36.2521H133.968L127.696 25.3873L133.968 14.5213H159.062L154.054 5.84824L152.788 3.65649H127.696L115.15 25.3873L127.696 47.1181H152.788L165.334 25.3873Z' fill='%23F1B729'/%3E%3C/svg%3E"
+        alt={showIcon ? "" : "HiveGrid"}
+      />
+    </div>
+  );
+});

 export const Logo = LogoRoot;
@@ -1,17 +1,10 @@
 "use client";
-/*
- * Documentation:
- * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
- * Sidebar Inside — https://app.subframe.com/f023064a5ca0/library?component=Sidebar+Inside_f6538807-e4e9-4314-9b2f-aaed19760450
- */

 import React from "react";
 import { FeatherCircleDashed } from "@subframe/core";
-import { FeatherSidebarClose } from "@subframe/core";
-import { FeatherSidebarOpen } from "@subframe/core";
 import * as SubframeCore from "@subframe/core";
 import * as SubframeUtils from "../../utils";
-import { IconButton } from "../IconButton";
+import { useSidebarHoverSweep } from "../../sidebar-hover-sweep";

 export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
  icon?: React.ReactNode;
@@ -22,52 +15,44 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
 }

 const NavItem = React.forwardRef<HTMLDivElement, NavItemProps>(function NavItem(
-  {
-    icon = <FeatherCircleDashed />,
-    children,
-    selected = false,
-    variant = "icon-and-text",
-    className,
-    ...otherProps
-  }: NavItemProps,
+  { icon = <FeatherCircleDashed />, children, selected = false, variant = "icon-and-text", className, ...otherProps }: NavItemProps,
  ref
 ) {
  return (
    <div
      className={SubframeUtils.twClassNames(
+        // @subframe/sync-disable -- local fix: keep the item left-anchored in both states (no items-center flip on collapse) so the icon rail does not jump horizontally.
        "group/7aa51c7e flex w-full cursor-pointer flex-col items-start gap-1 pt-2",
-        { "w-auto items-center": variant === "icon-only" },
        className
      )}
      ref={ref}
+      data-sidebar-hover-item="true"
      {...otherProps}
    >
-      <div
-        className={SubframeUtils.twClassNames(
-          "flex w-full flex-col items-start gap-2",
-          { "w-auto flex-none items-center": variant === "icon-only" }
-        )}
-      >
+      {/* @subframe/sync-disable -- local fix: no items-center flip on collapse; the icon column stays put. */}
+      <div className={SubframeUtils.twClassNames("flex w-full flex-col items-start gap-2")}>
        <div
          className={SubframeUtils.twClassNames(
-            "flex w-full items-center gap-1.5 rounded-sm px-2.5 py-1.5 group-hover/7aa51c7e:bg-surface-neutral-tertiary",
+            // @subframe/sync-disable -- local fix: constant left-anchored 32px icon column in BOTH states; only the label column (1fr) collapses with the animating width so the icon never shifts horizontally.
+            // @subframe/sync-disable -- local fix: deliberately without `will-change`, for the same reason as the app sidebar and the chat list rows: a permanent compositing layer turns the label's antialiasing greyscale and leaves it looking faded at rest.
+            // @subframe/sync-disable -- local fix: `scale` is only a transitioned property while the row is lifted, so it drops back the instant the pointer leaves instead of easing down behind the cursor. Same as the app sidebar rail.
+            "group-hover/7aa51c7e:bg-surface-neutral-tertiary pointer-events-none grid h-8 w-full origin-center scale-100 grid-cols-[32px_minmax(0,1fr)] items-center rounded-md pr-2 transition-[background-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover/7aa51c7e:scale-[1.04] group-hover/7aa51c7e:transition-[background-color,scale] data-[sidebar-sweep-hover=true]:scale-[1.04] data-[sidebar-sweep-hover=true]:transition-[background-color,scale] motion-reduce:transition-none",
            {
-              "w-auto flex-none items-start justify-center px-1.5":
-                variant === "icon-only",
-              "bg-surface-neutral-tertiary group-hover/7aa51c7e:bg-surface-neutral-modal group-active/7aa51c7e:bg-surface-neutral-tertiary":
-                selected,
+              "bg-surface-neutral-tertiary group-hover/7aa51c7e:bg-surface-neutral-modal group-active/7aa51c7e:bg-surface-neutral-tertiary": selected,
            }
          )}
+          data-slot="inner-sidebar-nav-item-surface"
+          data-sidebar-hover-surface="true"
        >
          {icon ? (
-            <SubframeCore.IconWrapper className="text-body-default-semibold-0 font-body-default-semibold-0 text-icon-neutral-primary group-active/7aa51c7e:text-icon-neutral-on-subtle">
+            <SubframeCore.IconWrapper className="text-body-default-semibold-0 font-body-default-semibold-0 text-icon-neutral-primary group-active/7aa51c7e:text-icon-neutral-on-subtle col-start-1 inline-flex h-5 w-5 flex-none items-center justify-center justify-self-center leading-none [&>svg]:h-5 [&>svg]:max-h-5 [&>svg]:w-5 [&>svg]:max-w-5">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {children ? (
            <span
              className={SubframeUtils.twClassNames(
-                "line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-active/7aa51c7e:text-text-neutral-on-subtle",
+                "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-active/7aa51c7e:text-text-neutral-on-subtle col-start-2 min-w-0 truncate overflow-hidden whitespace-nowrap opacity-100 transition-[opacity] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
                {
                  hidden: variant === "icon-only",
                  "text-text-neutral-on-subtle": selected,
@@ -92,143 +77,61 @@ export interface NavSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
 }

-const NavSection = React.forwardRef<HTMLDivElement, NavSectionProps>(
-  function NavSection(
-    {
-      children,
-      label,
-      variant = "default",
-      showLabel = false,
-      showDivider = false,
-      className,
-      ...otherProps
-    }: NavSectionProps,
-    ref
-  ) {
-    return (
+const NavSection = React.forwardRef<HTMLDivElement, NavSectionProps>(function NavSection(
+  { children, label, variant = "default", showLabel = false, showDivider = false, className, ...otherProps }: NavSectionProps,
+  ref
+) {
+  return (
+    <div className={SubframeUtils.twClassNames("group/c119f2b2 flex w-full flex-col items-start gap-2 pt-2", className)} ref={ref} {...otherProps}>
      <div
-        className={SubframeUtils.twClassNames(
-          "group/c119f2b2 flex w-full flex-col items-start gap-2 pt-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
+        className={SubframeUtils.twClassNames("hidden w-full items-start", {
+          flex: showDivider,
+        })}
      >
-        <div
-          className={SubframeUtils.twClassNames("hidden w-full items-start", {
-            flex: showDivider,
-          })}
-        >
-          <SidebarInside.NavDivider />
-        </div>
-        <div
-          className={SubframeUtils.twClassNames("hidden w-full items-start", {
-            flex: showLabel,
-          })}
-        >
-          <SidebarInside.NavLabel label={label} />
-        </div>
-        {children ? (
-          <div
-            className={SubframeUtils.twClassNames(
-              "flex w-full grow shrink-0 basis-0 flex-col items-center",
-              { "pl-5 pr-0 py-0": variant === "subsection" }
-            )}
-          >
-            {children}
-          </div>
-        ) : null}
+        <SidebarInside.NavDivider />
      </div>
-    );
-  }
-);
+      <div
+        className={SubframeUtils.twClassNames("hidden w-full items-start", {
+          flex: showLabel,
+        })}
+      >
+        <SidebarInside.NavLabel label={label} />
+      </div>
+      {children ? (
+        <div className={SubframeUtils.twClassNames("flex w-full shrink-0 grow basis-0 flex-col items-center", { "py-0 pr-0 pl-5": variant === "subsection" })}>
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+});

 export interface NavLabelProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  className?: string;
 }

-const NavLabel = React.forwardRef<HTMLDivElement, NavLabelProps>(
-  function NavLabel({ label, className, ...otherProps }: NavLabelProps, ref) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "flex w-full flex-col items-start gap-4 px-3 py-1",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        {label ? (
-          <span className="w-full text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary">
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  }
-);
+const NavLabel = React.forwardRef<HTMLDivElement, NavLabelProps>(function NavLabel({ label, className, ...otherProps }: NavLabelProps, ref) {
+  return (
+    <div className={SubframeUtils.twClassNames("flex w-full flex-col items-start gap-4 px-3 py-1", className)} ref={ref} {...otherProps}>
+      {label ? <span className="text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary w-full">{label}</span> : null}
+    </div>
+  );
+});

 export interface NavDividerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
 }

-const NavDivider = React.forwardRef<HTMLDivElement, NavDividerProps>(
-  function NavDivider({ className, ...otherProps }: NavDividerProps, ref) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "flex w-full flex-col items-center justify-center gap-2 px-1 pt-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <div className="flex h-px w-full flex-none flex-col items-center justify-center gap-2 bg-border-default" />
-      </div>
-    );
-  }
-);
+const NavDivider = React.forwardRef<HTMLDivElement, NavDividerProps>(function NavDivider({ className, ...otherProps }: NavDividerProps, ref) {
+  return (
+    <div className={SubframeUtils.twClassNames("flex w-full flex-col items-center justify-center gap-2 px-1 pt-2", className)} ref={ref} {...otherProps}>
+      <div className="bg-border-default flex h-px w-full flex-none flex-col items-center justify-center gap-2" />
+    </div>
+  );
+});

-export interface SubcomponentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  sidebarButton?: "close" | "open";
-  className?: string;
-}
-
-const Subcomponent = React.forwardRef<HTMLDivElement, SubcomponentProps>(
-  function Subcomponent(
-    { sidebarButton = "close", className, ...otherProps }: SubcomponentProps,
-    ref
-  ) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "group/21460331 flex h-8 w-8 flex-col items-center justify-center gap-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <IconButton
-          variant="tertiary"
-          size="extra-small"
-          square={true}
-          icon={
-            sidebarButton === "open" ? (
-              <FeatherSidebarOpen />
-            ) : (
-              <FeatherSidebarClose />
-            )
-          }
-        />
-      </div>
-    );
-  }
-);
-
-export interface SidebarInsideRootProps
-  extends React.HTMLAttributes<HTMLElement> {
+export interface SidebarInsideRootProps extends React.HTMLAttributes<HTMLElement> {
  variant?: "open" | "closed";
  footer?: React.ReactNode;
  children?: React.ReactNode;
@@ -236,64 +139,57 @@ export interface SidebarInsideRootProps
  className?: string;
 }

-const SidebarInsideRoot = React.forwardRef<HTMLElement, SidebarInsideRootProps>(
-  function SidebarInsideRoot(
-    {
-      variant = "open",
-      footer,
-      children,
-      visible = false,
-      className,
-      ...otherProps
-    }: SidebarInsideRootProps,
-    ref
-  ) {
-    return (
-      <nav
-        className={SubframeUtils.twClassNames(
-          "group/f6538807 hidden h-full min-w-[208px] flex-col items-start rounded-l-md border-r border-solid border-border-default bg-surface-neutral-secondary relative",
-          {
-            flex: visible,
-            "w-12 items-center justify-center": variant === "closed",
-          },
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <Subcomponent
-          className="absolute -right-[17px] top-[0px] z-10"
-          sidebarButton={variant === "closed" ? "open" : undefined}
-        />
-        {children ? (
-          <div
-            className={SubframeUtils.twClassNames(
-              "flex w-full grow shrink-0 basis-0 flex-col items-start px-2 pt-1 pb-2 overflow-auto",
-              { "items-center": variant === "closed" }
-            )}
-          >
-            {children}
-          </div>
-        ) : null}
-        {footer ? (
-          <div
-            className={SubframeUtils.twClassNames(
-              "hidden w-full items-center gap-4 border-t border-solid border-border-default px-6 py-6",
-              { "justify-center": variant === "closed" }
-            )}
-          >
-            {footer}
-          </div>
-        ) : null}
-      </nav>
-    );
-  }
-);
+const SidebarInsideRoot = React.forwardRef<HTMLElement, SidebarInsideRootProps>(function SidebarInsideRoot(
+  { variant = "open", footer, children, visible = false, className, onPointerMove, onPointerLeave, ...otherProps }: SidebarInsideRootProps,
+  ref
+) {
+  const { handlePointerMove, handlePointerLeave } = useSidebarHoverSweep({ onPointerMove, onPointerLeave });
+
+  return (
+    <nav
+      className={SubframeUtils.twClassNames(
+        "group/f6538807 border-border-default bg-surface-neutral-secondary relative hidden h-full w-[208px] min-w-0 flex-col items-start overflow-visible rounded-l-md border-r border-solid transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width]",
+        {
+          flex: visible,
+          "w-12": variant === "closed",
+        },
+        className
+      )}
+      ref={ref}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      {...otherProps}
+    >
+      {children ? (
+        <div
+          className={SubframeUtils.twClassNames(
+            // @subframe/sync-disable -- local fix: do not center children when closed (items-center removed) so the icon column stays left-anchored through the width animation.
+            "flex shrink-0 grow basis-0 flex-col items-start overflow-x-hidden overflow-y-auto pt-1 pb-2 transition-[padding,width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+            {
+              "w-full px-2": variant === "open",
+              "w-12 px-2": variant === "closed",
+            }
+          )}
+        >
+          {children}
+        </div>
+      ) : null}
+      {footer ? (
+        <div
+          className={SubframeUtils.twClassNames("border-border-default hidden w-full items-center gap-4 border-t border-solid px-6 py-6", {
+            "justify-center": variant === "closed",
+          })}
+        >
+          {footer}
+        </div>
+      ) : null}
+    </nav>
+  );
+});

 export const SidebarInside = Object.assign(SidebarInsideRoot, {
  NavItem,
  NavSection,
  NavLabel,
  NavDivider,
-  Subcomponent,
 });
@@ -12,6 +12,7 @@ import { FeatherSidebarClose } from "@subframe/core";
 import { FeatherSidebarOpen } from "@subframe/core";
 import * as SubframeCore from "@subframe/core";
 import * as SubframeUtils from "../../utils";
+import { useSidebarHoverSweep } from "../../sidebar-hover-sweep";
 import { IconButton } from "../IconButton";
 import { Logo } from "../Logo";

@@ -24,57 +25,54 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
 }

 const NavItem = React.forwardRef<HTMLDivElement, NavItemProps>(function NavItem(
-  {
-    icon = <FeatherCircleDashed />,
-    children,
-    selected = false,
-    variant = "icon-and-text",
-    className,
-    ...otherProps
-  }: NavItemProps,
+  { icon = <FeatherCircleDashed />, children, selected = false, variant = "icon-and-text", className, ...otherProps }: NavItemProps,
  ref
 ) {
  return (
    <div
      className={SubframeUtils.twClassNames(
+        // @subframe/sync-disable -- local fix: keep the item left-anchored on collapse (no items-center flip) so the icon does not jump horizontally.
        "group/2713e17b flex w-full cursor-pointer flex-col items-start gap-2 pt-2",
-        { "items-center": variant === "icon-only" },
        className
      )}
      ref={ref}
+      data-sidebar-hover-item="true"
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
+          // @subframe/sync-disable -- local fix: no items-center flip on collapse (keeps subitem behaviour, drops icon-only centering).
          "flex w-full flex-col items-start gap-2",
          {
            "items-end justify-center": variant === "subitem",
-            "items-center": variant === "icon-only",
          }
        )}
      >
        <div
          className={SubframeUtils.twClassNames(
-            "flex w-full items-center gap-2.5 rounded-md px-3 py-2 group-hover/2713e17b:bg-surface-neutral-tertiary",
+            // @subframe/sync-disable -- local fix: icon-only keeps the same left-aligned row (w-full px-3) as the expanded state and only hides the label, so the icon stays at a constant horizontal position through the width animation.
+            // @subframe/sync-disable -- local fix: same hover lift as the inner sidebar (SidebarInside.NavItem) so both rails react identically.
+            // @subframe/sync-disable -- local fix: deliberately without `will-change`. It pins the row to its own compositing layer for good, which drops the label from subpixel to greyscale antialiasing and leaves idle items looking faded or smudged. The browser builds that layer on its own while the scale animates. Same reasoning as the chat list rows.
+            // @subframe/sync-disable -- local fix: `scale` is only a transitioned property while the row is lifted. The lift animates on the way up and drops the instant the pointer leaves, so a rail crossed quickly does not leave a trail of rows easing back down behind the cursor. The background keeps its fade in both directions.
+            "group-hover/2713e17b:bg-surface-neutral-tertiary pointer-events-none flex w-full origin-center scale-100 items-center gap-2.5 rounded-md px-3 py-2 transition-[background-color] duration-75 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover/2713e17b:scale-[1.02] group-hover/2713e17b:transition-[background-color,scale] data-[sidebar-sweep-hover=true]:scale-[1.02] data-[sidebar-sweep-hover=true]:transition-[background-color,scale] motion-reduce:transition-none",
            {
              "w-52 flex-none group-active/2713e17b:w-full group-active/2713e17b:max-w-[208px] group-active/2713e17b:flex-none group-active/2713e17b:justify-end":
                variant === "subitem",
-              "w-auto flex-none items-start justify-center px-2.5 py-2.5":
-                variant === "icon-only",
-              "bg-surface-neutral-tertiary group-hover/2713e17b:bg-surface-neutral-modal group-active/2713e17b:bg-surface-neutral-tertiary":
-                selected,
+              "bg-surface-neutral-tertiary group-hover/2713e17b:bg-surface-neutral-modal group-active/2713e17b:bg-surface-neutral-tertiary": selected,
            }
          )}
+          data-slot="app-sidebar-nav-item-surface"
+          data-sidebar-hover-surface="true"
        >
          {icon ? (
-            <SubframeCore.IconWrapper className="text-body-large font-body-large text-icon-neutral-primary group-active/2713e17b:text-icon-neutral-on-subtle">
+            <SubframeCore.IconWrapper className="text-body-large font-body-large text-icon-neutral-primary group-active/2713e17b:text-icon-neutral-on-subtle inline-flex h-5 w-5 flex-none items-center justify-center leading-none [&>svg]:h-full [&>svg]:w-full">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {children ? (
            <span
              className={SubframeUtils.twClassNames(
-                "line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-active/2713e17b:text-text-neutral-on-subtle",
+                "text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-secondary group-active/2713e17b:text-text-neutral-on-subtle min-w-0 flex-1 truncate",
                {
                  hidden: variant === "icon-only",
                  "text-text-neutral-on-subtle": selected,
@@ -99,206 +97,180 @@ export interface NavSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
 }

-const NavSection = React.forwardRef<HTMLDivElement, NavSectionProps>(
-  function NavSection(
-    {
-      children,
-      label,
-      variant = "default",
-      showLabel = false,
-      showDivider = false,
-      className,
-      ...otherProps
-    }: NavSectionProps,
-    ref
-  ) {
-    return (
+const NavSection = React.forwardRef<HTMLDivElement, NavSectionProps>(function NavSection(
+  { children, label, variant = "default", showLabel = false, showDivider = false, className, ...otherProps }: NavSectionProps,
+  ref
+) {
+  return (
+    <div className={SubframeUtils.twClassNames("group/5a4abcb2 flex w-full flex-col items-start gap-2 pt-2", className)} ref={ref} {...otherProps}>
      <div
-        className={SubframeUtils.twClassNames(
-          "group/5a4abcb2 flex w-full flex-col items-start gap-2 pt-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
+        className={SubframeUtils.twClassNames("hidden w-full items-start", {
+          flex: showDivider,
+        })}
      >
-        <div
-          className={SubframeUtils.twClassNames("hidden w-full items-start", {
-            flex: showDivider,
-          })}
-        >
-          <SidebarWithSections.NavDivider />
-        </div>
-        <div
-          className={SubframeUtils.twClassNames("hidden w-full items-start", {
-            flex: showLabel,
-          })}
-        >
-          <SidebarWithSections.NavLabel label={label} />
-        </div>
-        {children ? (
-          <div
-            className={SubframeUtils.twClassNames(
-              "flex w-full grow shrink-0 basis-0 flex-col items-center",
-              { "pl-5 pr-0 py-0": variant === "subsection" }
-            )}
-          >
-            {children}
-          </div>
-        ) : null}
+        <SidebarWithSections.NavDivider />
      </div>
-    );
-  }
-);
+      <div
+        className={SubframeUtils.twClassNames("hidden w-full items-start", {
+          flex: showLabel,
+        })}
+      >
+        <SidebarWithSections.NavLabel label={label} />
+      </div>
+      {children ? (
+        <div className={SubframeUtils.twClassNames("flex w-full shrink-0 grow basis-0 flex-col items-center", { "py-0 pr-0 pl-5": variant === "subsection" })}>
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+});

 export interface NavLabelProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  className?: string;
 }

-const NavLabel = React.forwardRef<HTMLDivElement, NavLabelProps>(
-  function NavLabel({ label, className, ...otherProps }: NavLabelProps, ref) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "flex w-full flex-col items-start gap-4 px-3 py-1",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        {label ? (
-          <span className="w-full text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary">
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  }
-);
+const NavLabel = React.forwardRef<HTMLDivElement, NavLabelProps>(function NavLabel({ label, className, ...otherProps }: NavLabelProps, ref) {
+  return (
+    <div className={SubframeUtils.twClassNames("flex w-full flex-col items-start gap-4 px-3 py-1", className)} ref={ref} {...otherProps}>
+      {label ? <span className="text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary w-full">{label}</span> : null}
+    </div>
+  );
+});

 export interface NavDividerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
 }

-const NavDivider = React.forwardRef<HTMLDivElement, NavDividerProps>(
-  function NavDivider({ className, ...otherProps }: NavDividerProps, ref) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "flex w-full flex-col items-center justify-center gap-2 px-1 pt-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <div className="flex h-px w-full flex-none flex-col items-center justify-center gap-2 bg-border-default" />
-      </div>
-    );
-  }
-);
+const NavDivider = React.forwardRef<HTMLDivElement, NavDividerProps>(function NavDivider({ className, ...otherProps }: NavDividerProps, ref) {
+  return (
+    <div className={SubframeUtils.twClassNames("flex w-full flex-col items-center justify-center gap-2 px-1 pt-2", className)} ref={ref} {...otherProps}>
+      <div className="bg-border-default flex h-px w-full flex-none flex-col items-center justify-center gap-2" />
+    </div>
+  );
+});

-export interface SubcomponentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface SubcomponentProps extends React.HTMLAttributes<HTMLDivElement> {
  sidebarButton?: "close" | "open";
+  buttonLabel?: string;
+  onToggle?: () => void;
  className?: string;
 }

-const Subcomponent = React.forwardRef<HTMLDivElement, SubcomponentProps>(
-  function Subcomponent(
-    { sidebarButton = "close", className, ...otherProps }: SubcomponentProps,
-    ref
-  ) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "group/7ce7d712 flex flex-col items-start gap-2",
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        <IconButton
-          variant="tertiary"
-          size="small"
-          square={true}
-          icon={
-            sidebarButton === "open" ? (
-              <FeatherSidebarOpen />
-            ) : (
-              <FeatherSidebarClose />
-            )
-          }
-        />
-      </div>
-    );
-  }
-);
+const Subcomponent = React.forwardRef<HTMLDivElement, SubcomponentProps>(function Subcomponent(
+  { sidebarButton = "close", buttonLabel, onToggle, className, ...otherProps }: SubcomponentProps,
+  ref
+) {
+  return (
+    <div className={SubframeUtils.twClassNames("group/7ce7d712 flex flex-col items-start gap-2", className)} ref={ref} {...otherProps}>
+      <IconButton
+        variant="tertiary"
+        size="small"
+        square={true}
+        icon={sidebarButton === "open" ? <FeatherSidebarOpen /> : <FeatherSidebarClose />}
+        aria-label={buttonLabel}
+        onClick={onToggle}
+      />
+    </div>
+  );
+});

-export interface SidebarWithSectionsRootProps
-  extends React.HTMLAttributes<HTMLElement> {
+export interface SidebarWithSectionsRootProps extends React.HTMLAttributes<HTMLElement> {
  variant?: "open" | "closed";
  footer?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
+  // @subframe/sync-disable -- local fix: Collapse-Toggle verdrahtbar machen (App steuert open/closed).
+  onToggleCollapse?: () => void;
+  // @subframe/sync-disable -- local fix: native collapse button needs an accessible, translated name.
+  toggleLabel?: string;
+  // @subframe/sync-disable -- local fix: make the logo a link (click -> dashboard, same target as the Dashboard nav item).
+  logoHref?: string;
+  // @subframe/sync-disable -- logo navigation needs the caller's translated accessible name.
+  logoLabel?: string;
+  // @subframe/sync-disable -- branded surfaces can replace the default mark without forking the canonical sidebar.
+  logoContent?: React.ReactNode;
+  // @subframe/sync-disable -- callback-owned surfaces keep logo navigation client-side.
+  onLogoClick?: () => void;
 }

-const SidebarWithSectionsRoot = React.forwardRef<
-  HTMLElement,
-  SidebarWithSectionsRootProps
->(function SidebarWithSectionsRoot(
+const SidebarWithSectionsRoot = React.forwardRef<HTMLElement, SidebarWithSectionsRootProps>(function SidebarWithSectionsRoot(
  {
    variant = "open",
    footer,
    children,
    className,
+    onToggleCollapse,
+    toggleLabel,
+    logoHref,
+    logoLabel,
+    logoContent,
+    onLogoClick,
+    onPointerMove,
+    onPointerLeave,
    ...otherProps
  }: SidebarWithSectionsRootProps,
  ref
 ) {
+  const { handlePointerMove, handlePointerLeave } = useSidebarHoverSweep({ onPointerMove, onPointerLeave });
+
  return (
    <nav
      className={SubframeUtils.twClassNames(
-        "group/f4047c8b flex h-full w-60 flex-col items-start rounded-l-md border-r border-solid border-border-default bg-surface-neutral-secondary relative",
-        { "w-auto max-w-[64px]": variant === "closed" },
+        // @subframe/sync-disable -- local fix: explicit w-16 width and a smooth collapse transition.
+        "group/f4047c8b border-border-default bg-surface-neutral-secondary relative flex h-full w-60 shrink-0 flex-col items-start rounded-l-md border-r border-solid transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width]",
+        { "w-16": variant === "closed" },
        className
      )}
      ref={ref}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
      {...otherProps}
    >
+      {/* @subframe/sync-disable -- local fix: Collapse-Toggle verdrahtet (onClick -> onToggleCollapse) statt nur dekorativ. */}
      <Subcomponent
-        className="absolute -right-[17px] top-[40px] z-10"
-        sidebarButton={variant === "closed" ? "open" : undefined}
+        className="absolute top-[calc(var(--hg-shell-header-height,3.5rem)-1rem)] -right-[17px] z-40 cursor-pointer"
+        sidebarButton={variant === "closed" ? "open" : "close"}
+        buttonLabel={toggleLabel}
+        onToggle={onToggleCollapse}
      />
      <div
        className={SubframeUtils.twClassNames(
-          "flex h-14 w-full flex-none items-center justify-center gap-2 border-b border-solid border-border-default px-4",
+          "border-border-default flex h-[var(--hg-shell-header-height,3.5rem)] w-full flex-none items-center justify-center gap-2 border-b border-solid px-4 pt-[env(safe-area-inset-top)]",
          { "w-16 px-0 py-0": variant === "closed" }
        )}
      >
        <div className="flex items-center justify-center gap-2">
-          <Logo
-            size="32"
-            showIcon={variant === "closed" ? true : undefined}
-            hideText={variant === "closed" ? true : undefined}
-          />
+          {/* @subframe/sync-disable -- local fix: logo links to the dashboard when logoHref is set (mirrors the Dashboard nav item). */}
+          {onLogoClick ? (
+            <button type="button" aria-label={logoLabel} className="border-0 bg-transparent p-0" onClick={onLogoClick}>
+              {logoContent ?? <Logo size="32" showIcon={variant === "closed" ? true : undefined} hideText={variant === "closed" ? true : undefined} />}
+            </button>
+          ) : logoHref ? (
+            <a href={logoHref} aria-label={logoLabel} className="no-underline">
+              {logoContent ?? <Logo size="32" showIcon={variant === "closed" ? true : undefined} hideText={variant === "closed" ? true : undefined} />}
+            </a>
+          ) : (
+            (logoContent ?? <Logo size="32" showIcon={variant === "closed" ? true : undefined} hideText={variant === "closed" ? true : undefined} />)
+          )}
        </div>
      </div>
      {children ? (
        <div
-          className={SubframeUtils.twClassNames(
-            "flex w-full grow shrink-0 basis-0 flex-col items-start px-2 py-2 overflow-auto",
-            { "w-16": variant === "closed" }
-          )}
+          className={SubframeUtils.twClassNames("flex w-full shrink-0 grow basis-0 flex-col items-start overflow-x-hidden overflow-y-auto px-2 py-2", {
+            "w-16": variant === "closed",
+          })}
        >
          {children}
        </div>
      ) : null}
      {footer ? (
+        // @subframe/sync-disable -- local fix: Footer-Slot sichtbar (Subframe-Export hatte `hidden`); die App nutzt ihn fuer das User-Menue.
        <div
-          className={SubframeUtils.twClassNames(
-            "hidden w-full items-center gap-4 border-t border-solid border-border-default px-6 py-6",
-            { "justify-center": variant === "closed" }
-          )}
+          className={SubframeUtils.twClassNames("border-border-default flex w-full items-center gap-4 border-t border-solid px-6 py-6", {
+            "justify-center": variant === "closed",
+          })}
        >
          {footer}
        </div>
@@ -8,116 +8,70 @@ import React from "react";
 import * as SubframeCore from "@subframe/core";
 import * as SubframeUtils from "../../utils";

-export interface TabBottomProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
+export interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
  active?: boolean;
+  disabled?: boolean;
+  pill?: boolean;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
 }

-const TabBottom = React.forwardRef<HTMLDivElement, TabBottomProps>(
-  function TabBottom(
-    {
-      disabled = false,
-      active = false,
-      icon = null,
-      children,
-      className,
-      ...otherProps
-    }: TabBottomProps,
-    ref
-  ) {
-    return (
-      <div
-        className={SubframeUtils.twClassNames(
-          "group/d5612535 flex w-full cursor-pointer items-center justify-center gap-2 rounded-t-md border-b-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-b-2 hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-b-2 active:border-x-0 active:border-t-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
-          {
-            "border-b-2 border-x-0 border-t-0 border-solid border-brand-brand-border-solid-default bg-surface-feedback-subtle-information":
-              active,
-            "hover:border-b hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
-              disabled,
-          },
-          className
-        )}
-        ref={ref}
-        {...otherProps}
-      >
-        {icon ? (
-          <SubframeCore.IconWrapper
-            className={SubframeUtils.twClassNames(
-              "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/d5612535:text-text-neutral-primary",
-              {
-                "text-text-neutral-primary": active,
-                "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
-                  disabled,
-              }
-            )}
-          >
-            {icon}
-          </SubframeCore.IconWrapper>
-        ) : null}
-        {children ? (
-          <span
-            className={SubframeUtils.twClassNames(
-              "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/d5612535:text-text-neutral-primary",
-              {
-                "text-body-small-medium-0 font-body-small-medium-0": active,
-                "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
-                  disabled,
-              }
-            )}
-          >
-            {children}
-          </span>
-        ) : null}
-      </div>
-    );
-  }
-);
-
-export interface TabTopProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
-  active?: boolean;
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const TabTop = React.forwardRef<HTMLDivElement, TabTopProps>(function TabTop(
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  {
-    disabled = false,
    active = false,
+    disabled = false,
+    pill = false,
    icon = null,
    children,
    className,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
    ...otherProps
-  }: TabTopProps,
+  }: ItemProps,
  ref
 ) {
+  const interactive = typeof onClick === "function";
  return (
    <div
      className={SubframeUtils.twClassNames(
-        "group/0bd8ab70 flex w-full cursor-pointer items-center justify-center gap-2 rounded-b-md border-t-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-t-2 hover:border-x-0 hover:border-b-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-t-2 active:border-x-0 active:border-b-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
+        "group/d5612535 flex w-full cursor-pointer items-center justify-center gap-2 rounded-t-md border-b-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-b-2 hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-b-2 active:border-x-0 active:border-t-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
        {
-          "border-t-2 border-x-0 border-b-0 border-solid border-brand-brand-border-solid-default bg-surface-feedback-subtle-information":
-            active,
-          "hover:border-t hover:border-x-0 hover:border-b-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
+          "rounded-round border-none bg-surface-neutral-tertiary hover:bg-surface-feedback-subtle-neutral-hover":
+            pill,
+          "hover:border-b hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
            disabled,
+          "border-b-2 border-x-0 border-t-0 border-solid border-brand-brand-border-solid-default bg-surface-neutral-tertiary":
+            active,
        },
        className
      )}
      ref={ref}
+      role={role ?? (interactive ? "tab" : undefined)}
+      aria-selected={interactive ? active : undefined}
+      aria-disabled={interactive && disabled ? true : undefined}
+      tabIndex={interactive ? (disabled ? -1 : (tabIndex ?? 0)) : tabIndex}
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (!interactive || disabled || event.defaultPrevented) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.currentTarget.click();
+        }
+      }}
      {...otherProps}
    >
      {icon ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
-            "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/0bd8ab70:text-text-neutral-primary",
+            "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/d5612535:text-text-neutral-primary",
            {
-              "text-text-neutral-primary": active,
-              "text-text-neutral-disabled group-hover/0bd8ab70:text-text-neutral-disabled":
+              "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                disabled,
+              "text-text-neutral-primary": active,
            }
          )}
        >
@@ -127,11 +81,11 @@ const TabTop = React.forwardRef<HTMLDivElement, TabTopProps>(function TabTop(
      {children ? (
        <span
          className={SubframeUtils.twClassNames(
-            "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/0bd8ab70:text-text-neutral-primary",
+            "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/d5612535:text-text-neutral-primary",
            {
-              "text-body-small-medium-0 font-body-small-medium-0": active,
-              "text-text-neutral-disabled group-hover/0bd8ab70:text-text-neutral-disabled":
+              "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                disabled,
+              "text-body-small-medium-0 font-body-small-medium-0": active,
            }
          )}
        >
@@ -155,25 +109,23 @@ const TabsRoot = React.forwardRef<HTMLDivElement, TabsRootProps>(
    return (
      <div
        className={SubframeUtils.twClassNames(
-          "flex w-full items-center gap-2",
+          "flex w-full items-end",
          className
        )}
        ref={ref}
+        role={otherProps.role ?? "tablist"}
        {...otherProps}
      >
-        <div className="flex grow shrink-0 basis-0 items-start">
-          {children ? (
-            <div className="flex grow shrink-0 basis-0 items-start">
-              {children}
-            </div>
-          ) : null}
-        </div>
+        {children ? (
+          <div className="flex grow shrink-0 basis-0 items-start">
+            {children}
+          </div>
+        ) : null}
      </div>
    );
  }
 );

 export const Tabs = Object.assign(TabsRoot, {
-  TabBottom,
-  TabTop,
+  Item,
 });