@creezio/shell-ui 0.22.0

package/ui/os-pages/desktop-settings-page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+/**
+ * Page OS réglages desktop — composition kit (pas de métier marque).
+ * Les marques ne font que `export { DesktopSettingsPage as default }`.
+ *
+ * Parité Configuration TF (onglets Connexion / Hosts / Compte / Support / Système).
+ */
+import { AccountSettings } from "../settings/account-settings";
+import { AgentProfileSettings } from "../settings/agent-profile-settings";
+import { ApiKeysSettings } from "../settings/api-keys-settings";
+import { DesktopConnectionSettings } from "../settings/desktop-connection-settings";
+import { DesktopHermesSettings } from "../settings/desktop-hermes-settings";
+import { DesktopN8nSettings } from "../settings/desktop-n8n-settings";
+import { DesktopTunnel } from "../settings/desktop-tunnel";
+import { DesktopLlmKeys } from "../settings/desktop-llm-keys";
+import { DesktopUpdateSettings } from "../settings/desktop-update-settings";
+import { DesktopBackgroundSettings } from "../settings/desktop-background-settings";
+import { DesktopFleetTelemetrySettings } from "../settings/desktop-fleet-telemetry-settings";
+import { FactoryResetSettings } from "../settings/factory-reset-settings";
+import { OpsDiagnosticSettings } from "../settings/ops-diagnostic-settings";
+import { SearchReindexSettings } from "../settings/search-reindex-settings";
+import {
+  HostManagedNotice,
+  HostOnlySettings,
+} from "../settings/host-only-settings";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
+import type { ReactNode } from "react";
+
+export type DesktopSettingsExtraTab = {
+  value: string;
+  label: string;
+  content: ReactNode;
+};
+
+export type DesktopSettingsPageProps = {
+  /**
+   * Onglets additionnels injectés par la marque / le wrapper os-ui —
+   * ex. Email (`MailSettings` de @creezio/mails/ui, dépendance inverse
+   * interdite depuis shell-ui). Insérés avant Support.
+   */
+  extraTabs?: DesktopSettingsExtraTab[];
+  /** Onglet ouvert par défaut (ex. `?tab=email`). Défaut : connexion. */
+  defaultTab?: string;
+};
+
+export function DesktopSettingsPage({
+  extraTabs = [],
+  defaultTab,
+}: DesktopSettingsPageProps = {}) {
+  const known = new Set([
+    "connexion",
+    "hermes",
+    "n8n",
+    "tunnel",
+    "compte",
+    "support",
+    "systeme",
+    ...extraTabs.map((t) => t.value),
+  ]);
+  const initial = defaultTab && known.has(defaultTab) ? defaultTab : "connexion";
+  return (
+    <section className="mx-auto max-w-4xl px-0 py-4">
+      <h1 className="mb-4 text-2xl font-semibold tracking-tight text-slate-900">
+        Configuration
+      </h1>
+      <p className="mb-4 text-sm text-slate-600">
+        Chaque service a son onglet — paramètres verrouillés visibles, actions et
+        statut
+      </p>
+      <Tabs defaultValue={initial} className="w-full">
+        <TabsList className="mb-4 flex h-auto w-full flex-wrap justify-start gap-1">
+          <TabsTrigger value="connexion">Connexion</TabsTrigger>
+          <TabsTrigger value="hermes">Hermes</TabsTrigger>
+          <TabsTrigger value="n8n">n8n</TabsTrigger>
+          <TabsTrigger value="tunnel">Accès distant</TabsTrigger>
+          <TabsTrigger value="compte">Compte &amp; clés</TabsTrigger>
+          {extraTabs.map((t) => (
+            <TabsTrigger key={t.value} value={t.value}>
+              {t.label}
+            </TabsTrigger>
+          ))}
+          <TabsTrigger value="support">Support</TabsTrigger>
+          <TabsTrigger value="systeme">Système</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="connexion" className="mt-0 space-y-4">
+          <DesktopConnectionSettings />
+        </TabsContent>
+
+        <TabsContent value="hermes" className="mt-0 space-y-4">
+          <HostOnlySettings
+            fallback={<HostManagedNotice label="l'agent Hermes" />}
+          >
+            <DesktopHermesSettings />
+          </HostOnlySettings>
+        </TabsContent>
+
+        <TabsContent value="n8n" className="mt-0 space-y-4">
+          <HostOnlySettings fallback={<HostManagedNotice label="n8n" />}>
+            <DesktopN8nSettings />
+          </HostOnlySettings>
+        </TabsContent>
+
+        <TabsContent value="tunnel" className="mt-0 space-y-4">
+          <HostOnlySettings
+            fallback={<HostManagedNotice label="l'accès distant (tunnel)" />}
+          >
+            <DesktopTunnel />
+          </HostOnlySettings>
+        </TabsContent>
+
+        <TabsContent value="compte" className="mt-0 space-y-4">
+          <HostOnlySettings
+            fallback={
+              <HostManagedNotice label="le compte propriétaire et les clés IA" />
+            }
+          >
+            <AccountSettings />
+            <DesktopLlmKeys />
+          </HostOnlySettings>
+          <AgentProfileSettings />
+          <ApiKeysSettings />
+        </TabsContent>
+
+        {extraTabs.map((t) => (
+          <TabsContent key={t.value} value={t.value} className="mt-0 space-y-4">
+            {t.content}
+          </TabsContent>
+        ))}
+
+        <TabsContent value="support" className="mt-0 space-y-4">
+          <HostOnlySettings
+            fallback={<HostManagedNotice label="la télémétrie support" />}
+          >
+            <DesktopFleetTelemetrySettings />
+          </HostOnlySettings>
+        </TabsContent>
+
+        <TabsContent value="systeme" className="mt-0 space-y-4">
+          <DesktopUpdateSettings />
+          <DesktopBackgroundSettings />
+          <HostOnlySettings
+            fallback={
+              <HostManagedNotice label="l'index de recherche et la remise à zéro" />
+            }
+          >
+            <SearchReindexSettings />
+            <OpsDiagnosticSettings />
+            <FactoryResetSettings />
+          </HostOnlySettings>
+        </TabsContent>
+      </Tabs>
+    </section>
+  );
+}
+
+export default DesktopSettingsPage;

package/ui/os-pages/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Surfaces UI OS — imports ciblés (évite le barrel /ui qui tire workspace+assistant Node).
+ */
+export { DesktopSettingsPage } from "./desktop-settings-page";
+export type {
+  DesktopSettingsPageProps,
+  DesktopSettingsExtraTab,
+} from "./desktop-settings-page";

package/ui/page-loading/entity-page-loading.tsx

@@ -0,0 +1,59 @@
+import { AppShell } from "../layout/app-shell";
+import { Skeleton } from "../primitives/skeleton";
+import type { TrailCrumb } from "../workspace/types";
+
+/** Squelette fiche entité (galerie + panneau) — pas un tableau liste. */
+export function EntityPageLoading({
+  title = "Produit",
+  subtitle = "Chargement de la fiche…",
+  trail,
+}: {
+  title?: string;
+  subtitle?: string;
+  trail?: TrailCrumb[];
+}) {
+  return (
+    <AppShell title={title} subtitle={subtitle} kind="entity" trail={trail}>
+      <div
+        className="space-y-6"
+        aria-busy="true"
+        aria-label="Chargement de la fiche"
+      >
+        <div className="grid gap-6 lg:grid-cols-12 lg:items-start">
+          <div className="lg:col-span-7">
+            <Skeleton className="aspect-square w-full rounded-xl" />
+          </div>
+          <aside className="lg:col-span-5">
+            <div className="rounded-xl border border-slate-200 bg-white p-5 sm:p-6">
+              <Skeleton className="h-7 w-3/4" />
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Skeleton className="h-5 w-20 rounded-full" />
+                <Skeleton className="h-5 w-16 rounded-full" />
+              </div>
+              <div className="mt-5 space-y-2">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-9 w-36" />
+                <Skeleton className="h-4 w-28" />
+              </div>
+              <div className="mt-5 grid gap-3 border-t border-slate-100 pt-5 sm:grid-cols-2">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+              <Skeleton className="mt-6 h-10 w-full rounded-md" />
+            </div>
+          </aside>
+        </div>
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
+          <Skeleton className="mb-3 h-4 w-40" />
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-2/3" />
+          </div>
+        </div>
+      </div>
+    </AppShell>
+  );
+}

package/ui/page-loading/list-page-loading.tsx

@@ -0,0 +1,61 @@
+import { AppShell } from "../layout/app-shell";
+import { Skeleton } from "../primitives/skeleton";
+import type { PageKind, TrailCrumb } from "../workspace/types";
+
+/** Shell immédiat pour pages liste lourdes — même pattern JustRent. */
+export function ListPageLoading({
+  title,
+  subtitle = "Chargement des données…",
+  kpiCount = 0,
+  filterRows = 1,
+  tableRows = 8,
+  kind = "section",
+  trail,
+}: {
+  title: string;
+  subtitle?: string;
+  kpiCount?: number;
+  filterRows?: number;
+  tableRows?: number;
+  kind?: PageKind;
+  trail?: TrailCrumb[];
+}) {
+  return (
+    <AppShell title={title} subtitle={subtitle} kind={kind} trail={trail}>
+      <div className="space-y-4" aria-busy="true" aria-label="Chargement de la page">
+        {kpiCount > 0 ? (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: kpiCount }).map((_, i) => (
+              <Skeleton key={i} className="h-28 rounded-xl" />
+            ))}
+          </div>
+        ) : null}
+        <div className="space-y-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+          <Skeleton className="h-9 w-full max-w-md" />
+          {Array.from({ length: filterRows }).map((_, i) => (
+            <div key={i} className="flex flex-wrap gap-2">
+              <Skeleton className="h-8 w-28 rounded-md" />
+              <Skeleton className="h-8 w-32 rounded-md" />
+              <Skeleton className="h-8 w-24 rounded-md" />
+            </div>
+          ))}
+        </div>
+        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+          <div className="border-b border-slate-100 px-4 py-3">
+            <Skeleton className="h-4 w-40" />
+          </div>
+          <div className="divide-y divide-slate-100">
+            {Array.from({ length: tableRows }).map((_, i) => (
+              <div key={i} className="flex items-center gap-3 px-4 py-3">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 flex-1" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-20" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </AppShell>
+  );
+}

package/ui/pagination.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+
+export function Pagination({
+  page,
+  pageSize,
+  total,
+}: {
+  page: number;
+  pageSize: number;
+  total: number;
+}) {
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+
+  function href(p: number) {
+    const next = new URLSearchParams(params.toString());
+    next.set("page", String(p));
+    return `${pathname}?${next.toString()}`;
+  }
+
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  const btn =
+    "inline-flex h-8 items-center rounded-md border border-slate-200 bg-white px-3 text-xs font-medium hover:bg-slate-50 disabled:opacity-40";
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-3 pt-2">
+      <p className="text-sm text-slate-500">
+        {from}–{to} sur {total.toLocaleString("fr-FR")}
+      </p>
+      <div className="flex items-center gap-2">
+        {page > 1 ? (
+          <Link className={btn} href={href(page - 1)}>
+            Précédent
+          </Link>
+        ) : (
+          <span className={`${btn} opacity-40`}>Précédent</span>
+        )}
+        <span className="text-sm tabular-nums text-slate-600">
+          Page {page} / {pages}
+        </span>
+        {page < pages ? (
+          <Link className={btn} href={href(page + 1)}>
+            Suivant
+          </Link>
+        ) : (
+          <span className={`${btn} opacity-40`}>Suivant</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/primitives/avatar.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@creezio/shell-ui";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn("relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-xs font-medium text-slate-700",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback };

package/ui/primitives/badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@creezio/shell-ui";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-slate-900 text-white",
+        secondary: "border-transparent bg-slate-100 text-slate-700",
+        outline: "border-slate-200 text-slate-700",
+        success: "border-transparent bg-emerald-100 text-emerald-800",
+        warning: "border-transparent bg-amber-100 text-amber-800",
+        danger: "border-transparent bg-red-100 text-red-800",
+        info: "border-transparent bg-sky-100 text-sky-800",
+        muted: "border-transparent bg-slate-50 text-slate-500",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * <span> et non <div> : un badge est utilisé DANS des <p>, <a> et <span>
+ * (fiche produit, dashboard, préférences…). Un <div> y est du HTML invalide :
+ * le parseur navigateur restructure le DOM (ferme le <p> avant le div) et
+ * l'hydratation React échoue (« Hydration failed » #418/#422, cascade
+ * possible en #310) — écran « Application error » dans l'app desktop.
+ */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/ui/primitives/breadcrumb.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@creezio/shell-ui";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="Fil d'Ariane" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex min-w-0 flex-wrap items-center gap-1.5 overflow-hidden text-xs text-slate-500",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex min-w-0 items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return (
+    <Comp
+      ref={ref}
+      className={cn("truncate text-sky-700 transition-colors hover:underline", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("truncate font-medium text-slate-800", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={cn("shrink-0 text-slate-300 [&>svg]:h-3 [&>svg]:w-3", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/ui/primitives/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@creezio/shell-ui";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-white hover:bg-slate-800",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+        outline: "border border-slate-200 bg-white hover:bg-slate-50",
+        ghost: "hover:bg-slate-100",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/ui/primitives/card.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "@creezio/shell-ui";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border border-slate-200 bg-white shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-slate-500", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };