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

ui/components/IconButton/IconButton.tsx

@@ -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>
     );
   }
 );