@kushagradhawan/kookie-ui 0.1.72 → 0.1.74

package/src/components/_internal/shell-bottom.tsx

@@ -9,6 +9,7 @@ import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
 type BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
@@ -107,17 +108,29 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     },
   });
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
+  // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);
     const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: BottomSizeChangeMeta) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -172,13 +185,47 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     }
   }, [shell.bottomMode, open, defaultOpen, onOpenChange]);
 
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
+  const prevBottomModeRef = React.useRef<PaneMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.bottomMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.bottomMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevBottomModeRef.current = currentMode;
+      return;
     }
-  }, [shell.bottomMode, onExpand, onCollapse]);
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevBottomModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevBottomModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      if (currentMode === 'expanded') {
+        onExpandRef.current?.();
+      } else if (currentMode === 'collapsed') {
+        onCollapseRef.current?.();
+      }
+      prevBottomModeRef.current = currentMode;
+    }
+  }, [shell.bottomMode, shell.currentBreakpointReady]);
 
   const isExpanded = shell.bottomMode === 'expanded';
 
@@ -271,31 +318,14 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     ) : null;
 
   // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)
-  // Normalize CSS lengths to px (moved above overlay return to keep hook order consistent)
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientHeight || window.innerHeight || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'vertical'), []);
 
   // Apply defaultSize on mount when uncontrolled (moved above overlay return)
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -312,7 +342,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -320,7 +350,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
       localRef.current.style.setProperty('--bottom-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.bottomMode === 'expanded';

package/src/components/_internal/shell-handles.tsx

@@ -19,7 +19,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     snapTolerance,
     collapseThreshold,
     collapsible,
-    target: _target,
+    target,
     requestCollapse,
     requestToggle,
   } = usePaneResize();
@@ -37,6 +37,10 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
 
   const ariaOrientation = orientation;
 
+  // Generate accessible label from target
+  const targetLabel = target.charAt(0).toUpperCase() + target.slice(1);
+  const ariaLabel = `Resize ${targetLabel} pane`;
+
   return (
     <div
       {...props}
@@ -45,6 +49,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
       data-orientation={orientation}
       data-edge={edge}
       role="slider"
+      aria-label={ariaLabel}
       aria-orientation={ariaOrientation}
       aria-valuemin={minSize}
       aria-valuemax={maxSize}

package/src/components/_internal/shell-inspector.tsx

@@ -9,6 +9,7 @@ import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
 type InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
@@ -107,17 +108,29 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     },
   });
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
+  // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);
     const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: InspectorSizeChangeMeta) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -173,13 +186,47 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     }
   }, [shell.inspectorMode, open, defaultOpen, onOpenChange]);
 
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
+  const prevInspectorModeRef = React.useRef<PaneMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.inspectorMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.inspectorMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevInspectorModeRef.current = currentMode;
+      return;
     }
-  }, [shell.inspectorMode, onExpand, onCollapse]);
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevInspectorModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevInspectorModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      if (currentMode === 'expanded') {
+        onExpandRef.current?.();
+      } else if (currentMode === 'collapsed') {
+        onCollapseRef.current?.();
+      }
+      prevInspectorModeRef.current = currentMode;
+    }
+  }, [shell.inspectorMode, shell.currentBreakpointReady]);
 
   const isExpanded = shell.inspectorMode === 'expanded';
 
@@ -272,31 +319,14 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       </PaneResizeContext.Provider>
     ) : null;
 
-  // Normalize CSS lengths to px
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientWidth || window.innerWidth || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
   // Apply defaultSize on mount when uncontrolled
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -313,7 +343,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -321,7 +351,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       localRef.current.style.setProperty('--inspector-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.inspectorMode === 'expanded';

package/src/components/_internal/shell-sidebar.tsx

@@ -9,6 +9,7 @@ import { extractPaneDomProps } from './shell-prop-helpers.js';
 import { SidebarHandle, PaneHandle } from './shell-handles.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps } from '../shell.types.js';
 import { _BREAKPOINTS } from '../shell.types.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type SidebarPaneProps = PaneBaseProps & {
   mode?: PaneMode;
@@ -100,6 +101,17 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
   const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === SidebarHandle);
   const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
   // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void);
@@ -107,11 +119,11 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -188,14 +200,50 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     }
   }, [shell.sidebarMode, state, onStateChange]);
 
-  // Emit expand/collapse events
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
+  const prevSidebarModeRef = React.useRef<SidebarMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.sidebarMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.sidebarMode as SidebarMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevSidebarModeRef.current = currentMode;
+      return;
+    }
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevSidebarModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevSidebarModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      // onExpand: when becoming visible (collapsed → thin/expanded)
+      if (prevMode === 'collapsed' && currentMode !== 'collapsed') {
+        onExpandRef.current?.();
+      }
+      // onCollapse: when becoming hidden (any → collapsed)
+      else if (currentMode === 'collapsed') {
+        onCollapseRef.current?.();
+      }
+      prevSidebarModeRef.current = currentMode;
     }
-  }, [shell.sidebarMode, onExpand, onCollapse]);
+  }, [shell.sidebarMode, shell.currentBreakpointReady]);
 
   // Option A: thin is width-only; content remains visible whenever not collapsed
   const isContentVisible = shell.sidebarMode !== 'collapsed';
@@ -320,31 +368,14 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       </PaneResizeContext.Provider>
     ) : null;
 
-  // Normalize CSS lengths to px
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientWidth || window.innerWidth || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
   // Apply defaultSize on mount when uncontrolled
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -361,7 +392,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -369,7 +400,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       localRef.current.style.setProperty('--sidebar-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.sidebarMode !== 'collapsed';

package/src/components/shell.css

@@ -189,17 +189,16 @@
   width: var(--sidebar-thin-size, 64px);
 }
 
-.rt-ShellSidebar[data-mode='collapsed'] {
-  width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
-}
-
 /* Keep collapsed sidebar out of flow to avoid layout blips when exiting peek */
 .rt-ShellSidebar[data-mode='collapsed'] {
+  width: 0px;
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellSidebarContent {
@@ -293,16 +292,16 @@
   width: var(--inspector-size, 320px);
 }
 
+/* Keep collapsed inspector out of flow to avoid layout issues */
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
-}
-
-.rt-ShellInspector[data-mode='collapsed'] {
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellInspectorContent {