@kushagradhawan/kookie-ui 0.1.50 → 0.1.52

package/src/components/sheet.css

@@ -12,28 +12,22 @@
 
 /* Logical side anchoring (RTL-aware via logical inset) */
 :where(.rt-SheetContent[data-side='start']) {
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: auto !important;
+  inset-block: 0 !important;
+  inset-inline-start: 0 !important;
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 :where(.rt-SheetContent[data-side='end']) {
-  top: 0 !important;
-  bottom: 0 !important;
-  right: 0 !important;
-  left: auto !important;
+  inset-block: 0 !important;
+  inset-inline-end: 0 !important;
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='top']) {
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: auto !important;
+  inset-block-start: 0 !important;
+  inset-inline: 0 !important;
   width: auto;
   max-width: none;
   height: var(--height, 75vh);
@@ -42,10 +36,8 @@
   border-start-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='bottom']) {
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  top: auto !important;
+  inset-block-end: 0 !important;
+  inset-inline: 0 !important;
   width: auto;
   max-width: none;
   height: var(--height, 75vh);

package/src/components/shell.context.tsx

@@ -20,9 +20,6 @@ export interface ShellContextValue {
   peekPane: (target: PaneTarget) => void;
   clearPeek: () => void;
 
-  // Sidebar presentation sequencing phase (library-managed)
-  sidebarPhase?: 'idle' | 'hiding' | 'resizing' | 'showing';
-
   // Composition detection
   hasLeft: boolean;
   setHasLeft: (has: boolean) => void;
@@ -57,3 +54,82 @@ export function useShell() {
 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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any,
+);
+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 as any);
+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 as any);
+export function useComposition() {
+  const ctx = React.useContext(CompositionContext);
+  if (!ctx) throw new Error('useComposition must be used within Shell.Root');
+  return ctx;
+}

package/src/components/shell.css

@@ -92,7 +92,6 @@
   flex-direction: column;
   width: var(--rail-size, 64px);
   height: 100%;
-  padding: var(--space-2);
   gap: var(--space-2);
 
   /* Content animation: fade out first, then fade in after width settles */

package/src/components/shell.hooks.ts

@@ -29,3 +29,38 @@ export function useResponsivePresentation(presentation: ResponsivePresentation):
     return 'fixed';
   }, [presentation, currentBreakpoint]);
 }
+
+/**
+ * Resolve a responsive value (T or responsive map keyed by breakpoints) against the current Shell breakpoint.
+ * If no value is defined for the current breakpoint, search smaller breakpoints down to 'initial'.
+ * Returns undefined when passed a responsive map with no matching key across the chain.
+ */
+export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>> | undefined): T | undefined {
+  const { currentBreakpoint } = useShell();
+
+  return React.useMemo(() => {
+    if (value == null) return undefined;
+    // Primitive value
+    if (typeof value !== 'object') {
+      return value as T;
+    }
+
+    const map = value as Partial<Record<Breakpoint, T>>;
+    if (map[currentBreakpoint as Breakpoint] !== undefined) {
+      return map[currentBreakpoint as Breakpoint] as T;
+    }
+
+    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
+    const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
+
+    for (let i = startIdx + 1; i < order.length; i++) {
+      const bp = order[i];
+      if (map[bp] !== undefined) {
+        return map[bp] as T;
+      }
+    }
+
+    return undefined;
+  }, [value, currentBreakpoint]);
+}