@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/primitives/use-dismissable-layer.ts

@@ -0,0 +1,171 @@
+"use client";
+
+import {
+  type FocusEvent as ReactFocusEvent,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { useEnabledPointerEvents } from "./pointer-events-lock.js";
+
+export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
+export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
+export type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent;
+
+export interface DismissableLayerOptions {
+  ref: RefObject<HTMLElement | null>;
+  /** Listen for Escape and outside interaction. */
+  active: boolean;
+  /** Only the topmost layer reacts; see `useLayer`. */
+  isTop: () => boolean;
+  onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+  onPointerDownOutside?: ((event: PointerDownOutsideEvent) => void) | undefined;
+  onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
+  onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+  onDismiss: () => void;
+}
+
+/** Layers from libraries outside this stack that can be open inside a dialog (a third-party combobox listbox). */
+const FOREIGN_LAYER = "[role=listbox][data-state=open], [role=combobox][aria-expanded=true]";
+
+/**
+ * Elements carrying this attribute are branches of every layer: pointer and focus
+ * landing inside one never count as outside (the toaster region).
+ */
+export const LAYER_BRANCH_ATTRIBUTE = "data-ui-layer-branch";
+const LAYER_BRANCH = `[${LAYER_BRANCH_ATTRIBUTE}]`;
+
+/** An in-content widget that wants this Escape for itself (a command input with a query to clear). */
+const ESCAPE_CLAIM = "[data-ui-escape-claim]";
+
+/** Owned by something else that handles its own Escape (a toast). */
+const NOT_OURS = '[aria-live]:not([aria-live="off"]), [data-ui-overlay-ignore]';
+
+function outsideEvent<E extends Event>(name: string, originalEvent: E) {
+  return new CustomEvent(name, { cancelable: true, detail: { originalEvent } });
+}
+
+/**
+ * Escape and outside press/focus dismissal. Every callback may `preventDefault()`
+ * to keep the layer open. Returns capture props to spread on the layer element so
+ * events from React-tree children rendered in a portal count as inside.
+ */
+export function useDismissableLayer(options: DismissableLayerOptions) {
+  const latest = useRef(options);
+  latest.current = options;
+  const insidePointer = useRef(false);
+  const focusedNode = useRef<Element | null>(null);
+  /** Focus is inside this layer's React subtree right now; derived from the live active element, never sticky. */
+  const focusInTree = useCallback(() => {
+    const node = focusedNode.current;
+    return node?.isConnected === true && document.activeElement === node;
+  }, []);
+  const { active } = options;
+  useEnabledPointerEvents(options.ref, active);
+
+  useEffect(() => {
+    if (!active) return;
+    const isInside = (event: Event) => {
+      const node = latest.current.ref.current;
+      const target = event.target as Node | null;
+      if (!node) return true;
+      if (!target) return false;
+      if (node.contains(target)) return true;
+      return target instanceof Element && target.closest(LAYER_BRANCH) !== null;
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const o = latest.current;
+      if (event.key !== "Escape" || event.isComposing || event.keyCode === 229) return;
+      if (event.defaultPrevented || !o.isTop() || belongsToForeignLayer(event)) return;
+      o.onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        event.preventDefault();
+        o.onDismiss();
+      }
+    };
+
+    // Escape pressed inside a React child rendered in a portal (a Radix menu or popover
+    // not yet migrated to this layer stack) belongs to that child, which closes itself.
+    const belongsToForeignLayer = (event: KeyboardEvent) => {
+      const node = latest.current.ref.current;
+      if (event.target instanceof Element && event.target.closest(ESCAPE_CLAIM)) return true;
+      if (!node || node.contains(event.target as Node | null)) return false;
+      const target = event.target;
+      if (
+        !(target instanceof Element) ||
+        target === document.body ||
+        target === document.documentElement
+      ) {
+        return false;
+      }
+      return (
+        target === focusedNode.current || target.closest(`${FOREIGN_LAYER}, ${NOT_OURS}`) !== null
+      );
+    };
+
+    const dispatchOutside = (
+      name: string,
+      original: PointerEvent | FocusEvent,
+      specific: ((event: never) => void) | undefined,
+    ) => {
+      const o = latest.current;
+      const event = outsideEvent(name, original);
+      specific?.(event as never);
+      o.onInteractOutside?.(event as InteractOutsideEvent);
+      if (!event.defaultPrevented) o.onDismiss();
+    };
+
+    let removeTouchClick: (() => void) | undefined;
+    const onPointerDown = (event: PointerEvent) => {
+      removeTouchClick?.();
+      const inside = insidePointer.current || isInside(event);
+      insidePointer.current = false;
+      if (inside || !latest.current.isTop()) return;
+      const fire = () =>
+        dispatchOutside("ui.pointerDownOutside", event, latest.current.onPointerDownOutside);
+      if (event.pointerType === "touch") {
+        document.addEventListener("click", fire, { once: true });
+        removeTouchClick = () => document.removeEventListener("click", fire);
+      } else {
+        fire();
+      }
+    };
+
+    const onFocusIn = (event: FocusEvent) => {
+      const inside = focusInTree() || isInside(event);
+      if (inside || !latest.current.isTop()) return;
+      dispatchOutside("ui.focusOutside", event, latest.current.onFocusOutside);
+    };
+
+    document.addEventListener("keydown", onKeyDown, true);
+    // Registered after the opening gesture has finished bubbling.
+    const timer = setTimeout(() => {
+      document.addEventListener("pointerdown", onPointerDown);
+      document.addEventListener("focusin", onFocusIn);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      removeTouchClick?.();
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("focusin", onFocusIn);
+    };
+  }, [active, focusInTree]);
+
+  return {
+    /** Whether focus is inside this layer's React subtree right now, including portaled children. */
+    isFocusInTree: focusInTree,
+    onPointerDownCapture: (_event: ReactPointerEvent) => {
+      insidePointer.current = true;
+    },
+    onFocusCapture: (event: ReactFocusEvent) => {
+      focusedNode.current = event.target as Element;
+    },
+    onBlurCapture: (_event: ReactFocusEvent) => {
+      focusedNode.current = null;
+    },
+  };
+}

package/src/primitives/use-focus-scope.ts

@@ -0,0 +1,127 @@
+"use client";
+
+import { type RefObject, useEffect, useRef } from "react";
+import { getTabbables, resolveTabFromInside, resolveTabWrap } from "./focusable.js";
+
+export interface FocusScopeOptions {
+  ref: RefObject<HTMLElement | null>;
+  /** Scope lifetime: focus moves in when it starts and returns when it ends. */
+  active: boolean;
+  /** Keep Tab and Shift+Tab inside while true and this scope is on top. */
+  trapped: boolean;
+  isTop?: (() => boolean) | undefined;
+  /**
+   * While trapped, focus that lands outside the container is pulled back unless this
+   * returns true for the new target. Live regions and `[data-ui-overlay-ignore]` are always allowed.
+   */
+  allowFocus?: ((target: Element) => boolean) | undefined;
+  onMountAutoFocus?: ((event: Event) => void) | undefined;
+  onUnmountAutoFocus?: ((event: Event) => void) | undefined;
+}
+
+const LIVE_OR_IGNORED = '[aria-live]:not([aria-live="off"]), [data-ui-overlay-ignore]';
+
+function focusWithoutScroll(element: HTMLElement | null | undefined) {
+  element?.focus({ preventScroll: true });
+}
+
+/**
+ * Moves focus into the container on activation (first tabbable that is not a
+ * link, else the container), traps Tab inside, and returns focus when the scope
+ * ends. Both auto-focus callbacks receive a cancelable event.
+ */
+export function useFocusScope(options: FocusScopeOptions) {
+  const latest = useRef(options);
+  latest.current = options;
+  const returnTarget = useRef<HTMLElement | null>(null);
+  const activation = useRef(0);
+  const { active, trapped } = options;
+
+  useEffect(() => {
+    if (!active) return;
+    const container = latest.current.ref.current;
+    if (!container) return;
+    const mine = ++activation.current;
+    const previous = document.activeElement as HTMLElement | null;
+    if (previous && !container.contains(previous)) returnTarget.current = previous;
+
+    if (!container.contains(previous)) {
+      const event = new Event("ui.focusScope.mount", { cancelable: true });
+      latest.current.onMountAutoFocus?.(event);
+      if (!event.defaultPrevented) {
+        const candidates = getTabbables(container).filter((el) => el.tagName !== "A");
+        focusWithoutScroll(candidates[0] ?? container);
+      }
+    }
+
+    return () => {
+      const target = returnTarget.current;
+      setTimeout(() => {
+        if (activation.current !== mine) return;
+        const event = new Event("ui.focusScope.unmount", { cancelable: true });
+        latest.current.onUnmountAutoFocus?.(event);
+        if (!event.defaultPrevented) {
+          focusWithoutScroll(target && document.contains(target) ? target : document.body);
+        }
+      }, 0);
+    };
+  }, [active]);
+
+  useEffect(() => {
+    const container = latest.current.ref.current;
+    if (!active || !trapped || !container) return;
+    const isActiveScope = () => !latest.current.isTop || latest.current.isTop();
+    let lastFocused: HTMLElement | null = container.contains(document.activeElement)
+      ? (document.activeElement as HTMLElement)
+      : null;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (!isActiveScope()) return;
+      const items = getTabbables(container);
+      if (items.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const active = document.activeElement as HTMLElement | null;
+      const target =
+        active && active !== container && container.contains(active) && !items.includes(active)
+          ? resolveTabFromInside(items, active, event.shiftKey)
+          : resolveTabWrap(items, active, event.shiftKey);
+      if (target) {
+        event.preventDefault();
+        focusWithoutScroll(target);
+      }
+    };
+
+    const onFocusIn = (event: FocusEvent) => {
+      const target = event.target as Element | null;
+      if (!target || !(target instanceof Element)) return;
+      if (container.contains(target)) {
+        lastFocused = target as HTMLElement;
+        return;
+      }
+      if (!isActiveScope() || target.closest(LIVE_OR_IGNORED)) return;
+      if (latest.current.allowFocus?.(target)) return;
+      const fallback = getTabbables(container)[0] ?? container;
+      focusWithoutScroll(lastFocused && container.contains(lastFocused) ? lastFocused : fallback);
+    };
+
+    // The focused node was removed (a menu closed without returning focus): bring focus back to the container.
+    const observer = new MutationObserver((mutations) => {
+      if (document.activeElement !== document.body || !isActiveScope()) return;
+      if (mutations.some((mutation) => mutation.removedNodes.length > 0)) {
+        focusWithoutScroll(container);
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    container.addEventListener("keydown", onKeyDown);
+    document.addEventListener("focusin", onFocusIn);
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("focusin", onFocusIn);
+    };
+  }, [active, trapped]);
+}

package/src/primitives/use-layer.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { overlayLayers } from "./layer-stack.js";
+
+/** Registers an overlay in the global layer stack while `active`; `isTop()` is stable. */
+export function useLayer(active: boolean): () => boolean {
+  const layer = useRef({});
+  useEffect(() => {
+    if (!active) return;
+    return overlayLayers.push(layer.current);
+  }, [active]);
+  return useCallback(() => overlayLayers.isTop(layer.current), []);
+}

package/src/primitives/use-presence.ts

@@ -0,0 +1,111 @@
+"use client";
+
+import { type RefObject, useLayoutEffect, useState } from "react";
+
+const SAFETY_MS = 50;
+
+function toMs(value: string): number[] {
+  return value.split(",").map((part) => {
+    const text = part.trim();
+    const number = Number.parseFloat(text);
+    if (Number.isNaN(number)) return 0;
+    return text.endsWith("ms") ? number : number * 1000;
+  });
+}
+
+/** Properties whose transition can be an exit effect; colour transitions (hover styles) are not. */
+const EXIT_PROPERTIES = new Set([
+  "all",
+  "opacity",
+  "transform",
+  "translate",
+  "scale",
+  "rotate",
+  "filter",
+  "backdrop-filter",
+  "clip-path",
+  "visibility",
+  "width",
+  "height",
+  "max-width",
+  "max-height",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "inset",
+]);
+
+const cycle = (list: number[], index: number) => list[index % list.length] ?? 0;
+
+/**
+ * Longest exit effect on the node, in ms: its own animation (when `animation-name`
+ * is set) or a transition of an exit-relevant property. Unrelated transitions such
+ * as `transition-colors` are ignored so unmounting never waits for the safety timeout.
+ */
+export function exitDuration(node: Element): number {
+  const style = getComputedStyle(node);
+  const total = (durations: string, delays: string, index = 0): number =>
+    cycle(toMs(durations), index) + cycle(toMs(delays), index);
+  const animated =
+    style.animationName === "none"
+      ? 0
+      : Math.max(
+          0,
+          ...toMs(style.animationDuration).map((_, i) =>
+            total(style.animationDuration, style.animationDelay, i),
+          ),
+        );
+  const properties = style.transitionProperty.split(",").map((part) => part.trim());
+  const transitioned = Math.max(
+    0,
+    ...properties.map((property, i) =>
+      EXIT_PROPERTIES.has(property) ? total(style.transitionDuration, style.transitionDelay, i) : 0,
+    ),
+  );
+  return Math.max(animated, transitioned);
+}
+
+function prefersReducedMotion(): boolean {
+  return typeof window.matchMedia === "function"
+    ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    : false;
+}
+
+/**
+ * Keeps a node mounted while its exit animation or transition runs. Returns
+ * whether to render. The node must already carry its closed `data-state` when
+ * `present` turns false; it unmounts on `animationend`/`transitionend`, after a
+ * safety timeout, or immediately without motion or under reduced motion.
+ */
+export function usePresence(present: boolean, ref: RefObject<HTMLElement | null>): boolean {
+  const [mounted, setMounted] = useState(present);
+  if (present && !mounted) setMounted(true);
+
+  useLayoutEffect(() => {
+    if (present || !mounted) return;
+    const node = ref.current;
+    const duration = node && !prefersReducedMotion() ? exitDuration(node) : 0;
+    if (!node || duration <= 0) {
+      setMounted(false);
+      return;
+    }
+    const finish = () => setMounted(false);
+    const onEnd = (event: Event) => {
+      if (event.target !== node) return;
+      const property = (event as TransitionEvent).propertyName;
+      if (event.type === "transitionend" && !EXIT_PROPERTIES.has(property)) return;
+      finish();
+    };
+    node.addEventListener("animationend", onEnd);
+    node.addEventListener("transitionend", onEnd);
+    const timer = setTimeout(finish, duration + SAFETY_MS);
+    return () => {
+      node.removeEventListener("animationend", onEnd);
+      node.removeEventListener("transitionend", onEnd);
+      clearTimeout(timer);
+    };
+  }, [present, mounted, ref]);
+
+  return present || mounted;
+}

package/src/rich-text/index.ts

@@ -1,5 +1,6 @@
 export {
   RichTextEditor,
+  type RichTextEditorPart,
   type RichTextEditorProps,
   RichTextView,
   type RichTextViewProps,

package/src/rich-text/rich-text-editor.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Bold, Heading2, Italic, Link2, List, ListOrdered, Underline, Unlink } from "lucide-react";
 import {
   type ClipboardEvent,
   type KeyboardEvent,
@@ -12,6 +11,17 @@ import {
   useRef,
   useState,
 } from "react";
+import {
+  Bold,
+  Heading2,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Underline,
+  Unlink,
+} from "../icons/index.js";
+import type { ClassNames } from "../utils/class-names.js";
 import { cn } from "../utils/cn.js";
 import { htmlToText, isSafeUrl, sanitizeHtml } from "./sanitize.js";
 
@@ -21,6 +31,18 @@ export const richTextContentClass =
 
 type Command = "bold" | "italic" | "underline" | "ul" | "ol" | "h2";
 
+export type RichTextEditorPart =
+  | "root"
+  | "toolbar"
+  | "tool"
+  | "linkForm"
+  | "linkInput"
+  | "linkApply"
+  | "linkRemove"
+  | "body"
+  | "placeholder"
+  | "content";
+
 export interface RichTextEditorProps {
   /** Controlled HTML. It is sanitized before it reaches the editor. */
   value?: string;
@@ -34,6 +56,8 @@ export interface RichTextEditorProps {
   "aria-label"?: string;
   "aria-labelledby"?: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<RichTextEditorPart>;
 }
 
 const COMMANDS: Record<
@@ -114,6 +138,7 @@ export function RichTextEditor({
   disabled,
   minHeightRem = 8,
   className,
+  classNames,
   ...aria
 }: RichTextEditorProps) {
   const baseId = useId();
@@ -294,6 +319,7 @@ export function RichTextEditor({
       className={cn(
         "@container/rte flex w-full min-w-0 flex-col overflow-hidden rounded-input border-control bg-surface-control focus-within:outline-2 focus-within:outline-accent-ink focus-within:-outline-offset-1",
         disabled && "opacity-60",
+        classNames?.root,
         className,
       )}
     >
@@ -303,7 +329,10 @@ export function RichTextEditor({
         aria-label="Formato"
         aria-controls={`${baseId}-editor`}
         onKeyDown={onToolbarKeyDown}
-        className="flex flex-wrap items-center gap-0.5 border-b-divider p-1"
+        className={cn(
+          "flex flex-wrap items-center gap-0.5 border-b-divider p-1",
+          classNames?.toolbar,
+        )}
       >
         {tools.map((tool, index) => (
           <button
@@ -319,14 +348,20 @@ export function RichTextEditor({
             // Keep the editor selection while pressing a toolbar button.
             onMouseDown={(event) => event.preventDefault()}
             onClick={tool.run}
-            className="pressable grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed aria-pressed:bg-accent-soft aria-pressed:text-accent-ink [&_svg]:size-4"
+            className={cn(
+              "pressable grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed aria-pressed:bg-accent-soft aria-pressed:text-accent-ink [&_svg]:size-4",
+              classNames?.tool,
+            )}
           >
             {tool.icon}
           </button>
         ))}
         {linkOpen ? (
           <form
-            className="flex min-w-0 basis-full items-center gap-1 pt-1 @md/rte:basis-auto @md/rte:flex-1 @md/rte:pt-0"
+            className={cn(
+              "flex min-w-0 basis-full items-center gap-1 pt-1 @md/rte:basis-auto @md/rte:flex-1 @md/rte:pt-0",
+              classNames?.linkForm,
+            )}
             onSubmit={(event) => {
               event.preventDefault();
               applyLink();
@@ -348,11 +383,17 @@ export function RichTextEditor({
                   closeLink();
                 }
               }}
-              className="h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 text-control text-ink focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1 aria-[invalid=true]:border-danger"
+              className={cn(
+                "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 text-control text-ink focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1 aria-[invalid=true]:border-danger",
+                classNames?.linkInput,
+              )}
             />
             <button
               type="submit"
-              className="h-control-sm rounded-button bg-accent px-2.5 font-semibold text-control text-on-accent focus-visible:focus-ring"
+              className={cn(
+                "h-control-sm rounded-button bg-accent px-2.5 font-semibold text-control text-on-accent focus-visible:focus-ring",
+                classNames?.linkApply,
+              )}
             >
               Aplicar
             </button>
@@ -361,18 +402,24 @@ export function RichTextEditor({
               title="Quitar enlace"
               aria-label="Quitar enlace"
               onClick={removeLink}
-              className="grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken focus-visible:focus-ring [&_svg]:size-4"
+              className={cn(
+                "grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken focus-visible:focus-ring [&_svg]:size-4",
+                classNames?.linkRemove,
+              )}
             >
               <Unlink />
             </button>
           </form>
         ) : null}
       </div>
-      <div className="relative">
+      <div className={cn("relative", classNames?.body)}>
         {empty ? (
           <span
             aria-hidden="true"
-            className="pointer-events-none absolute top-0 left-0 px-3 py-2 text-body text-ink-3"
+            className={cn(
+              "pointer-events-none absolute top-0 left-0 px-3 py-2 text-body text-ink-3",
+              classNames?.placeholder,
+            )}
           >
             {placeholder}
           </span>
@@ -395,7 +442,7 @@ export function RichTextEditor({
           onKeyDown={onEditorKeyDown}
           onBlur={emit}
           style={{ minHeight: `${minHeightRem}rem` }}
-          className={cn("w-full px-3 py-2 outline-none", richTextContentClass)}
+          className={cn("w-full px-3 py-2 outline-none", richTextContentClass, classNames?.content)}
         />
       </div>
     </div>

package/src/shell/app-shell/app-shell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  type ComponentPropsWithRef,
   createContext,
   type ReactNode,
   type RefObject,
@@ -11,6 +12,7 @@ import {
   useState,
 } from "react";
 import { cn } from "../../utils/cn.js";
+import { useComposedRefs } from "../../utils/compose.js";
 
 /** Container width (px) below which the shell is compact: the sidebar becomes a drawer. */
 export const APP_SHELL_BREAKPOINT = 900;
@@ -53,9 +55,8 @@ export function useAppShell(): AppShellState | null {
   return useContext(AppShellContext);
 }
 
-export interface AppShellProps {
+export interface AppShellProps extends ComponentPropsWithRef<"div"> {
   children: ReactNode;
-  className?: string;
 }
 
 /**
@@ -63,12 +64,13 @@ export interface AppShellProps {
  * into a drawer and the topbar shows its menu button when the SHELL is under 900 px wide,
  * whatever the viewport is, so the same shell works in a full page, a preview or a story.
  */
-export function AppShell({ children, className }: AppShellProps) {
+export function AppShell({ children, className, ref: forwardedRef, ...props }: AppShellProps) {
   const ref = useRef<HTMLDivElement>(null);
   const compact = useCompactContainer(ref);
+  const composedRef = useComposedRefs(ref, forwardedRef);
   return (
     <AppShellContext.Provider value={{ compact }}>
-      <div ref={ref} className={cn("@container/app flex min-w-0", className)}>
+      <div ref={composedRef} {...props} className={cn("@container/app flex min-w-0", className)}>
         {children}
       </div>
     </AppShellContext.Provider>

package/src/shell/sidebar/index.ts

@@ -3,6 +3,7 @@ export {
   type SidebarGroup,
   type SidebarItem,
   type SidebarLinkProps,
+  type SidebarPart,
   type SidebarProps,
   type SidebarRenderLink,
 } from "./sidebar.js";