@softize/opus 17.1.0 → 18.0.0

package/src/ui/components/patterns/list.tsx

@@ -38,7 +38,7 @@ import {
   Calendar as CalendarIcon,
   Eraser,
   Filter,
-  RefreshCw,
+  RotateCw,
   Settings2,
   Table2,
   X,
@@ -877,27 +877,27 @@ function AdvancedFiltersDialog({
           ))}
         </DialogBody>
         <DialogFooter>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const cleared = { ...draft };
-              for (const [name] of specs) delete cleared[name];
-              onApply(cleared);
-              onOpenChange(false);
-            }}
-          >
-            Limpar
-          </Button>
-          <Button
-            size="sm"
-            onClick={() => {
-              onApply(draft);
-              onOpenChange(false);
-            }}
-          >
-            Aplicar
-          </Button>
+          <ButtonGroup mode="spaced" distribution="equal">
+            <Button
+              variant="outline"
+              onClick={() => {
+                const cleared = { ...draft };
+                for (const [name] of specs) delete cleared[name];
+                onApply(cleared);
+                onOpenChange(false);
+              }}
+            >
+              Limpar
+            </Button>
+            <Button
+              onClick={() => {
+                onApply(draft);
+                onOpenChange(false);
+              }}
+            >
+              Aplicar
+            </Button>
+          </ButtonGroup>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -1083,7 +1083,7 @@ export function ActionFilterBar({
                         onClick={() => void onRefresh()}
                         disabled={refreshing}
                       >
-                        <RefreshCw
+                        <RotateCw
                           className={cn(
                             "h-3.5 w-3.5",
                             refreshing && "animate-spin",
@@ -1845,27 +1845,26 @@ export function ActionList<TInput, TItem>({
                 </DialogBody>
               )}
               <DialogFooter>
-                <DialogClose initialFocus asChild>
-                  <Button variant="ghost" size="sm">
-                    Cancelar
-                  </Button>
-                </DialogClose>
-                <DialogClose asChild>
-                  <Button
-                    size="sm"
-                    context={
-                      confirming.destructive === true ? "danger" : "primary"
-                    }
-                    variant="solid"
-                    onClick={() => {
-                      const a = confirming;
-                      setConfirming(null);
-                      void runBatch(a);
-                    }}
-                  >
-                    {confirming.label}
-                  </Button>
-                </DialogClose>
+                <ButtonGroup mode="spaced" distribution="equal">
+                  <DialogClose initialFocus asChild>
+                    <Button variant="outline">Cancelar</Button>
+                  </DialogClose>
+                  <DialogClose asChild>
+                    <Button
+                      context={
+                        confirming.destructive === true ? "danger" : "primary"
+                      }
+                      variant="solid"
+                      onClick={() => {
+                        const a = confirming;
+                        setConfirming(null);
+                        void runBatch(a);
+                      }}
+                    >
+                      {confirming.label}
+                    </Button>
+                  </DialogClose>
+                </ButtonGroup>
               </DialogFooter>
             </DialogContent>
           </Dialog>

package/src/ui/components/patterns/page-heading-context.tsx

@@ -0,0 +1,34 @@
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+const PageHeadingPresenceContext = createContext<
+  (() => () => void) | null
+>(null);
+
+export function PageHeadingPresenceProvider({
+  register,
+  children,
+}: {
+  register: () => () => void;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <PageHeadingPresenceContext.Provider value={register}>
+      {children}
+    </PageHeadingPresenceContext.Provider>
+  );
+}
+
+/** Integração interna para headings que podem nascer dentro de boundaries intermediários. */
+export function usePageHeadingPresence(active = true): void {
+  const register = useContext(PageHeadingPresenceContext);
+  useLayoutEffect(() => {
+    if (!active || register === null) return;
+    return register();
+  }, [active, register]);
+}

package/src/ui/components/patterns/page-state.tsx

@@ -14,6 +14,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../../lib/cn.ts";
+import { usePageHeadingPresence } from "./page-heading-context.tsx";
 import {
   DEFAULT_RETRY_LABEL,
   EmptySurface,
@@ -77,6 +78,7 @@ export function PageState({
   className,
 }: PageStateProps): React.ReactElement {
   const registerPresence = useContext(PageStatePresenceContext);
+  usePageHeadingPresence(status !== "ready");
   useLayoutEffect(() => {
     if (status === "ready" || registerPresence === null) return;
     return registerPresence();

package/src/ui/components/patterns/page.tsx

@@ -11,6 +11,7 @@ import {
   isValidElement,
   useCallback,
   useContext,
+  useLayoutEffect,
   useRef,
   useState,
   type HTMLAttributes,
@@ -22,8 +23,13 @@ import { createPortal } from "react-dom";
 import { ArrowLeft } from "lucide-react";
 import { cn } from "../../lib/cn.ts";
 import { Button } from "../primitives/button.tsx";
+import { Content } from "./content-header.tsx";
+import {
+  PageHeadingPresenceProvider,
+  usePageHeadingPresence,
+} from "./page-heading-context.tsx";
 import { SurfaceHeader, surfaceHeaderClasses } from "./surface-header.tsx";
-import { PageStatePresenceProvider } from "./page-state.tsx";
+import { PageState, PageStatePresenceProvider } from "./page-state.tsx";
 
 interface PageContextValue {}
 
@@ -34,11 +40,10 @@ const PageHeaderContext = createContext<PageHeadingRegion | null>(null);
 const PageIntegralStateContext = createContext(false);
 const PageActionsTargetContext = createContext<HTMLElement | null>(null);
 const PageNavigationTargetContext = createContext<HTMLElement | null>(null);
-const PageTitleTargetContext = createContext<HTMLElement | null>(null);
 const PageShellContext = createContext(false);
 const pageBarClassName =
-  "flex h-12 shrink-0 items-center border-b border-border bg-background text-foreground";
-const pageBarContentClassName = "w-full py-2";
+  "flex h-[3.75rem] shrink-0 items-center border-b border-border bg-background text-foreground";
+const pageBarContentClassName = "w-full p-3";
 
 /** Uso interno de patterns que precisam adaptar a Page ao shell sem duplicar sua anatomia. */
 export function useInsidePageShell(): boolean {
@@ -124,7 +129,6 @@ export function PageShell({
   );
   const [navigationTarget, setNavigationTarget] =
     useState<HTMLDivElement | null>(null);
-  const [titleTarget, setTitleTarget] = useState<HTMLDivElement | null>(null);
 
   return (
     <div
@@ -152,20 +156,18 @@ export function PageShell({
         <PageShellNavigationSlot targetRef={setNavigationTarget}>
           {navigation}
         </PageShellNavigationSlot>
-        <PageShellTitleSlot targetRef={setTitleTarget} />
+        <PageShellTitleSlot />
         <PageShellActionsSlot targetRef={setActionsTarget}>
           {actions}
         </PageShellActionsSlot>
       </SurfaceHeader>
       <PageShellContext.Provider value>
         <PageNavigationTargetContext.Provider value={navigationTarget}>
-          <PageTitleTargetContext.Provider value={titleTarget}>
-            <PageActionsTarget target={actionsTarget}>
-              <div data-slot="page-shell-content" className="min-h-0 flex-1">
-                {children}
-              </div>
-            </PageActionsTarget>
-          </PageTitleTargetContext.Provider>
+          <PageActionsTarget target={actionsTarget}>
+            <div data-slot="page-shell-content" className="min-h-0 flex-1">
+              {children}
+            </div>
+          </PageActionsTarget>
         </PageNavigationTargetContext.Provider>
       </PageShellContext.Provider>
     </div>
@@ -217,6 +219,59 @@ interface PageComposedProps extends PageBaseProps {
 
 export type PageProps = PageShorthandProps | PageComposedProps;
 
+function countDirectChildrenOfType(
+  node: ReactElement,
+  type: typeof PageTitle,
+): number {
+  return Children.toArray(
+    (node.props as { children?: ReactNode }).children,
+  ).filter((child) => isValidElement(child) && child.type === type).length;
+}
+
+function countPageBodyHeadings(node: ReactNode): {
+  content: number;
+  state: number;
+} {
+  return Children.toArray(node).reduce(
+    (total, child) => {
+      if (!isValidElement(child)) return total;
+      const props = child.props as {
+        children?: ReactNode;
+        level?: number;
+        status?: string;
+      };
+      if (child.type === PageState && props.status !== "ready") {
+        return {
+          content: total.content,
+          state: total.state + 1,
+        };
+      }
+      const nested = countPageBodyHeadings(props.children);
+      return {
+        content:
+          total.content +
+          (child.type === Content && props.level === 1 ? 1 : 0) +
+          nested.content,
+        state:
+          total.state + nested.state,
+      };
+    },
+    { content: 0, state: 0 },
+  );
+}
+
+function hasOpaquePageBodyContent(node: ReactNode): boolean {
+  return Children.toArray(node).some((child) => {
+    if (!isValidElement(child)) return false;
+    if (typeof child.type !== "string") {
+      return child.type !== Content && child.type !== PageState;
+    }
+    return hasOpaquePageBodyContent(
+      (child.props as { children?: ReactNode }).children,
+    );
+  });
+}
+
 export function Page({
   title,
   actions,
@@ -240,7 +295,9 @@ export function Page({
     (node) => isValidElement(node) && node.type === PageIntro,
   );
   const activeStateCount = useRef(0);
+  const headingCount = useRef(0);
   const [integralState, setIntegralState] = useState(false);
+  const [, setHeadingRevision] = useState(0);
   const registerIntegralState = useCallback(() => {
     activeStateCount.current += 1;
     setIntegralState(true);
@@ -252,56 +309,105 @@ export function Page({
       setIntegralState(activeStateCount.current > 0);
     };
   }, []);
+  const registerHeading = useCallback(() => {
+    headingCount.current += 1;
+    setHeadingRevision((revision) => revision + 1);
+    let registered = true;
+    return () => {
+      if (!registered) return;
+      registered = false;
+      headingCount.current = Math.max(0, headingCount.current - 1);
+      setHeadingRevision((revision) => revision + 1);
+    };
+  }, []);
   if (
     shorthand &&
-    nodes.some((node) => isValidElement(node) && node.type === PageHeader)
+    nodes.some(
+      (node) =>
+        isValidElement(node) &&
+        [PageHeader, PageIntro, PageBody, PageFooter].includes(
+          node.type as typeof PageHeader,
+        ),
+    )
   ) {
     throw new Error(
-      "Page não permite misturar propriedades de shorthand com PageHeader explícito.",
+      "Page não permite misturar propriedades de shorthand com composição explícita.",
     );
   }
   if (!shorthand) {
-    const validIntroComposition =
-      !insideShell &&
-      intros.length === 1 &&
-      headers.length === 0 &&
-      bodies.length === 1 &&
-      footers.length <= 1 &&
-      intros.length + bodies.length + footers.length === nodes.length;
-    const validStandaloneComposition =
-      !insideShell &&
-      headers.length === 1 &&
-      intros.length === 0 &&
-      bodies.length === 1 &&
-      footers.length <= 1 &&
-      headers.length + bodies.length + footers.length === nodes.length;
-    const validShellComposition =
-      insideShell &&
-      headers.length === 1 &&
-      bodies.length === 1 &&
+    const validComposition =
+      headers.length <= 1 &&
       intros.length <= 1 &&
+      bodies.length === 1 &&
       footers.length <= 1 &&
       headers.length + intros.length + bodies.length + footers.length ===
         nodes.length;
-    if (
-      !validIntroComposition &&
-      !validStandaloneComposition &&
-      !validShellComposition
-    ) {
+    if (!validComposition) {
       throw new Error(
-        insideShell
-          ? "Page explícito dentro de PageShell exige um PageHeader, um PageBody e aceita no máximo um PageIntro e um PageFooter como filhos diretos."
-          : "Page explícito exige um PageHeader ou PageIntro, um PageBody e no máximo um PageFooter como filhos diretos.",
+        "Page explícito exige um PageBody e aceita no máximo um PageHeader, um PageIntro e um PageFooter como filhos diretos.",
+      );
+    }
+    const bodyHeadingSources = bodies.reduce<{
+      content: number;
+      state: number;
+    }>(
+      (total, body) => {
+        const count = countPageBodyHeadings(
+          (body as ReactElement<{ children?: ReactNode }>).props.children,
+        );
+        return {
+          content: total.content + count.content,
+          state: total.state + count.state,
+        };
+      },
+      { content: 0, state: 0 },
+    );
+    const structuralHeadingSources =
+      headers.reduce<number>(
+        (total, header) =>
+          total + countDirectChildrenOfType(header as ReactElement, PageTitle),
+        0,
+      ) +
+      intros.reduce<number>(
+        (total, intro) =>
+          total + countDirectChildrenOfType(intro as ReactElement, PageTitle),
+        0,
+      ) + bodyHeadingSources.content;
+    const headingSources =
+      bodyHeadingSources.state > 0
+        ? bodyHeadingSources.state + bodyHeadingSources.content
+        : structuralHeadingSources;
+    const hasOpaqueBodyContent = bodies.some((body) =>
+      hasOpaquePageBodyContent(
+        (body as ReactElement<{ children?: ReactNode }>).props.children,
+      ),
+    );
+    if (headingSources > 1 || (headingSources === 0 && !hasOpaqueBodyContent)) {
+      throw new Error(
+        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Content level={1} ou PageState ativo dentro de PageBody.",
       );
     }
   }
+  useLayoutEffect(() => {
+    const hasActiveIntegralState = activeStateCount.current > 0;
+    if (integralState !== hasActiveIntegralState) return;
+    if (headingCount.current !== 1) {
+      throw new Error(
+        "Page explícito exige exatamente um heading principal em PageHeader, PageIntro, Content level={1} ou PageState ativo dentro de PageBody.",
+      );
+    }
+  });
   const content =
     shorthand && insideShell ? (
       <>
-        <PageHeader>
+        {actions !== undefined && (
+          <PageHeader>
+            <PageActions>{actions}</PageActions>
+          </PageHeader>
+        )}
+        <PageIntro>
           <PageTitle>{title}</PageTitle>
-          {actions !== undefined && <PageActions>{actions}</PageActions>}
-        </PageHeader>
+        </PageIntro>
         <PageBody>{children}</PageBody>
       </>
     ) : shorthand ? (
@@ -320,33 +426,35 @@ export function Page({
     <PageContext.Provider value={{}}>
       <PageIntegralStateContext.Provider value={integralState}>
         <PageStatePresenceProvider register={registerIntegralState}>
-          <main
-            data-slot="page"
-            className={cn(
-              "min-w-0 flex-1",
-              insideShell && "min-h-full",
-              integralState && "flex min-h-full flex-col",
-            )}
-            {...props}
-          >
-            <div
+          <PageHeadingPresenceProvider register={registerHeading}>
+            <main
+              data-slot="page"
               className={cn(
-                "mx-auto max-w-7xl space-y-6 px-8 py-8",
-                integralState &&
-                  "flex min-h-full w-full flex-1 flex-col space-y-0",
-                className,
+                "min-w-0 flex-1",
+                insideShell && "min-h-full",
+                integralState && "flex min-h-full flex-col",
               )}
+              {...props}
             >
-              {content}
-            </div>
-          </main>
+              <div
+                className={cn(
+                  "mx-auto max-w-7xl space-y-6 px-8 py-8",
+                  integralState &&
+                    "flex min-h-full w-full flex-1 flex-col space-y-0",
+                  className,
+                )}
+              >
+                {content}
+              </div>
+            </main>
+          </PageHeadingPresenceProvider>
         </PageStatePresenceProvider>
       </PageIntegralStateContext.Provider>
     </PageContext.Provider>
   );
 }
 
-/** Introdução opcional do conteúdo, separada da navegação persistente do shell. */
+/** Título estrutural no conteúdo de PageShell ou introdução opcional de uma Page isolada. */
 export function PageIntro({
   className,
   children,
@@ -358,12 +466,16 @@ export function PageIntro({
   requireParent(page !== null, "PageIntro", "Page");
   if (integralState) {
     if (!insideShell) return <></>;
-    const actions = Children.toArray(children).filter(
-      (node) => isValidElement(node) && node.type === PageActions,
+    const persistentSlots = Children.toArray(children).filter(
+      (node) =>
+        isValidElement(node) &&
+        [PageBack, PageNavigation, PageActions].includes(
+          node.type as typeof PageBack,
+        ),
     );
     return (
       <PageHeaderContext.Provider value="intro">
-        {actions}
+        {persistentSlots}
       </PageHeaderContext.Provider>
     );
   }
@@ -374,9 +486,11 @@ export function PageIntro({
         name="PageIntro"
         slot="page-intro"
         slots={{
+          leading: [PageBack, PageNavigation],
           title: PageTitle,
           actions: PageActions,
         }}
+        leadingPlacement="inline"
         className={className}
         {...props}
       >
@@ -386,7 +500,10 @@ export function PageIntro({
   );
 }
 
-/** A anatomia é a de `SurfaceHeader`, a mesma de `ContentHeader`; só os slots mudam de nome. */
+/**
+ * Chrome da Page: navegação e ações persistentes. Fora de PageShell também pode
+ * carregar o título; dentro dele, os slots são projetados na barra do shell.
+ */
 export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {}
 
 export function PageHeader({
@@ -417,7 +534,11 @@ export function PageHeader({
           actions: PageActions,
         }}
         leadingPlacement="inline"
-        className={className}
+        titleRequired={false}
+        className={cn(
+          "flex h-[3.75rem] items-center border-b p-3 [&>*]:w-full",
+          className,
+        )}
         {...props}
       >
         {children}
@@ -431,10 +552,9 @@ export function PageTitle({
   ...props
 }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
   const variant = useContext(PageHeaderContext);
-  const insideShell = useContext(PageShellContext);
-  const target = useContext(PageTitleTargetContext);
   requireParent(variant !== null, "PageTitle", "PageHeader ou PageIntro");
-  const title = (
+  usePageHeadingPresence();
+  return (
     <h1
       data-slot="page-title"
       className={cn(
@@ -446,10 +566,6 @@ export function PageTitle({
       {...props}
     />
   );
-  if (insideShell && variant === "header") {
-    return target === null ? <></> : createPortal(title, target);
-  }
-  return title;
 }
 
 export function PageActions({
@@ -495,11 +611,7 @@ export function PageNavigation({
   const variant = useContext(PageHeaderContext);
   const insideShell = useContext(PageShellContext);
   const target = useContext(PageNavigationTargetContext);
-  requireParent(
-    variant !== null,
-    "PageNavigation",
-    "PageHeader",
-  );
+  requireParent(variant !== null, "PageNavigation", "PageHeader ou PageIntro");
   const navigation = (
     <div
       data-slot="page-navigation-content"
@@ -507,7 +619,7 @@ export function PageNavigation({
       {...props}
     />
   );
-  if (insideShell && variant === "header") {
+  if (insideShell) {
     return target === null ? <></> : createPortal(navigation, target);
   }
   return navigation;
@@ -522,7 +634,7 @@ export function PageBack({
   const variant = useContext(PageHeaderContext);
   const insideShell = useContext(PageShellContext);
   const target = useContext(PageNavigationTargetContext);
-  requireParent(variant !== null, "PageBack", "PageHeader");
+  requireParent(variant !== null, "PageBack", "PageHeader ou PageIntro");
   const destination =
     typeof children === "string" ? children : "a página anterior";
   const accessibleLabel = ariaLabel ?? `Voltar para ${destination}`;
@@ -540,7 +652,7 @@ export function PageBack({
       </a>
     </Button>
   );
-  if (insideShell && variant === "header") {
+  if (insideShell) {
     return target === null ? <></> : createPortal(back, target);
   }
   return back;
@@ -572,7 +684,7 @@ export function PageFooter({
     <div
       data-slot="page-footer"
       className={cn(
-        "mt-auto flex shrink-0 items-center justify-end border-t bg-muted/30 px-8 py-4",
+        "mt-auto flex h-[3.75rem] shrink-0 items-center justify-end border-t bg-muted/30 p-3",
         className,
       )}
       {...props}