@creezio/shell-ui 0.22.0

package/ui/desktop/site-link.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Lien vers un **site externe** (outil, portail, marketplace… — le métier
+ * est décidé par la marque via libellés UI, pas par ce composant).
+ *
+ * - App desktop (Electron) : ouvre un onglet workspace puis WebContentsView.
+ * - Navigateur web : lien target=_blank.
+ */
+
+import { useCallback, type MouseEvent, type ReactNode } from "react";
+import {
+  openExternalSiteFromWorkspace,
+  useTabWorkspaceOptional,
+} from "../workspace/tab-workspace-host";
+
+const DEFAULT_EXTERNAL_SITE_TITLE = "Site externe";
+
+export function SiteLink({
+  url,
+  siteId = 0,
+  /** @deprecated → `siteId` */
+  fournisseurId,
+  className,
+  title,
+  children,
+  "data-creezio-aid": aid,
+  /** @deprecated attribut TF — utiliser data-creezio-aid ou brand.aidAttr */
+  "data-tf2-aid": aidLegacy,
+}: {
+  url: string;
+  /** Id de partition persistante. 0 = onglet générique (hash host). */
+  siteId?: number;
+  /** @deprecated → `siteId` */
+  fournisseurId?: number;
+  className?: string;
+  title?: string;
+  children: ReactNode;
+  "data-creezio-aid"?: string;
+  "data-tf2-aid"?: string;
+}) {
+  const workspace = useTabWorkspaceOptional();
+  const resolvedSiteId = siteId || fournisseurId || 0;
+  const aidAttr = getShellUiBrand().aidAttr ?? "data-creezio-aid";
+  const aidValue = aid ?? aidLegacy;
+
+  const onClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      const api = getShellDesktopApi();
+      if (!api) return;
+      e.preventDefault();
+
+      let tabTitle = (title || "").trim();
+      if (!tabTitle) {
+        try {
+          tabTitle = new URL(url).hostname.replace(/^www\./, "");
+        } catch {
+          tabTitle = DEFAULT_EXTERNAL_SITE_TITLE;
+        }
+      }
+
+      if (workspace?.openExternalSite || workspace?.openSupplierSite) {
+        openExternalSiteFromWorkspace(workspace, {
+          siteId: resolvedSiteId,
+          url,
+          title: tabTitle,
+          navigateUrl: true,
+        });
+        return;
+      }
+
+      api
+        .openTab(resolvedSiteId, url)
+        .then((res: { siteId?: number; fournisseurId?: number }) => {
+          const id = res.siteId ?? res.fournisseurId ?? resolvedSiteId;
+          window.location.assign(`/site/${id}`);
+        })
+        .catch(() => {
+          window.open(url, "_blank", "noreferrer");
+        });
+    },
+    [url, resolvedSiteId, title, workspace],
+  );
+
+  const extraAid =
+    aidValue != null
+      ? ({ [aidAttr]: aidValue } as Record<string, string>)
+      : undefined;
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+      className={className}
+      title={title}
+      onClick={onClick}
+      {...extraAid}
+    >
+      {children}
+    </a>
+  );
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Re-export — source : `src/components/workspace/window-chrome-controls.tsx`.
+ * Conservé aussi sous `desktop/` pour le chemin checklist du port shell.
+ */
+export { WindowChromeControls } from "../workspace/window-chrome-controls";

package/ui/desktop-types.ts

@@ -0,0 +1,30 @@
+/** Types bridge desktop (SoT @creezio/shell) — re-export UI pour cutover O9p. */
+export type {
+  DesktopContentRect,
+  DesktopTabLoadState,
+  DesktopTabInfo,
+} from "@creezio/shell";
+
+/** Types update desktop plateforme (O9) — extrait gold TF. */
+
+export type DesktopUpdateState =
+  | "disabled"
+  | "idle"
+  | "checking"
+  | "available"
+  | "not-available"
+  | "downloading"
+  | "ready"
+  | "error";
+
+export type DesktopUpdateStatus = {
+  state: DesktopUpdateState | string;
+  currentVersion: string;
+  availableVersion?: string;
+  percent?: number;
+  bytesPerSecond?: number;
+  transferred?: number;
+  total?: number;
+  error?: string;
+  updateAvailable: boolean;
+};

package/ui/faceted-filters.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useTransition } from "react";
+import { useSearchParams, usePathname, useRouter } from "next/navigation";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./primitives/select";
+import { SearchInput } from "./search-input";
+import { aidProps } from "./lib/aid";
+
+export type FacetOption = { value: string; c: number; label?: string };
+
+export type FacetDef = {
+  key: string;
+  label: string;
+  options: FacetOption[];
+  allLabel?: string;
+  /** Valeur affichée si le param URL est absent (ex. period → exercice). */
+  defaultValue?: string;
+  /** Pas de ligne « Tous » — utile quand les options couvrent déjà le reset (ex. period=all). */
+  hideAllOption?: boolean;
+};
+
+export function FacetedFilters({
+  facets,
+  searchKey = "q",
+  searchPlaceholder = "Rechercher…",
+  showSearchSubmit = false,
+  showSearch = true,
+  skipRefresh = false,
+}: {
+  facets: FacetDef[];
+  searchKey?: string;
+  searchPlaceholder?: string;
+  /** Bouton « Filtrer » (inutile avec le debounce par défaut). */
+  showSearchSubmit?: boolean;
+  /** Masquer la recherche (ex. synthèse : exercice + période seulement). */
+  showSearch?: boolean;
+  /** Mode filtre client — pas de `router.refresh()` (voir UI-PATTERNS §4). */
+  skipRefresh?: boolean;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const [, startTransition] = useTransition();
+
+  function update(
+    key: string,
+    value: string,
+    opts?: { defaultValue?: string; allIsOption?: boolean },
+  ) {
+    const next = new URLSearchParams(params.toString());
+    const isDefault = Boolean(opts?.defaultValue && value === opts.defaultValue);
+    const isClearAll = value === "all" && !opts?.allIsOption;
+    if (!value || isDefault || isClearAll) next.delete(key);
+    else next.set(key, value);
+    next.delete("page");
+    // Un changement de facette invalide le preset affiché
+    next.delete("preset");
+    // Période rapide et plage custom sont exclusives
+    if (key === "period") {
+      next.delete("dateFrom");
+      next.delete("dateTo");
+    }
+    // Changer de famille invalide la catégorie feuille
+    if (key === "famille") next.delete("categorie");
+    const qs = next.toString();
+    const href = qs ? `${pathname}?${qs}` : pathname;
+    startTransition(() => {
+      router.push(href);
+      if (!skipRefresh) router.refresh();
+    });
+  }
+
+  return (
+    <div className="flex flex-wrap items-end gap-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+      {showSearch ? (
+        <SearchInput
+          searchKey={searchKey}
+          placeholder={searchPlaceholder}
+          showSubmit={showSearchSubmit}
+          skipRefresh={skipRefresh}
+        />
+      ) : null}
+      {facets.map((f) => {
+        const current = params.get(f.key) || f.defaultValue || "all";
+        const optionsHaveAll = f.options.some((o) => o.value === "all");
+        return (
+          <Select
+            key={f.key}
+            value={current}
+            onValueChange={(v) =>
+              update(f.key, v, {
+                defaultValue: f.defaultValue,
+                allIsOption: optionsHaveAll,
+              })
+            }
+          >
+            <SelectTrigger
+              className="w-52"
+              {...aidProps(`filter.${f.key}`)}
+              aria-label={`Filtre ${f.label}`}
+            >
+              <SelectValue placeholder={f.label} />
+            </SelectTrigger>
+            <SelectContent>
+              {!f.hideAllOption && !optionsHaveAll ? (
+                <SelectItem value="all">{f.allLabel || `Tous — ${f.label}`}</SelectItem>
+              ) : null}
+              {f.options.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {(o.label || o.value)} ({o.c})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+      })}
+    </div>
+  );
+}

package/ui/global-search-host.ts

@@ -0,0 +1,20 @@
+/**
+ * Host marque pour GlobalSearch (dépend tab-workspace).
+ */
+
+export type GlobalSearchHost = {
+  useGlobalSearch: () => any;
+};
+
+let host: GlobalSearchHost | null = null;
+
+export function configureGlobalSearchHost(next: GlobalSearchHost): void {
+  host = next;
+}
+
+export function useGlobalSearch(): any {
+  if (!host?.useGlobalSearch) {
+    return { open: false, setOpen: () => {}, query: "", setQuery: () => {} };
+  }
+  return host.useGlobalSearch();
+}

package/ui/global-search.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useGlobalSearch } from "./global-search-host";
+import { cn } from "@creezio/shell-ui";
+
+export function GlobalSearchTrigger({
+  className,
+  iconOnly = false,
+  variant = "sidebar",
+}: {
+  className?: string;
+  iconOnly?: boolean;
+  /** sidebar = fond sombre (nav) ; toolbar = bandeau blanc sous les onglets. */
+  variant?: "sidebar" | "toolbar";
+}) {
+  const { setOpen } = useGlobalSearch();
+  const isToolbar = variant === "toolbar";
+
+  const baseClass = isToolbar
+    ? "border-slate-200/90 bg-slate-50/80 text-slate-500 hover:border-slate-300 hover:bg-white hover:text-slate-700"
+    : "border-slate-700/80 bg-slate-800/80 text-slate-400 hover:border-slate-600 hover:bg-slate-800 hover:text-slate-300";
+
+  if (iconOnly) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        title="Rechercher (⌘K)"
+        aria-label="Rechercher"
+        className={cn(
+          "flex h-9 w-full items-center justify-center rounded-lg border transition-colors",
+          baseClass,
+          className,
+        )}
+      >
+        <Search className="h-4 w-4 shrink-0" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen(true)}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-left text-sm transition-colors",
+        baseClass,
+        className,
+      )}
+    >
+      <Search className="h-4 w-4 shrink-0" />
+      <span className="flex-1 truncate">Rechercher…</span>
+      <kbd
+        className={cn(
+          "hidden shrink-0 rounded border px-1.5 py-0.5 text-[10px] font-medium sm:inline",
+          isToolbar
+            ? "border-slate-200 bg-white text-slate-400"
+            : "border-slate-600 bg-slate-900/60 text-slate-500",
+        )}
+      >
+        ⌘K
+      </kbd>
+    </button>
+  );
+}

package/ui/index.ts

@@ -0,0 +1,178 @@
+/**
+ * @creezio/shell-ui/ui — primitives + shell CRM UI (O9, gold TF).
+ * Consommer via `@creezio/shell-ui/ui`.
+ */
+
+/* ── Brand / hosts (aussi via package root) ── */
+export {
+  configureShellUiBrand,
+  getShellUiBrand,
+  getShellDesktopApi,
+  resetShellUiBrandForTests,
+  type ShellUiBrand,
+} from "../dist/brand.js";
+export {
+  configureTabWorkspaceHost,
+  useTabWorkspace,
+  useTabWorkspaceOptional,
+  useOpenTab,
+  openExternalSiteFromWorkspace,
+  normalizeOpenExternalSiteOpts,
+  type TabWorkspaceHost,
+  type OpenExternalSiteOpts,
+  /** @deprecated → OpenExternalSiteOpts */
+  type OpenSupplierSiteOpts,
+} from "./workspace/tab-workspace-host";
+export {
+  configureGlobalSearchHost,
+  useGlobalSearch,
+  type GlobalSearchHost,
+} from "./global-search-host";
+
+/* ── Primitives ── */
+export * from "./primitives/button";
+export * from "./primitives/badge";
+export * from "./primitives/input";
+export * from "./primitives/card";
+export * from "./primitives/tabs";
+export * from "./primitives/label";
+export * from "./primitives/separator";
+export * from "./primitives/skeleton";
+export * from "./primitives/dialog";
+export * from "./primitives/sheet";
+export * from "./primitives/select";
+export * from "./primitives/dropdown-menu";
+export * from "./primitives/scroll-area";
+export * from "./primitives/avatar";
+export * from "./primitives/breadcrumb";
+export * from "./primitives/command";
+export * from "./primitives/sonner";
+export * from "./primitives/chart";
+
+/* ── Lib client ── */
+export * from "./lib/aid";
+export { useShellUiBrand } from "./lib/use-shell-ui-brand";
+export type { ShellUiLoginBrand } from "../dist/brand.js";
+export * from "./lib/desktop-host";
+export * from "./lib/n8n-ui";
+export * from "./lib/hermes-ui";
+export * from "./lib/fleet-tracker-client";
+export * from "./lib/ai-workspace-client";
+export * from "./lib/ai-screencast-hub";
+export {
+  useCreezioResource,
+  useCreezioResources,
+  type UseCreezioResourceOptions,
+} from "./lib/use-creezio-resource";
+
+/* ── Layout / chrome ── */
+export * from "./layout/page-chrome";
+export * from "./layout/page-toolbar-context";
+export * from "./layout/section-view-shell";
+export * from "./layout/entity-header";
+export * from "./layout/sandbox-banner";
+export * from "./layout/app-shell";
+export * from "./layout/desktop-update-banner";
+export * from "./layout/sidebar";
+export * from "./layout/sidebar-host";
+export * from "./layout/native-os-nav";
+export { resolveNavIcon } from "./layout/nav-icons";
+export {
+  NAV_ICON_ALLOWLIST,
+  defaultOsCatalogEntries,
+  isKnownNavIcon,
+  listOsNavEntries,
+  parseNavCatalogSessionItems,
+  registerDefaultOsNavEntries,
+  registerOsNavEntry,
+  resetOsNavRegistryForTests,
+  resolveNavCatalog,
+  type NavCatalogEntry,
+  type NavCatalogError,
+  type NavCatalogFeatures,
+  type NavCatalogGroup,
+  type NavCatalogSessionItem,
+  type NavCatalogSource,
+  type NavIconName,
+  type NavOverride,
+  type ResolveNavCatalogInput,
+  type ResolveNavCatalogResult,
+} from "../dist/nav-catalog.js";
+export {
+  NAV_CATALOG_ENDPOINT,
+  NavCatalogLoader,
+  applyNavCatalogItemsToSidebar,
+  mapNavCatalogSessionToSidebar,
+} from "./layout/nav-catalog-loader";
+
+/* ── Workspace ── */
+export * from "./workspace/types";
+export * from "./workspace/workspace-config";
+export {
+  TabWorkspaceProvider,
+  getWorkspaceTabNavigate,
+  useTabWorkspace as useTabWorkspaceImpl,
+  useTabWorkspaceOptional as useTabWorkspaceOptionalImpl,
+  useOpenTab as useOpenTabImpl,
+  type NavigateOptions,
+  type OpenExternalSiteOpts as TabWorkspaceOpenExternalSiteOpts,
+  /** @deprecated → TabWorkspaceOpenExternalSiteOpts */
+  type OpenSupplierSiteOpts as TabWorkspaceOpenSupplierSiteOpts,
+} from "./workspace/tab-workspace-context";
+export * from "./workspace/workspace-shell";
+export * from "./workspace/workspace-root";
+export * from "./workspace/workspace-tab-bar";
+export * from "./workspace/keep-alive";
+export * from "./workspace/ai-workspace-banner";
+export * from "./workspace/impersonation-banner";
+export { configureAiActivityPanel, AiActivityPanelHost } from "./workspace/ai-activity-panel-host";
+export * from "./workspace/window-chrome-controls";
+export * from "./workspace/ai-workspace-agent-host";
+export * from "./workspace/use-location-search";
+
+/* ── Pages OS composées (wrappers marque = re-export) ── */
+export { DesktopSettingsPage } from "./os-pages/desktop-settings-page";
+
+/* ── Settings desktop ── */
+export * from "./settings/desktop-hermes-settings";
+export * from "./settings/desktop-n8n-settings";
+export * from "./settings/desktop-fleet-telemetry-settings";
+export * from "./settings/desktop-tunnel";
+export * from "./settings/desktop-embed-env-panel";
+export * from "./settings/desktop-connection-settings";
+export * from "./settings/desktop-llm-keys";
+export * from "./settings/desktop-update-settings";
+export * from "./settings/desktop-background-settings";
+export * from "./settings/ops-diagnostic-settings";
+export * from "./settings/api-keys-settings";
+export * from "./settings/agent-profile-settings";
+export * from "./settings/account-settings";
+export * from "./settings/search-reindex-settings";
+export * from "./settings/factory-reset-settings";
+export * from "./settings/locked-config-field";
+export * from "./settings/host-only-settings";
+
+/* ── Desktop / PWA / misc ── */
+export * from "./desktop/site-link";
+export * from "./desktop/external-site-slot";
+export * from "./desktop/external-site-surface";
+export * from "./desktop/desktop-bridge";
+export * from "./desktop/auth-window-chrome";
+export * from "./desktop/window-chrome-controls";
+export * from "./pwa/client-error-reporter";
+export * from "./pwa/register-sw";
+export * from "./page-loading/list-page-loading";
+export * from "./page-loading/entity-page-loading";
+export * from "./desktop-types";
+
+export * from "./list-toolbar";
+export * from "./data-table";
+export * from "./range-filters";
+export * from "./faceted-filters";
+export * from "./search-input";
+export * from "./global-search";
+export { GlobalSearchProvider, useGlobalSearch as useGlobalSearchImpl } from "./search/global-search-provider";
+export * from "./search/global-search-config";
+export * from "./search/search-history";
+export * from "./pagination";
+export * from "./app-error-boundary";

package/ui/kit.ts

@@ -0,0 +1,30 @@
+/**
+ * Entrée légère client-safe — primitives + helpers desktop (pas de workspace/assistant).
+ * À préférer dans les packages kit UI (@creezio/mails, tasks, cockpit, auth…).
+ */
+export * from "./primitives/button";
+export * from "./primitives/badge";
+export * from "./primitives/input";
+export * from "./primitives/card";
+export * from "./primitives/tabs";
+export * from "./primitives/label";
+export * from "./primitives/separator";
+export * from "./primitives/skeleton";
+export * from "./primitives/dialog";
+export * from "./primitives/sheet";
+export * from "./primitives/select";
+export * from "./primitives/dropdown-menu";
+export * from "./primitives/scroll-area";
+export * from "./primitives/avatar";
+export * from "./primitives/breadcrumb";
+export * from "./primitives/command";
+export * from "./primitives/sonner";
+export * from "./primitives/chart";
+export * from "./primitives/resizable";
+export * from "./primitives/tooltip";
+export * from "./primitives/textarea";
+
+export { isRemoteDesktopClient } from "./lib/desktop-host";
+export { useShellUiBrand } from "./lib/use-shell-ui-brand";
+export type { ShellUiBrand, ShellUiLoginBrand } from "../dist/brand.js";
+export { openAiWorkspaceView, aiWorkspaceAvailable } from "./lib/ai-workspace-client";

package/ui/layout/app-shell.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { usePaneActive, usePaneHref } from "../workspace/keep-alive";
+import { useTabWorkspaceOptional } from "../workspace/tab-workspace-host";
+import type { PageKind, TrailCrumb } from "../workspace/types";
+import { useRegisterPageToolbar } from "./page-toolbar-context";
+
+/**
+ * Cadre de page CRM — API unique.
+ *
+ * `title` → label d'onglet (toujours).
+ * `kind="section"` → bandeau toolbar sous les onglets (recherche + actions).
+ * `kind="entity"` → fil d'Ariane dans le bandeau ; titre via EntityHeader.
+ */
+export function AppShell({
+  children,
+  title,
+  subtitle,
+  kind = "section",
+  trail,
+  fullscreen,
+  actions,
+}: {
+  children: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  kind?: PageKind;
+  /** Fil d'Ariane sticky — requis si kind=entity. */
+  trail?: TrailCrumb[];
+  /** Canvas plein écran — masque le bandeau sous les onglets. */
+  fullscreen?: boolean;
+  /** Boutons / toggles affichés à droite du bandeau sticky. */
+  actions?: ReactNode;
+}) {
+  const workspace = useTabWorkspaceOptional();
+  const paneHref = usePaneHref();
+  const paneActive = usePaneActive();
+  const ready = workspace?.ready ?? false;
+  const setTabMeta = workspace?.setTabMeta;
+  const targetHref = paneHref ?? workspace?.currentHref ?? null;
+  const trailKey = JSON.stringify(trail ?? null);
+
+  useRegisterPageToolbar(paneActive ? targetHref : null, actions);
+
+  useEffect(() => {
+    if (!ready || !setTabMeta || !targetHref) return;
+    setTabMeta(targetHref, {
+      title,
+      subtitle,
+      kind,
+      trail: trailKey ? (JSON.parse(trailKey) as TrailCrumb[]) : undefined,
+      fullscreen,
+    });
+  }, [ready, setTabMeta, targetHref, title, subtitle, kind, trailKey, fullscreen]);
+
+  return <div className="contents">{children}</div>;
+}