@womp/kookie-ui 0.35.7 → 0.37.0

package/schemas/shell-inspector.json

@@ -114,44 +114,8 @@
         },
         "children": {},
         "open": {
-          "description": "The open state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "boolean"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "boolean"
-                    },
-                    "xs": {
-                      "type": "boolean"
-                    },
-                    "sm": {
-                      "type": "boolean"
-                    },
-                    "md": {
-                      "type": "boolean"
-                    },
-                    "lg": {
-                      "type": "boolean"
-                    },
-                    "xl": {
-                      "type": "boolean"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive open state"
-            }
-          ]
+          "description": "The open state, when controlled",
+          "type": "boolean"
         },
         "defaultOpen": {
           "description": "The starting state. A responsive object leaves the pane untouched, with that object as the answer at each breakpoint.",
@@ -237,31 +201,6 @@
         },
         "sizeUpdateMs": {
           "type": "number"
-        },
-        "snapPoints": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "array",
-          "items": {
-            "type": "number"
-          }
-        },
-        "snapTolerance": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "collapseThreshold": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "paneId": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "string"
-        },
-        "persistence": {
-          "type": "object",
-          "properties": {},
-          "description": "Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.",
-          "additionalProperties": false
         }
       },
       "additionalProperties": false

package/schemas/shell-panel.json

@@ -110,44 +110,8 @@
         },
         "children": {},
         "open": {
-          "description": "The open state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "boolean"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "boolean"
-                    },
-                    "xs": {
-                      "type": "boolean"
-                    },
-                    "sm": {
-                      "type": "boolean"
-                    },
-                    "md": {
-                      "type": "boolean"
-                    },
-                    "lg": {
-                      "type": "boolean"
-                    },
-                    "xl": {
-                      "type": "boolean"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive open state"
-            }
-          ]
+          "description": "The open state, when controlled",
+          "type": "boolean"
         },
         "defaultOpen": {
           "description": "The starting state. A responsive object leaves the pane untouched, with that object as the answer at each breakpoint.",
@@ -233,31 +197,6 @@
         },
         "sizeUpdateMs": {
           "type": "number"
-        },
-        "snapPoints": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "array",
-          "items": {
-            "type": "number"
-          }
-        },
-        "snapTolerance": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "collapseThreshold": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "paneId": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "string"
-        },
-        "persistence": {
-          "type": "object",
-          "properties": {},
-          "description": "Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.",
-          "additionalProperties": false
         }
       },
       "additionalProperties": false

package/schemas/shell-rail.json

@@ -111,44 +111,8 @@
         },
         "children": {},
         "open": {
-          "description": "The open state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "boolean"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "boolean"
-                    },
-                    "xs": {
-                      "type": "boolean"
-                    },
-                    "sm": {
-                      "type": "boolean"
-                    },
-                    "md": {
-                      "type": "boolean"
-                    },
-                    "lg": {
-                      "type": "boolean"
-                    },
-                    "xl": {
-                      "type": "boolean"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive open state"
-            }
-          ]
+          "description": "The open state, when controlled",
+          "type": "boolean"
         },
         "defaultOpen": {
           "description": "The starting state. A responsive object leaves the pane untouched, with that object as the answer at each breakpoint.",

package/schemas/shell-sidebar.json

@@ -158,109 +158,12 @@
         "sizeUpdateMs": {
           "type": "number"
         },
-        "snapPoints": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "array",
-          "items": {
-            "type": "number"
-          }
-        },
-        "snapTolerance": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "collapseThreshold": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "number"
-        },
-        "paneId": {
-          "description": "Deprecated, removed in 1.0",
-          "type": "string"
-        },
-        "persistence": {
-          "type": "object",
-          "properties": {},
-          "description": "Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.",
-          "additionalProperties": false
-        },
         "state": {
-          "description": "The state, when controlled. A responsive object is deprecated.",
-          "anyOf": [
-            {
-              "type": "string",
-              "enum": [
-                "collapsed",
-                "expanded"
-              ],
-              "description": "Sidebar state"
-            },
-            {
-              "anyOf": [
-                {
-                  "type": "string",
-                  "enum": [
-                    "collapsed",
-                    "expanded"
-                  ],
-                  "description": "Sidebar state"
-                },
-                {
-                  "type": "object",
-                  "properties": {
-                    "initial": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "xs": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "sm": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "md": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "lg": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    },
-                    "xl": {
-                      "type": "string",
-                      "enum": [
-                        "collapsed",
-                        "expanded"
-                      ],
-                      "description": "Sidebar state"
-                    }
-                  },
-                  "additionalProperties": false
-                }
-              ],
-              "description": "Responsive sidebar state"
-            }
+          "description": "The state, when controlled",
+          "type": "string",
+          "enum": [
+            "collapsed",
+            "expanded"
           ]
         },
         "defaultState": {

package/schemas/shell-trigger.json

@@ -7,7 +7,6 @@
         "target": {
           "type": "string",
           "enum": [
-            "left",
             "rail",
             "panel",
             "sidebar",
@@ -26,11 +25,6 @@
             "collapse"
           ]
         },
-        "peekOnHover": {
-          "default": false,
-          "description": "Deprecated, removed in 1.0. Shows a preview of a closed pane on hover.",
-          "type": "boolean"
-        },
         "type": {
           "default": "button",
           "description": "The button type",

package/src/components/_internal/base-dialog.css

@@ -113,3 +113,18 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* A panel's top row: a Toolbar first in the content holds the title and the Close X. It sits one
+   step closer to the panel's edge than the content, stated against the panel's own padding so it
+   moves with the size, and the body starts a section's distance under it. Same as a Navigator's
+   band. The title takes the free space, so Close goes to the far end. */
+.kui-Toolbar:where(.kui-BaseDialogContent > :first-child) {
+  margin-block-start: calc(-1 * var(--layout-space-2));
+  margin-inline: calc(-1 * var(--layout-space-2));
+  margin-block-end: var(--layout-space-6);
+}
+
+.kui-ToolbarTitle:where(.kui-BaseDialogContent > .kui-Toolbar:first-child > *) {
+  margin-inline-end: auto;
+  min-inline-size: 0;
+}

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

@@ -7,14 +7,14 @@ import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useFrameRegistration, warnOnce } from './shell-store.js';
-import { bottomAnchoredGrowth, detailRest, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
+import { useFrameRegistration } from './shell-store.js';
+import { bottomAnchoredGrowth, detailRest, toPaneValue } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
-import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneOpenChangeReason } from '../shell.types.js';
 
-type BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };
-type BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
+type BottomOpenChangeMeta = { reason: PaneOpenChangeReason };
+type BottomControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
 /** Since 0.8.0 `defaultOpen` takes a responsive object here too, as the docs already said it did. */
 type BottomUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };
 type BottomSizeControlledProps = { size: number | string; defaultSize?: never };
@@ -50,16 +50,9 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     maxSize = 400,
     resizable = false,
     collapsible = true,
-    onExpand,
-    onCollapse,
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     children,
     style,
     size,
@@ -83,17 +76,10 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     presentationTable: table,
     builtIn: detailRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('bottom', flush);
 
-  React.useEffect(() => {
-    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
-      warnOnce('Shell.Bottom: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-    }
-  }, [snapPoints, collapseThreshold, paneId, persistence]);
 
   const elementRef = React.useRef<HTMLElement | null>(null);
   const composedRef = useComposedRefs(ref, pane.setElement, elementRef);
@@ -119,14 +105,8 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     overlaying: pane.overlaying,
     overlayingNow: () => table[readBreakpoint()] === 'overlay',
-    requestCollapse: () => pane.setValue('closed', 'toggle'),
     requestToggle: () => pane.toggle('toggle'),
   });
 
@@ -137,7 +117,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
 
   return (
     <div
-      {...withoutRemovedPaneProps(domProps)}
+      {...domProps}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellBottom', className)}

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

@@ -27,12 +27,8 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
     collapsible,
     target,
-    requestCollapse,
     requestToggle,
   } = usePaneResize();
 
@@ -158,9 +154,6 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         onResizeStart?.(startSize);
 
         let current = startSize;
-        // The unclamped size, so `collapseThreshold` is compared before the
-        // clamp: a threshold below `minSize` can then still collapse the pane.
-        let raw = startSize;
         let frame = 0;
         let pending: number | null = null;
         const flush = () => {
@@ -189,8 +182,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           if (ev === lastHandledMove) return;
           lastHandledMove = ev;
           const client = orientation === 'vertical' ? ev.clientX : ev.clientY;
-          raw = startSize + (client - startClient) * sign;
-          current = clamp(raw);
+          current = clamp(startSize + (client - startClient) * sign);
           write(container, current);
           pending = current;
           if (!frame) frame = requestAnimationFrame(flush);
@@ -232,29 +224,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           if (frame) cancelAnimationFrame(frame);
           flush();
 
-          if (collapsible && typeof collapseThreshold === 'number' && raw <= collapseThreshold) {
-            // A drag past the threshold closes the pane and keeps no size: the
-            // pane opens again at the size it had before the drag. The drag
-            // still ends, at that size, so a consumer that started something
-            // in onResizeStart can stop it.
-            write(container, startSize);
-            onResize?.(startSize);
-            cleanup();
-            requestCollapse?.();
-            onResizeEnd?.(startSize);
-            return;
-          }
-
-          let settled = current;
-          if (snapPoints && snapPoints.length) {
-            const nearest = snapPoints.reduce((acc, p) => (Math.abs(p - current) < Math.abs(acc - current) ? p : acc), snapPoints[0]);
-            if (Math.abs(nearest - current) <= snapTolerance) {
-              settled = clamp(nearest);
-              write(container, settled);
-              onResize?.(settled);
-            }
-          }
-          onResizeEnd?.(settled);
+          onResizeEnd?.(current);
           cleanup();
         };
 

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

@@ -7,14 +7,14 @@ import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useFrameRegistration, warnOnce } from './shell-store.js';
-import { detailRest, endAnchoredGrowth, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
+import { useFrameRegistration } from './shell-store.js';
+import { detailRest, endAnchoredGrowth, toPaneValue } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
-import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneOpenChangeReason } from '../shell.types.js';
 
-type InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };
-type InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
+type InspectorOpenChangeMeta = { reason: PaneOpenChangeReason };
+type InspectorControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
 type InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };
 type InspectorSizeControlledProps = { size: number | string; defaultSize?: never };
 type InspectorSizeUncontrolledProps = { defaultSize?: number | string; size?: never };
@@ -52,16 +52,9 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     maxSize = 500,
     resizable = false,
     collapsible = true,
-    onExpand,
-    onCollapse,
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     children,
     style,
     onSizeChange,
@@ -85,17 +78,10 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     presentationTable: table,
     builtIn: detailRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('inspector', flush);
 
-  React.useEffect(() => {
-    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
-      warnOnce('Shell.Inspector: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-    }
-  }, [snapPoints, collapseThreshold, paneId, persistence]);
 
   const elementRef = React.useRef<HTMLElement | null>(null);
   const composedRef = useComposedRefs(ref, pane.setElement, elementRef);
@@ -121,14 +107,8 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     overlaying: pane.overlaying,
     overlayingNow: () => table[readBreakpoint()] === 'overlay',
-    requestCollapse: () => pane.setValue('closed', 'toggle'),
     requestToggle: () => pane.toggle('toggle'),
   });
 
@@ -138,7 +118,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);
   return (
     <div
-      {...withoutRemovedPaneProps(domProps)}
+      {...domProps}
       role={domProps.role ?? 'complementary'}
       id={pane.id}
       ref={composedRef}