@creezio/shell-ui 0.22.0

package/ui/workspace/window-chrome-controls.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+import { useCallback, useEffect, useState } from "react";
+import { Minus, Square, X } from "lucide-react";
+import { cn } from "@creezio/shell-ui";
+
+/** Icône « restaurer » (deux carrés superposés, style Windows). */
+function RestoreIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 12 12"
+      className={className}
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.25"
+    >
+      <rect x="3.25" y="1.75" width="7" height="7" rx="0.5" />
+      <path d="M1.75 3.75v6.5h6.5" />
+    </svg>
+  );
+}
+
+/**
+ * Boutons min / max-restore / close — chrome Notion-like (frameless Windows).
+ * Rendu uniquement si `getShellDesktopApi().customWindowChrome` (sync preload).
+ */
+export function WindowChromeControls({
+  tone = "light",
+}: {
+  tone?: "light" | "dark";
+} = {}) {
+  const [visible, setVisible] = useState(false);
+  const [maximized, setMaximized] = useState(false);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.customWindowChrome) return;
+    setVisible(true);
+    void api.isWindowMaximized?.().then((v: boolean) => setMaximized(Boolean(v)));
+    return api.onWindowMaximizedChanged?.((v: boolean) => setMaximized(v));
+  }, []);
+
+  const onMinimize = useCallback(() => {
+    void getShellDesktopApi()?.minimizeWindow?.();
+  }, []);
+
+  const onToggleMax = useCallback(() => {
+    void getShellDesktopApi()?.toggleMaximizeWindow?.().then((r: { isMaximized?: boolean } | void) => {
+      if (r && typeof r.isMaximized === "boolean") setMaximized(r.isMaximized);
+    });
+  }, []);
+
+  const onClose = useCallback(() => {
+    void getShellDesktopApi()?.closeWindow?.();
+  }, []);
+
+  if (!visible) return null;
+
+  const btnTone =
+    tone === "dark"
+      ? "text-slate-300 hover:bg-white/10 hover:text-white active:bg-white/15"
+      : "text-slate-600 hover:bg-black/[0.08] hover:text-slate-900 active:bg-black/[0.12]";
+
+  return (
+    <div
+      className={`${getShellUiBrand().titlebarNoDragClass} flex h-10 shrink-0 items-stretch self-stretch`}
+      role="group"
+      aria-label="Contrôles de la fenêtre"
+    >
+      <button
+        type="button"
+        onClick={onMinimize}
+        aria-label="Réduire"
+        title="Réduire"
+        className={cn(
+          "flex w-[46px] cursor-default items-center justify-center transition-colors",
+          btnTone,
+        )}
+      >
+        <Minus className="h-3.5 w-3.5" strokeWidth={2} />
+      </button>
+      <button
+        type="button"
+        onClick={onToggleMax}
+        aria-label={maximized ? "Restaurer" : "Agrandir"}
+        title={maximized ? "Restaurer" : "Agrandir"}
+        className={cn(
+          "flex w-[46px] cursor-default items-center justify-center transition-colors",
+          btnTone,
+        )}
+      >
+        {maximized ? (
+          <RestoreIcon className="h-3 w-3" />
+        ) : (
+          <Square className="h-3 w-3" strokeWidth={2} />
+        )}
+      </button>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Fermer"
+        title="Fermer"
+        className={cn(
+          "flex w-[46px] cursor-default items-center justify-center transition-colors",
+          tone === "dark" ? "text-slate-300" : "text-slate-600",
+          "hover:bg-[#e81123] hover:text-white active:bg-[#c50f1f] active:text-white",
+        )}
+      >
+        <X className="h-3.5 w-3.5" strokeWidth={2} />
+      </button>
+    </div>
+  );
+}

package/ui/workspace/workspace-config.ts

@@ -0,0 +1,47 @@
+export type ProductDetailCtxAdapter = {
+  isDetailPath(path: string): boolean;
+  withInferredCtx(href: string, fromHref?: string | null): string;
+  withCatalogueCtx(href: string): string;
+};
+
+let sidebarCollapsedKey = "creezio-sidebar-collapsed";
+let defaultNewTabHref = "/dashboard";
+let preferCatalogueSelector = "[data-creezio-assistant-ui]";
+let productDetailCtxAdapter: ProductDetailCtxAdapter | null = null;
+
+export function configureSidebarCollapsedKey(key: string): void {
+  const next = key.trim();
+  if (next) sidebarCollapsedKey = next;
+}
+
+export function getSidebarCollapsedKey(): string {
+  return sidebarCollapsedKey;
+}
+
+export function configureDefaultNewTabHref(href: string): void {
+  const next = href.trim();
+  if (next) defaultNewTabHref = next;
+}
+
+export function getDefaultNewTabHref(): string {
+  return defaultNewTabHref;
+}
+
+export function configurePreferCatalogueSelector(sel: string): void {
+  const next = sel.trim();
+  if (next) preferCatalogueSelector = next;
+}
+
+export function getPreferCatalogueSelector(): string {
+  return preferCatalogueSelector;
+}
+
+export function configureProductDetailCtx(
+  adapter: ProductDetailCtxAdapter | null,
+): void {
+  productDetailCtxAdapter = adapter;
+}
+
+export function getProductDetailCtxAdapter(): ProductDetailCtxAdapter | null {
+  return productDetailCtxAdapter;
+}

package/ui/workspace/workspace-root.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { getShellDesktopApi } from "@creezio/shell-ui";
+import {
+  AssistantProvider,
+  AssistantWidget,
+  UiDriver,
+} from "@creezio/assistant/ui";
+import { DesktopBridge } from "../desktop/desktop-bridge";
+import { AuthWindowChrome } from "../desktop/auth-window-chrome";
+import { AiWorkspaceAgentHost } from "./ai-workspace-agent-host";
+import { AiWorkspaceBanner } from "./ai-workspace-banner";
+import { ImpersonationBanner } from "./impersonation-banner";
+import { TabWorkspaceProvider } from "./tab-workspace-context";
+import { WorkspaceShell } from "./workspace-shell";
+
+function isAuthSurface(pathname: string | null): boolean {
+  if (!pathname) return false;
+  return (
+    pathname === "/login" ||
+    pathname.startsWith("/login/") ||
+    pathname === "/setup" ||
+    pathname.startsWith("/setup/") ||
+    pathname === "/onboarding" ||
+    pathname.startsWith("/onboarding/")
+  );
+}
+
+function isServerCockpitSurface(pathname: string | null): boolean {
+  if (!pathname) return false;
+  return (
+    pathname === "/server-cockpit" || pathname.startsWith("/server-cockpit/")
+  );
+}
+
+/**
+ * Surfaces publiques « bare » (ADR-module-natif-hybride) : rendu sans aucun
+ * chrome OS (sidebar, onglets, assistant). Cas actuel : la landing page
+ * @creezio/landing servie sur /lp, ou via le host public lp.{zone} (le
+ * middleware marque réécrit / → /lp mais usePathname garde l'URL navigateur).
+ */
+function isPublicBareSurface(pathname: string | null): boolean {
+  if (pathname === "/lp" || pathname?.startsWith("/lp/")) return true;
+  if (
+    typeof window !== "undefined" &&
+    window.location.hostname.toLowerCase().startsWith("lp.")
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function defaultHideAssistantOn(pathname: string | null): boolean {
+  return (
+    isAuthSurface(pathname) ||
+    isServerCockpitSurface(pathname) ||
+    isPublicBareSurface(pathname)
+  );
+}
+
+export function WorkspaceRoot({
+  children,
+  wrapWorkspace,
+  banners,
+  sidebar,
+  footbar,
+  afterShell,
+  hideAssistantOn = defaultHideAssistantOn,
+}: {
+  children: ReactNode;
+  wrapWorkspace?: (node: ReactNode) => ReactNode;
+  banners?: ReactNode;
+  sidebar?: ReactNode;
+  footbar?: ReactNode;
+  /** Slot ADDITIF rendu après le chrome par défaut (assistant inclus) —
+   *  ne remplace PAS le widget assistant (pour le masquer : hideAssistantOn). */
+  afterShell?: ReactNode;
+  hideAssistantOn?: (pathname: string | null) => boolean;
+}) {
+  const pathname = usePathname();
+  const authSurface = isAuthSurface(pathname);
+  const serverCockpit = isServerCockpitSurface(pathname);
+  const hideAssistant = hideAssistantOn(pathname);
+
+  // Hors session / cockpit serveur : masquer le FAB Electron topmost.
+  useEffect(() => {
+    if (!hideAssistant) return;
+    void getShellDesktopApi()?.setAssistantChrome?.("hidden");
+  }, [hideAssistant]);
+
+  // Surface publique (ex. landing /lp) : contenu nu, aucun shell ni assistant.
+  if (isPublicBareSurface(pathname)) {
+    return <>{children}</>;
+  }
+
+  const content = authSurface ? (
+    <AuthWindowChrome>{children}</AuthWindowChrome>
+  ) : serverCockpit ? (
+    <AuthWindowChrome variant="dark">{children}</AuthWindowChrome>
+  ) : (
+    children
+  );
+
+  const shell = (
+    <WorkspaceShell sidebar={sidebar} footbar={footbar}>
+      {hideAssistant ? null : <AiWorkspaceBanner />}
+      <ImpersonationBanner />
+      {banners}
+      {content}
+    </WorkspaceShell>
+  );
+
+  const wrappedShell = wrapWorkspace ? wrapWorkspace(shell) : shell;
+  // afterShell est un slot ADDITIF : il s'insère APRÈS le chrome par défaut
+  // (bridge desktop, widget assistant, UiDriver, agent host). Le remplacer
+  // ferait disparaître l'assistant — régression prod constatée (TF3 y montait
+  // sa cloche d'alertes et perdait FAB + panneau chat).
+  const defaultAfterShell = (
+    <>
+      <DesktopBridge />
+      {hideAssistant ? null : (
+        <>
+          <AssistantWidget />
+          <UiDriver />
+          <AiWorkspaceAgentHost />
+        </>
+      )}
+      {afterShell}
+    </>
+  );
+
+  // AssistantProvider DOIT envelopper WorkspaceShell + AssistantWidget :
+  // les deux appellent useAssistantUi() du même module kit. Un provider
+  // marque local (createContext jumeau) ne suffit PAS — crash prod
+  // « useAssistantUi must be used within AssistantProvider ».
+  return (
+    <AssistantProvider>
+      <TabWorkspaceProvider>
+        {wrappedShell}
+        {defaultAfterShell}
+      </TabWorkspaceProvider>
+    </AssistantProvider>
+  );
+}

package/ui/workspace/workspace-shell.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { usePathname } from "next/navigation";
+import { Menu } from "lucide-react";
+import {
+  ASSISTANT_PANEL_WIDTH_PX,
+  useAssistantUi,
+} from "@creezio/assistant/ui";
+import { cn, getShellUiBrand } from "@creezio/shell-ui";
+import { Sidebar } from "../layout/sidebar";
+import { Button } from "../primitives/button";
+import { GlobalSearchProvider } from "../search/global-search-provider";
+import { PageToolbarProvider } from "../layout/page-toolbar-context";
+import { KeepAliveOutlet } from "./keep-alive";
+import { useTabWorkspace } from "./tab-workspace-context";
+import { isWorkspacePath, normalizeHref } from "./types";
+import { useLocationSearch } from "./use-location-search";
+import { WorkspaceTabBar } from "./workspace-tab-bar";
+import {
+  getPreferCatalogueSelector,
+  getSidebarCollapsedKey,
+} from "./workspace-config";
+
+type SidebarChromeProps = {
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  mobileOpen: boolean;
+  onMobileClose: () => void;
+};
+
+/** Sidebar marque (élément) reçoit les props chrome ; sinon Sidebar kit. */
+function renderSidebarSlot(
+  sidebar: ReactNode | undefined,
+  props: SidebarChromeProps,
+): ReactNode {
+  if (sidebar == null) {
+    return <Sidebar {...props} />;
+  }
+  if (isValidElement(sidebar)) {
+    return cloneElement(
+      sidebar as ReactElement<Partial<SidebarChromeProps>>,
+      props,
+    );
+  }
+  return sidebar;
+}
+
+function resolveInternalHref(anchor: HTMLAnchorElement): string | null {
+  const raw = anchor.getAttribute("href");
+  if (!raw || raw.startsWith("#") || raw.startsWith("mailto:") || raw.startsWith("tel:")) {
+    return null;
+  }
+  if (anchor.target === "_blank" || anchor.hasAttribute("download")) return null;
+  if (anchor.dataset.workspaceNav === "ignore") return null;
+
+  let url: URL;
+  try {
+    url = new URL(raw, window.location.origin);
+  } catch {
+    return null;
+  }
+  if (url.origin !== window.location.origin) return null;
+  if (!isWorkspacePath(url.pathname)) return null;
+  return normalizeHref(`${url.pathname}${url.search}`);
+}
+
+/** Texte lisible du lien pour titre d'onglet provisoire. */
+function linkLabel(anchor: HTMLAnchorElement): string | undefined {
+  const titled = (anchor.getAttribute("title") || "").trim();
+  if (titled) return titled.slice(0, 80);
+  const text = (anchor.innerText || anchor.textContent || "")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (!text || text.length < 2) return undefined;
+  return text.slice(0, 80);
+}
+
+export function WorkspaceShell({
+  children,
+  sidebar,
+  footbar,
+}: {
+  children: ReactNode;
+  sidebar?: ReactNode;
+  footbar?: ReactNode;
+}) {
+  const pathname = usePathname() || "/";
+  const search = useLocationSearch(pathname);
+  // normalizeHref canonise "/" → /dashboard : la page racine (pure redirection)
+  // ne doit jamais avoir sa propre pane keep-alive (boucle router.replace).
+  const cacheKey = normalizeHref(search ? `${pathname}?${search}` : pathname);
+  const inWorkspace = isWorkspacePath(pathname);
+
+  const { navigate, ready, activeTab } = useTabWorkspace();
+  const { open, hydrated } = useAssistantUi();
+  const brand = getShellUiBrand();
+  // Panel ouvert : push layout historique (pr-[400px]).
+  // Panel fermé : PAS de gutter — FAB en overlay (React web / Electron topmost).
+  const rightChromePx = hydrated && open ? ASSISTANT_PANEL_WIDTH_PX : 0;
+  const activeHref = activeTab ? normalizeHref(activeTab.href) : cacheKey;
+
+  const [navOpen, setNavOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const wasOpenRef = useRef(false);
+  /** Clics interceptés avant hydratation workspace — rejoués dès ready. */
+  const pendingNavRef = useRef<{
+    href: string;
+    newTab: boolean;
+    title?: string;
+    preferCatalogue?: boolean;
+  } | null>(null);
+
+  const closeNav = useCallback(() => setNavOpen(false), []);
+
+  // Préférence sidebar réduite persistée (localStorage).
+  useEffect(() => {
+    try {
+      if (window.localStorage.getItem(getSidebarCollapsedKey()) === "1") {
+        setSidebarCollapsed(true);
+      }
+    } catch {
+      // stockage indisponible : on reste déplié
+    }
+  }, []);
+
+  const toggleSidebarCollapsed = useCallback(() => {
+    setSidebarCollapsed((prev) => {
+      const next = !prev;
+      try {
+        window.localStorage.setItem(getSidebarCollapsedKey(), next ? "1" : "0");
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (wasOpenRef.current && !navOpen) {
+      menuButtonRef.current?.focus();
+    }
+    wasOpenRef.current = navOpen;
+  }, [navOpen]);
+
+  // Rejouer la navigation en file dès que le workspace est prêt.
+  useEffect(() => {
+    if (!ready || !pendingNavRef.current) return;
+    const pending = pendingNavRef.current;
+    pendingNavRef.current = null;
+    navigate(pending.href, {
+      newTab: pending.newTab,
+      title: pending.title,
+      preferCatalogue: pending.preferCatalogue,
+    });
+  }, [ready, navigate]);
+
+  // Interception dès le premier paint (même avant ready) — évite le rechargement MPA.
+  useEffect(() => {
+    if (!inWorkspace) return;
+
+    function dispatchNav(
+      href: string,
+      newTab: boolean,
+      title?: string,
+      preferCatalogue?: boolean,
+    ) {
+      if (!ready) {
+        pendingNavRef.current = { href, newTab, title, preferCatalogue };
+        return;
+      }
+      navigate(href, { newTab, title, preferCatalogue });
+    }
+
+    function onClick(e: MouseEvent) {
+      if (e.defaultPrevented || e.button !== 0) return;
+      const anchor = (e.target as Element | null)?.closest?.("a");
+      if (!anchor) return;
+      const href = resolveInternalHref(anchor);
+      if (!href) return;
+
+      const newTab = e.metaKey || e.ctrlKey || e.shiftKey;
+      const preferCatalogue = Boolean(
+        anchor.closest(getPreferCatalogueSelector()),
+      );
+      e.preventDefault();
+      dispatchNav(href, newTab, linkLabel(anchor), preferCatalogue);
+    }
+
+    function onAuxClick(e: MouseEvent) {
+      if (e.button !== 1 || e.defaultPrevented) return;
+      const anchor = (e.target as Element | null)?.closest?.("a");
+      if (!anchor) return;
+      const href = resolveInternalHref(anchor);
+      if (!href) return;
+      const preferCatalogue = Boolean(
+        anchor.closest(getPreferCatalogueSelector()),
+      );
+      e.preventDefault();
+      dispatchNav(href, true, linkLabel(anchor), preferCatalogue);
+    }
+
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("auxclick", onAuxClick, true);
+    return () => {
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("auxclick", onAuxClick, true);
+    };
+  }, [inWorkspace, ready, navigate]);
+
+  if (!inWorkspace) {
+    return <>{children}</>;
+  }
+
+  return (
+    <GlobalSearchProvider>
+      <PageToolbarProvider>
+      <div
+        className={cn(
+          // h-dvh : hauteur viewport stable (PWA standalone incluse)
+          "flex h-dvh max-h-dvh overflow-hidden bg-gradient-to-br from-slate-50 via-white to-sky-50/40",
+          "transition-[padding] duration-200 ease-out",
+          // md+ : push layout uniquement panel ouvert (pas de gutter FAB)
+          rightChromePx > 0 && "md:pr-[var(--assistant-chrome-right)]",
+        )}
+        style={
+          {
+            "--assistant-panel-width": `${ASSISTANT_PANEL_WIDTH_PX}px`,
+            "--assistant-chrome-right": `${rightChromePx}px`,
+          } as CSSProperties
+        }
+        data-creezio-assistant-chrome={hydrated && open ? "panel" : "fab-overlay"}
+      >
+        {renderSidebarSlot(sidebar, {
+          collapsed: sidebarCollapsed,
+          onToggleCollapse: toggleSidebarCollapsed,
+          mobileOpen: navOpen,
+          onMobileClose: closeNav,
+        })}
+        <div
+          className={cn(
+            "flex min-h-0 min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
+            sidebarCollapsed ? "md:ml-16" : "md:ml-64",
+          )}
+        >
+          <header className="sticky top-0 z-20 shrink-0 bg-[#ebe7df] px-2 sm:px-3 md:px-4 md:pr-0">
+            <div className="flex items-stretch gap-1.5">
+              <Button
+                ref={menuButtonRef}
+                type="button"
+                variant="outline"
+                size="icon"
+                className={cn(
+                  brand.titlebarNoDragClass,
+                  "mt-1.5 h-7 w-7 shrink-0 border-slate-300/80 bg-white/70 md:hidden",
+                )}
+                onClick={() => setNavOpen(true)}
+                aria-label="Ouvrir le menu de navigation"
+                aria-expanded={navOpen}
+                aria-controls="mobile-nav"
+              >
+                <Menu className="h-4 w-4" />
+              </Button>
+              <div className="min-w-0 flex-1">
+                <WorkspaceTabBar />
+              </div>
+            </div>
+          </header>
+          {/* Scroll délégué aux panes keep-alive (pas au main) → scrollY natif par onglet */}
+          <main className="relative min-h-0 flex-1 overflow-hidden bg-white">
+            <KeepAliveOutlet routeKey={cacheKey} activeHref={activeHref}>
+              {children}
+            </KeepAliveOutlet>
+          </main>
+          {footbar}
+        </div>
+      </div>
+      </PageToolbarProvider>
+    </GlobalSearchProvider>
+  );
+}