@womp/kookie-ui 0.7.0 → 0.8.1

package/src/components/shell.context.tsx

@@ -1,13 +1,61 @@
+'use client';
+
+/**
+ * Since 0.8.0 the Shell has two contexts: the pane registry (the store) and
+ * the inset set. They live in `_internal/shell-store.tsx`. This module keeps
+ * the two hooks consumers can reach: `useSidebarMode`, and the deprecated
+ * `useShell`.
+ */
 import * as React from 'react';
-import type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';
+import { useBreakpoint } from '../hooks/use-breakpoint.js';
+import type { Breakpoint, PaneMode, PaneName, PaneTarget, PresentationValue, SidebarMode } from './shell.types.js';
+import { setShellPeek, subscribeShellStore, useShellStore, warnOnce, type PaneValue, type ShellStore } from './_internal/shell-store.js';
+
+const toSidebarMode = (value: PaneValue | undefined): SidebarMode | undefined => (value === undefined ? undefined : value === 'closed' ? 'collapsed' : value === 'thin' ? 'thin' : 'expanded');
+
+const fromSidebarMode = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : mode === 'thin' ? 'thin' : 'open');
+
+const toPaneMode = (value: PaneValue | undefined): PaneMode => (value === undefined || value === 'closed' ? 'collapsed' : 'expanded');
+
+const paneName = (target: PaneTarget): PaneName => (target === 'left' ? 'rail' : target);
+
+/** Re-renders on every change to the registry. For the deprecated whole-shell reader only. */
+function useStoreVersion(store: ShellStore) {
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  return React.useSyncExternalStore(
+    subscribe,
+    () => store.version,
+    () => 0,
+  );
+}
+
+/**
+ * The Sidebar's mode, and a setter. The setter is a user action: it reports
+ * through the Sidebar's `onStateChange` the way a Trigger does.
+ */
+export function useSidebarMode(): { sidebarMode: SidebarMode; setSidebarMode: (mode: SidebarMode) => void } {
+  const store = useShellStore('useSidebarMode');
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  const value = React.useSyncExternalStore(
+    subscribe,
+    () => store.entries.get('sidebar')?.value,
+    () => undefined,
+  );
+  const setSidebarMode = React.useCallback(
+    (mode: SidebarMode) => {
+      store.entries.get('sidebar')?.setValue(fromSidebarMode(mode), 'toggle');
+    },
+    [store],
+  );
+  return { sidebarMode: toSidebarMode(value) ?? 'expanded', setSidebarMode };
+}
 
 export interface ShellContextValue {
-  // Pane states
   leftMode: PaneMode;
   setLeftMode: (mode: PaneMode) => void;
-  /** When Rail is controlled, this reflects the resolved open state for the current breakpoint. */
+  /** The Rail's open state, resolved, when it is controlled. */
   leftControlledOpen?: boolean;
-  panelMode: PaneMode; // Panel state within left container
+  panelMode: PaneMode;
   setPanelMode: (mode: PaneMode) => void;
   sidebarMode: SidebarMode;
   setSidebarMode: (mode: SidebarMode) => void;
@@ -15,140 +63,80 @@ export interface ShellContextValue {
   setInspectorMode: (mode: PaneMode) => void;
   bottomMode: PaneMode;
   setBottomMode: (mode: PaneMode) => void;
-
-  // Peek state (layout-only, ephemeral)
   peekTarget: PaneTarget | null;
   setPeekTarget: (target: PaneTarget | null) => void;
   peekPane: (target: PaneTarget) => void;
   clearPeek: () => void;
-
-  // Composition detection
+  /** Whether a Rail is mounted. */
   hasLeft: boolean;
+  /** No effect since 0.8.0: the registry knows which panes are mounted. */
   setHasLeft: (has: boolean) => void;
+  /** Whether a Sidebar is mounted. */
   hasSidebar: boolean;
+  /** No effect since 0.8.0: the registry knows which panes are mounted. */
   setHasSidebar: (has: boolean) => void;
-
-  // Presentation resolution
   currentBreakpoint: Breakpoint;
   currentBreakpointReady: boolean;
+  /** The Rail's presentation at the current breakpoint, when known. */
   leftResolvedPresentation?: PresentationValue;
-
-  // Actions
   togglePane: (target: PaneTarget) => void;
   expandPane: (target: PaneTarget) => void;
   collapsePane: (target: PaneTarget) => void;
-  // Toggle customization
-  setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
-  // Dev-only hooks for presentation warnings
-  onLeftPres?: (p: PresentationValue) => void;
-  // Sizing info for overlay grouping
-  onLeftDefaults?: (size: number) => void;
-  onRailDefaults?: (size: number) => void;
-  onPanelDefaults?: (size: number) => void;
-}
-
-const ShellContext = React.createContext<ShellContextValue | null>(null);
-
-/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */
-export function useShell() {
-  const ctx = React.useContext(ShellContext);
-  if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');
-  return ctx;
-}
-
-export function ShellProvider({ value, children }: { value: ShellContextValue; children: React.ReactNode }) {
-  return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;
-}
-
-// Phase 7: Split contexts for render isolation
-
-// Pane mode slice contexts
-type ModeSetter<T> = (mode: T) => void;
-
-export const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null);
-export function useLeftMode() {
-  const ctx = React.useContext(LeftModeContext);
-  if (!ctx) throw new Error('useLeftMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const PanelModeContext = React.createContext<{ panelMode: PaneMode; setPanelMode: ModeSetter<PaneMode> } | null>(null);
-export function usePanelMode() {
-  const ctx = React.useContext(PanelModeContext);
-  if (!ctx) throw new Error('usePanelMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const SidebarModeContext = React.createContext<{ sidebarMode: SidebarMode; setSidebarMode: ModeSetter<SidebarMode> } | null>(null);
-export function useSidebarMode() {
-  const ctx = React.useContext(SidebarModeContext);
-  if (!ctx) throw new Error('useSidebarMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const InspectorModeContext = React.createContext<{ inspectorMode: PaneMode; setInspectorMode: ModeSetter<PaneMode> } | null>(null);
-export function useInspectorMode() {
-  const ctx = React.useContext(InspectorModeContext);
-  if (!ctx) throw new Error('useInspectorMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const BottomModeContext = React.createContext<{ bottomMode: PaneMode; setBottomMode: ModeSetter<PaneMode> } | null>(null);
-export function useBottomMode() {
-  const ctx = React.useContext(BottomModeContext);
-  if (!ctx) throw new Error('useBottomMode must be used within Shell.Root');
-  return ctx;
-}
-
-// Presentation slice
-export const PresentationContext = React.createContext<{ currentBreakpoint: Breakpoint; currentBreakpointReady: boolean; leftResolvedPresentation?: PresentationValue } | null>(null);
-export function usePresentation() {
-  const ctx = React.useContext(PresentationContext);
-  if (!ctx) throw new Error('usePresentation must be used within Shell.Root');
-  return ctx;
-}
-
-// Peek slice
-export const PeekContext = React.createContext<{ peekTarget: PaneTarget | null; setPeekTarget: (t: PaneTarget | null) => void; peekPane: (t: PaneTarget) => void; clearPeek: () => void } | null>(
-  null,
-);
-export function usePeek() {
-  const ctx = React.useContext(PeekContext);
-  if (!ctx) throw new Error('usePeek must be used within Shell.Root');
-  return ctx;
-}
-
-// Actions slice (stable callbacks)
-export const ActionsContext = React.createContext<{
-  togglePane: (t: PaneTarget) => void;
-  expandPane: (t: PaneTarget) => void;
-  collapsePane: (t: PaneTarget) => void;
-  setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
-} | null>(null);
-export function useShellActions() {
-  const ctx = React.useContext(ActionsContext);
-  if (!ctx) throw new Error('useShellActions must be used within Shell.Root');
-  return ctx;
-}
-
-// Composition slice
-export const CompositionContext = React.createContext<{ hasLeft: boolean; setHasLeft: (v: boolean) => void; hasSidebar: boolean; setHasSidebar: (v: boolean) => void } | null>(null);
-export function useComposition() {
-  const ctx = React.useContext(CompositionContext);
-  if (!ctx) throw new Error('useComposition must be used within Shell.Root');
-  return ctx;
 }
 
-// Inset slice - tracks which panes have inset for gray backdrop
-export type InsetPaneId = 'left' | 'sidebar' | 'content' | 'inspector' | 'bottom';
-export const InsetContext = React.createContext<{
-  insetPanes: Set<InsetPaneId>;
-  registerInset: (id: InsetPaneId) => void;
-  unregisterInset: (id: InsetPaneId) => void;
-  hasAnyInset: boolean;
-} | null>(null);
-export function useInset() {
-  const ctx = React.useContext(InsetContext);
-  if (!ctx) throw new Error('useInset must be used within Shell.Root');
-  return ctx;
+const noop = () => {};
+
+/**
+ * @deprecated The whole-shell reader re-renders its consumer on every change
+ * to any pane. Use `Shell.Trigger` to drive a pane, `Shell.useSidebarMode`
+ * for the Sidebar, and each pane's `open`/`onOpenChange` for its state.
+ * Removed in 1.0.
+ *
+ * Keeps 0.7's shape. The setters act as a user would: they report through
+ * the pane's own callback with `reason: 'toggle'`, and a controlled pane
+ * changes only when the app passes the new value.
+ */
+export function useShell(): ShellContextValue {
+  const store = useShellStore('useShell');
+  React.useEffect(() => {
+    warnOnce("Shell.useShell is deprecated and is removed in 1.0. Use Shell.Trigger, Shell.useSidebarMode, or a pane's own open/onOpenChange.");
+  }, []);
+  useStoreVersion(store);
+  const { breakpoint, ready } = useBreakpoint();
+  const actions = React.useMemo(() => {
+    const setMode = (name: PaneName) => (mode: PaneMode) => store.entries.get(name)?.setValue(mode === 'collapsed' ? 'closed' : 'open', 'toggle');
+    const setPeekTarget = (target: PaneTarget | null) => setShellPeek(store, target === null ? null : paneName(target));
+    return {
+      setLeftMode: setMode('rail'),
+      setPanelMode: setMode('panel'),
+      setInspectorMode: setMode('inspector'),
+      setBottomMode: setMode('bottom'),
+      setSidebarMode: (mode: SidebarMode) => store.entries.get('sidebar')?.setValue(fromSidebarMode(mode), 'toggle'),
+      setPeekTarget,
+      peekPane: (target: PaneTarget) => setPeekTarget(target),
+      clearPeek: () => setPeekTarget(null),
+      setHasLeft: noop,
+      setHasSidebar: noop,
+      togglePane: (target: PaneTarget) => store.entries.get(paneName(target))?.toggle('toggle'),
+      expandPane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('open', 'toggle'),
+      collapsePane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('closed', 'toggle'),
+    };
+  }, [store]);
+  const value = (name: PaneName) => store.entries.get(name)?.value;
+  const rail = store.entries.get('rail');
+  return {
+    leftMode: toPaneMode(value('rail')),
+    leftControlledOpen: rail?.value === undefined ? undefined : rail.value !== 'closed',
+    panelMode: toPaneMode(value('panel')),
+    sidebarMode: toSidebarMode(value('sidebar')) ?? 'expanded',
+    inspectorMode: toPaneMode(value('inspector')),
+    bottomMode: toPaneMode(value('bottom')),
+    peekTarget: store.peek,
+    hasLeft: store.entries.has('rail'),
+    hasSidebar: store.entries.has('sidebar'),
+    currentBreakpoint: breakpoint,
+    currentBreakpointReady: ready,
+    leftResolvedPresentation: rail?.presentation,
+    ...actions,
+  };
 }