@nixxie-cms/core 1.0.0

package/dist/PageContainer-7db73317.esm.js

@@ -0,0 +1,1129 @@
+import NextHead from 'next/head';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { css } from '@keystar/ui/style';
+import NextLink from 'next/link';
+import { u as useNixxie } from './context-3132c3ed.esm.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRouter } from 'next/router';
+
+function Logo() {
+  var _adminConfig$componen;
+  const {
+    adminConfig
+  } = useNixxie();
+  if (adminConfig !== null && adminConfig !== void 0 && (_adminConfig$componen = adminConfig.components) !== null && _adminConfig$componen !== void 0 && _adminConfig$componen.Logo) return /*#__PURE__*/jsx(adminConfig.components.Logo, {});
+  return /*#__PURE__*/jsx(DefaultLogo, {});
+}
+function DefaultLogo() {
+  return /*#__PURE__*/jsxs(NextLink, {
+    href: "/",
+    className: css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: '9px',
+      textDecoration: 'none',
+      outline: 0,
+      flexShrink: 0,
+      '&:focus-visible': {
+        outline: '2px solid #000',
+        outlineOffset: 3,
+        borderRadius: 4
+      }
+    }),
+    children: [/*#__PURE__*/jsx("span", {
+      className: css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 28,
+        height: 28,
+        borderRadius: 6,
+        backgroundColor: '#000000',
+        flexShrink: 0
+      }),
+      children: /*#__PURE__*/jsx("svg", {
+        width: "13",
+        height: "13",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M2.5 11V3L11.5 11V3",
+          stroke: "white",
+          strokeWidth: "1.8",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      })
+    }), /*#__PURE__*/jsx("span", {
+      className: css({
+        fontSize: 14,
+        fontWeight: 600,
+        letterSpacing: '-0.03em',
+        color: '#0a0a0a',
+        lineHeight: 1,
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"
+      }),
+      children: "Nixxie"
+    })]
+  });
+}
+
+function getHrefFromList(list) {
+  return `/${list.path}${list.isSingleton ? '/1' : ''}`;
+}
+
+// ================================================================
+// Nav Item — minimal, text-only, precise
+// ================================================================
+
+function NavItem({
+  href,
+  children,
+  onClick,
+  indent
+}) {
+  const router = useRouter();
+  const segment = href.split('/')[1];
+  const isActive = router.pathname === href || segment && router.pathname.split('/')[1] === segment && href !== '/';
+  return /*#__PURE__*/jsxs("a", {
+    href: href,
+    onClick: e => {
+      e.preventDefault();
+      onClick === null || onClick === void 0 || onClick();
+      router.push(href);
+    },
+    "aria-current": isActive ? 'page' : undefined,
+    className: css({
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      paddingInline: indent ? '32px 16px' : '16px',
+      paddingBlock: '7px',
+      fontSize: 13,
+      fontWeight: isActive ? 500 : 400,
+      color: isActive ? '#0a0a0a' : '#636363',
+      backgroundColor: isActive ? '#f5f5f5' : 'transparent',
+      textDecoration: 'none',
+      borderRadius: '0 6px 6px 0',
+      marginRight: '12px',
+      lineHeight: '1.4',
+      cursor: 'pointer',
+      userSelect: 'none',
+      transition: 'color 120ms, background-color 120ms',
+      '&:hover': {
+        color: '#0a0a0a',
+        backgroundColor: '#f5f5f5'
+      }
+    }),
+    children: [isActive && /*#__PURE__*/jsx("span", {
+      className: css({
+        position: 'absolute',
+        left: 0,
+        top: '20%',
+        bottom: '20%',
+        width: 2,
+        borderRadius: '0 2px 2px 0',
+        backgroundColor: '#000000'
+      })
+    }), /*#__PURE__*/jsx("span", {
+      className: css({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }),
+      children: children
+    })]
+  });
+}
+
+// ================================================================
+// Section label
+// ================================================================
+
+function SectionLabel({
+  children,
+  action
+}) {
+  return /*#__PURE__*/jsxs("div", {
+    className: css({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingInline: '16px 12px',
+      paddingBlock: '12px 4px'
+    }),
+    children: [/*#__PURE__*/jsx("span", {
+      className: css({
+        fontSize: 10,
+        fontWeight: 600,
+        letterSpacing: '0.10em',
+        textTransform: 'uppercase',
+        color: '#b8b8b8'
+      }),
+      children: children
+    }), action]
+  });
+}
+
+// ================================================================
+// Divider
+// ================================================================
+
+function NavDivider() {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      height: 1,
+      marginInline: '16px',
+      marginBlock: '6px',
+      backgroundColor: '#f2f2f2'
+    })
+  });
+}
+
+// ================================================================
+// Search shortcut — Cmd+K trigger
+// ================================================================
+
+function SearchTrigger({
+  onClick
+}) {
+  return /*#__PURE__*/jsxs("button", {
+    onClick: onClick,
+    className: css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      width: 'calc(100% - 24px)',
+      marginInline: '12px',
+      marginBottom: '8px',
+      paddingInline: '10px',
+      paddingBlock: '7px',
+      borderRadius: 6,
+      border: '1px solid #ebebeb',
+      backgroundColor: '#f5f5f5',
+      color: '#a3a3a3',
+      fontSize: 12.5,
+      cursor: 'pointer',
+      textAlign: 'left',
+      transition: 'border-color 140ms, background 140ms, color 140ms',
+      '&:hover': {
+        borderColor: '#dedede',
+        backgroundColor: '#efefef',
+        color: '#737373'
+      },
+      '&:focus-visible': {
+        outline: '2px solid #000',
+        outlineOffset: 2
+      }
+    }),
+    children: [/*#__PURE__*/jsxs("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      style: {
+        flexShrink: 0
+      },
+      children: [/*#__PURE__*/jsx("circle", {
+        cx: "5",
+        cy: "5",
+        r: "3.5",
+        stroke: "currentColor",
+        strokeWidth: "1.25"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M8 8L10.5 10.5",
+        stroke: "currentColor",
+        strokeWidth: "1.25",
+        strokeLinecap: "round"
+      })]
+    }), /*#__PURE__*/jsx("span", {
+      className: css({
+        flex: 1
+      }),
+      children: "Search\u2026"
+    }), /*#__PURE__*/jsx("kbd", {
+      className: css({
+        fontSize: 10.5,
+        color: '#c8c8c8',
+        fontFamily: 'inherit',
+        letterSpacing: '0.02em'
+      }),
+      children: "\u2318K"
+    })]
+  });
+}
+
+// ================================================================
+// List filter — inline nav search
+// ================================================================
+
+function NavSearch({
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      paddingInline: '16px 12px',
+      paddingBottom: '4px'
+    }),
+    children: /*#__PURE__*/jsx("input", {
+      type: "search",
+      value: value,
+      onChange: e => onChange(e.target.value),
+      placeholder: "Filter\u2026",
+      className: css({
+        width: '100%',
+        paddingInline: '10px',
+        paddingBlock: '5px',
+        fontSize: 12.5,
+        border: '1px solid #ebebeb',
+        borderRadius: 5,
+        backgroundColor: '#f5f5f5',
+        color: '#0a0a0a',
+        outline: 'none',
+        boxSizing: 'border-box',
+        transition: 'border-color 140ms',
+        '&:focus': {
+          borderColor: '#b0b0b0'
+        },
+        '&::placeholder': {
+          color: '#c8c8c8'
+        },
+        '&::-webkit-search-cancel-button': {
+          display: 'none'
+        }
+      })
+    })
+  });
+}
+
+// ================================================================
+// Collections section
+// ================================================================
+
+function CollectionsSection({
+  lists,
+  onNavItemClick
+}) {
+  const [search, setSearch] = useState('');
+  const filtered = search.trim() ? lists.filter(l => l.label.toLowerCase().includes(search.toLowerCase())) : lists;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SectionLabel, {
+      children: "Collections"
+    }), lists.length > 6 && /*#__PURE__*/jsx(NavSearch, {
+      value: search,
+      onChange: setSearch
+    }), filtered.length === 0 ? /*#__PURE__*/jsx("p", {
+      className: css({
+        margin: '4px 16px',
+        fontSize: 12.5,
+        color: '#c8c8c8'
+      }),
+      children: "No results"
+    }) : filtered.map(list => /*#__PURE__*/jsxs(NavItem, {
+      href: getHrefFromList(list),
+      onClick: onNavItemClick,
+      children: [list.label, list.isSingleton && /*#__PURE__*/jsx("span", {
+        className: css({
+          marginLeft: 6,
+          fontSize: 10,
+          fontWeight: 500,
+          color: '#c8c8c8',
+          letterSpacing: '0.04em',
+          textTransform: 'uppercase'
+        }),
+        children: "Single"
+      })]
+    }, list.key))]
+  });
+}
+
+// ================================================================
+// Root Navigation
+// ================================================================
+
+function Navigation({
+  onNavItemClick,
+  onCmdK
+}) {
+  var _adminConfig$componen;
+  const {
+    adminConfig,
+    lists: allLists,
+    apiPath
+  } = useNixxie();
+  const visibleLists = Object.values(allLists).filter(x => !x.hideNavigation);
+  if (adminConfig !== null && adminConfig !== void 0 && (_adminConfig$componen = adminConfig.components) !== null && _adminConfig$componen !== void 0 && _adminConfig$componen.Navigation) {
+    return /*#__PURE__*/jsx(adminConfig.components.Navigation, {
+      lists: visibleLists
+    });
+  }
+  return /*#__PURE__*/jsxs("nav", {
+    "aria-label": "Main navigation",
+    className: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    }),
+    children: [/*#__PURE__*/jsx("div", {
+      className: css({
+        paddingTop: '10px'
+      }),
+      children: /*#__PURE__*/jsx(SearchTrigger, {
+        onClick: onCmdK
+      })
+    }), /*#__PURE__*/jsx(NavItem, {
+      href: "/",
+      onClick: onNavItemClick,
+      children: "Dashboard"
+    }), /*#__PURE__*/jsx(NavDivider, {}), /*#__PURE__*/jsxs("div", {
+      className: css({
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        paddingBottom: '8px'
+      }),
+      children: [visibleLists.length > 0 ? /*#__PURE__*/jsx(CollectionsSection, {
+        lists: visibleLists,
+        onNavItemClick: onNavItemClick
+      }) : /*#__PURE__*/jsx("p", {
+        className: css({
+          margin: '8px 16px',
+          fontSize: 12.5,
+          color: '#c8c8c8'
+        }),
+        children: "No collections"
+      }), process.env.NODE_ENV !== 'production' && apiPath && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(NavDivider, {}), /*#__PURE__*/jsx(SectionLabel, {
+          children: "Developer"
+        }), /*#__PURE__*/jsx(NavItem, {
+          href: apiPath,
+          onClick: onNavItemClick,
+          children: "API Explorer"
+        })]
+      })]
+    })]
+  });
+}
+
+// ================================================================
+// Legacy public exports (used by @nixxie-cms/auth and custom navigations)
+// ================================================================
+
+function NavList({
+  children
+}) {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+}
+function NavContainer({
+  children
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      paddingBlock: '8px'
+    }),
+    children: children
+  });
+}
+function NavFooter({
+  children
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      paddingInline: '12px',
+      paddingBlock: '10px',
+      borderTop: '1px solid #f2f2f2',
+      marginTop: 'auto'
+    }),
+    children: children
+  });
+}
+
+/** @deprecated */
+function DeveloperResourcesMenu() {
+  return null;
+}
+
+function useCommands() {
+  const {
+    lists
+  } = useNixxie();
+  return useMemo(() => {
+    const cmds = [{
+      id: 'nav-dashboard',
+      label: 'Go to Dashboard',
+      category: 'Navigate',
+      icon: '◼',
+      href: '/'
+    }];
+    for (const list of Object.values(lists)) {
+      if (list.hideNavigation) continue;
+      cmds.push({
+        id: `nav-${list.key}`,
+        label: list.label,
+        description: `Open ${list.label} list`,
+        category: 'Navigate',
+        icon: '≡',
+        href: getHrefFromList(list)
+      });
+      if (!list.hideCreate && !list.isSingleton) {
+        cmds.push({
+          id: `create-${list.key}`,
+          label: `New ${list.singular}`,
+          description: `Create a new ${list.singular.toLowerCase()}`,
+          category: 'Create',
+          icon: '+',
+          href: `/${list.path}/create`
+        });
+      }
+    }
+    return cmds;
+  }, [lists]);
+}
+function CommandPalette({
+  isOpen,
+  onClose
+}) {
+  const router = useRouter();
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const commands = useCommands();
+  const filtered = useMemo(() => {
+    if (!query.trim()) return commands;
+    const q = query.toLowerCase();
+    return commands.filter(c => {
+      var _c$description;
+      return c.label.toLowerCase().includes(q) || ((_c$description = c.description) === null || _c$description === void 0 ? void 0 : _c$description.toLowerCase().includes(q)) || c.category.toLowerCase().includes(q);
+    });
+  }, [commands, query]);
+
+  // Group by category
+  const grouped = useMemo(() => {
+    const map = new Map();
+    for (const cmd of filtered) {
+      if (!map.has(cmd.category)) map.set(cmd.category, []);
+      map.get(cmd.category).push(cmd);
+    }
+    return map;
+  }, [filtered]);
+
+  // Flat list for keyboard navigation
+  const flatList = useMemo(() => filtered, [filtered]);
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setActiveIndex(0);
+      setTimeout(() => {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 10);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    var _listRef$current;
+    const el = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelector(`[data-active="true"]`);
+    el === null || el === void 0 || el.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeIndex]);
+  function runCommand(cmd) {
+    onClose();
+    if (cmd.href) {
+      router.push(cmd.href);
+    } else if (cmd.action) {
+      cmd.action();
+    }
+  }
+  function onKeyDown(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex(i => Math.min(i + 1, flatList.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const cmd = flatList[activeIndex];
+      if (cmd) runCommand(cmd);
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  }
+
+  // Pre-compute flat index for each command ID
+  const cmdFlatIndex = useMemo(() => {
+    const map = new Map();
+    filtered.forEach((cmd, i) => map.set(cmd.id, i));
+    return map;
+  }, [filtered]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: onClose,
+      className: css({
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        zIndex: 200,
+        backdropFilter: 'blur(3px)'
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Command palette",
+      className: css({
+        position: 'fixed',
+        top: '14vh',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: '90vw',
+        maxWidth: 560,
+        maxHeight: '62vh',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#ffffff',
+        borderRadius: 10,
+        boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
+        zIndex: 201,
+        overflow: 'hidden'
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: css({
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '12px 16px',
+          borderBottom: '1px solid #f0f0f0'
+        }),
+        children: [/*#__PURE__*/jsxs("svg", {
+          width: "15",
+          height: "15",
+          viewBox: "0 0 15 15",
+          fill: "none",
+          style: {
+            flexShrink: 0,
+            color: '#a3a3a3'
+          },
+          children: [/*#__PURE__*/jsx("circle", {
+            cx: "6.5",
+            cy: "6.5",
+            r: "4.5",
+            stroke: "currentColor",
+            strokeWidth: "1.4"
+          }), /*#__PURE__*/jsx("line", {
+            x1: "9.9",
+            y1: "9.9",
+            x2: "13.2",
+            y2: "13.2",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          })]
+        }), /*#__PURE__*/jsx("input", {
+          ref: inputRef,
+          value: query,
+          onChange: e => setQuery(e.target.value),
+          onKeyDown: onKeyDown,
+          placeholder: "Search commands, lists, actions\u2026",
+          className: css({
+            flex: 1,
+            border: 'none',
+            outline: 'none',
+            fontSize: 14.5,
+            color: '#0a0a0a',
+            background: 'transparent',
+            fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+            '&::placeholder': {
+              color: '#b8b8b8'
+            }
+          })
+        }), /*#__PURE__*/jsx("kbd", {
+          className: css({
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 2,
+            padding: '2px 7px',
+            backgroundColor: '#f5f5f5',
+            border: '1px solid #e8e8e8',
+            borderRadius: 5,
+            fontSize: 11,
+            color: '#a3a3a3',
+            fontFamily: 'inherit',
+            flexShrink: 0
+          }),
+          children: "Esc"
+        })]
+      }), /*#__PURE__*/jsx("ul", {
+        ref: listRef,
+        role: "listbox",
+        className: css({
+          flex: 1,
+          overflowY: 'auto',
+          padding: '6px 0',
+          margin: 0,
+          listStyle: 'none',
+          '&::-webkit-scrollbar': {
+            width: 4
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#e8e8e8',
+            borderRadius: 4
+          }
+        }),
+        children: grouped.size === 0 ? /*#__PURE__*/jsxs("li", {
+          className: css({
+            padding: '28px 16px',
+            textAlign: 'center',
+            color: '#a3a3a3',
+            fontSize: 13.5
+          }),
+          children: ["No results for \u201C", query, "\u201D"]
+        }) : Array.from(grouped.entries()).map(([category, items]) => /*#__PURE__*/jsxs("li", {
+          role: "none",
+          children: [/*#__PURE__*/jsx("p", {
+            className: css({
+              margin: 0,
+              padding: '8px 16px 3px',
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: '0.10em',
+              textTransform: 'uppercase',
+              color: '#b8b8b8'
+            }),
+            children: category
+          }), /*#__PURE__*/jsx("ul", {
+            role: "group",
+            className: css({
+              listStyle: 'none',
+              margin: 0,
+              padding: 0
+            }),
+            children: items.map(cmd => {
+              var _cmdFlatIndex$get;
+              const idx = (_cmdFlatIndex$get = cmdFlatIndex.get(cmd.id)) !== null && _cmdFlatIndex$get !== void 0 ? _cmdFlatIndex$get : 0;
+              const isActive = idx === activeIndex;
+              return /*#__PURE__*/jsxs("li", {
+                role: "option",
+                "aria-selected": isActive,
+                "data-active": isActive,
+                onClick: () => runCommand(cmd),
+                onMouseEnter: () => setActiveIndex(idx),
+                className: css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  padding: '7px 16px',
+                  cursor: 'pointer',
+                  backgroundColor: isActive ? '#0a0a0a' : 'transparent',
+                  transition: 'background 100ms',
+                  '&:hover': {
+                    backgroundColor: isActive ? '#0a0a0a' : '#f5f5f5'
+                  }
+                }),
+                children: [/*#__PURE__*/jsx("span", {
+                  className: css({
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 28,
+                    height: 28,
+                    borderRadius: 6,
+                    backgroundColor: isActive ? '#2a2a2a' : '#f0f0f0',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: isActive ? '#ffffff' : '#636363',
+                    flexShrink: 0,
+                    transition: 'background 100ms, color 100ms',
+                    fontFamily: 'monospace'
+                  }),
+                  children: cmd.icon
+                }), /*#__PURE__*/jsxs("span", {
+                  className: css({
+                    flex: 1,
+                    minWidth: 0
+                  }),
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: css({
+                      display: 'block',
+                      fontSize: 13.5,
+                      fontWeight: 500,
+                      color: isActive ? '#ffffff' : '#0a0a0a',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      transition: 'color 100ms'
+                    }),
+                    children: cmd.label
+                  }), cmd.description && /*#__PURE__*/jsx("span", {
+                    className: css({
+                      display: 'block',
+                      fontSize: 12,
+                      color: isActive ? 'rgba(255,255,255,0.5)' : '#a3a3a3',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      transition: 'color 100ms'
+                    }),
+                    children: cmd.description
+                  })]
+                }), isActive && /*#__PURE__*/jsx("kbd", {
+                  className: css({
+                    fontSize: 11,
+                    color: 'rgba(255,255,255,0.6)',
+                    background: '#2a2a2a',
+                    border: '1px solid #3a3a3a',
+                    borderRadius: 4,
+                    padding: '2px 6px',
+                    fontFamily: 'inherit',
+                    flexShrink: 0
+                  }),
+                  children: "\u21B5"
+                })]
+              }, cmd.id);
+            })
+          })]
+        }, category))
+      }), /*#__PURE__*/jsxs("div", {
+        className: css({
+          display: 'flex',
+          alignItems: 'center',
+          gap: 14,
+          padding: '8px 16px',
+          borderTop: '1px solid #f0f0f0',
+          fontSize: 11,
+          color: '#b8b8b8'
+        }),
+        children: [/*#__PURE__*/jsxs("span", {
+          children: [/*#__PURE__*/jsx("kbd", {
+            className: css({
+              fontFamily: 'inherit'
+            }),
+            children: "\u2191\u2193"
+          }), " navigate"]
+        }), /*#__PURE__*/jsxs("span", {
+          children: [/*#__PURE__*/jsx("kbd", {
+            className: css({
+              fontFamily: 'inherit'
+            }),
+            children: "\u21B5"
+          }), " open"]
+        }), /*#__PURE__*/jsxs("span", {
+          children: [/*#__PURE__*/jsx("kbd", {
+            className: css({
+              fontFamily: 'inherit'
+            }),
+            children: "Esc"
+          }), " close"]
+        }), /*#__PURE__*/jsxs("span", {
+          style: {
+            marginInlineStart: 'auto'
+          },
+          children: [/*#__PURE__*/jsx("kbd", {
+            className: css({
+              fontFamily: 'inherit'
+            }),
+            children: "\u2318K"
+          }), " toggle"]
+        })]
+      })]
+    })]
+  });
+}
+
+const SIDEBAR_WIDTH = 256;
+const TOPBAR_HEIGHT = 52;
+function PageWrapper(props) {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      display: 'flex',
+      height: '100vh',
+      overflow: 'hidden',
+      backgroundColor: '#fafafa',
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    }),
+    ...props
+  });
+}
+
+// ---- Mobile overlay ----
+function Backdrop({
+  isVisible,
+  onClick
+}) {
+  return /*#__PURE__*/jsx("div", {
+    onClick: onClick,
+    "aria-hidden": !isVisible,
+    className: css({
+      position: 'fixed',
+      inset: 0,
+      backgroundColor: 'rgba(10,10,10,0.35)',
+      zIndex: 40,
+      transition: 'opacity 200ms',
+      opacity: isVisible ? 1 : 0,
+      pointerEvents: isVisible ? 'auto' : 'none',
+      backdropFilter: 'blur(2px)',
+      '@media (min-width: 768px)': {
+        display: 'none'
+      }
+    })
+  });
+}
+
+// ---- Sidebar — pure white, precise ----
+function Sidebar({
+  isOpen,
+  onClose,
+  onCmdK
+}) {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Backdrop, {
+      isVisible: isOpen,
+      onClick: onClose
+    }), /*#__PURE__*/jsxs("aside", {
+      className: css({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: SIDEBAR_WIDTH,
+        zIndex: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#ffffff',
+        borderRight: '1px solid #ebebeb',
+        transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+        transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
+        '@media (min-width: 768px)': {
+          position: 'relative',
+          transform: 'translateX(0)',
+          flexShrink: 0
+        }
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        className: css({
+          display: 'flex',
+          alignItems: 'center',
+          height: TOPBAR_HEIGHT,
+          paddingInline: '16px',
+          borderBottom: '1px solid #f2f2f2',
+          flexShrink: 0
+        }),
+        children: /*#__PURE__*/jsx(Logo, {})
+      }), /*#__PURE__*/jsx("div", {
+        className: css({
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          WebkitOverflowScrolling: 'touch',
+          '&::-webkit-scrollbar': {
+            width: 3
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#ebebeb',
+            borderRadius: 3
+          }
+        }),
+        children: /*#__PURE__*/jsx(Navigation, {
+          onNavItemClick: onClose,
+          onCmdK: onCmdK
+        })
+      })]
+    })]
+  });
+}
+
+// ---- Top bar ----
+function TopBar({
+  header,
+  onMenuClick,
+  isSidebarOpen
+}) {
+  return /*#__PURE__*/jsxs("header", {
+    className: css({
+      display: 'flex',
+      alignItems: 'center',
+      height: TOPBAR_HEIGHT,
+      paddingInline: '24px',
+      gap: '14px',
+      backgroundColor: '#ffffff',
+      borderBottom: '1px solid #ebebeb',
+      flexShrink: 0,
+      zIndex: 30
+    }),
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: onMenuClick,
+      "aria-label": isSidebarOpen ? 'Close menu' : 'Open menu',
+      "aria-expanded": isSidebarOpen,
+      className: css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 32,
+        height: 32,
+        borderRadius: 6,
+        border: '1px solid #ebebeb',
+        background: 'transparent',
+        cursor: 'pointer',
+        flexShrink: 0,
+        color: '#a3a3a3',
+        transition: 'color 130ms, background 130ms',
+        '&:hover': {
+          background: '#f5f5f5',
+          color: '#0a0a0a'
+        },
+        '@media (min-width: 768px)': {
+          display: 'none'
+        }
+      }),
+      children: /*#__PURE__*/jsx("svg", {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 15 15",
+        fill: "none",
+        children: isSidebarOpen ? /*#__PURE__*/jsx("path", {
+          d: "M3 3L12 12M12 3L3 12",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round"
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("line", {
+            x1: "2",
+            y1: "4.5",
+            x2: "13",
+            y2: "4.5",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }), /*#__PURE__*/jsx("line", {
+            x1: "2",
+            y1: "7.5",
+            x2: "13",
+            y2: "7.5",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }), /*#__PURE__*/jsx("line", {
+            x1: "2",
+            y1: "10.5",
+            x2: "13",
+            y2: "10.5",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          })]
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1,
+        minWidth: 0,
+        gap: '12px'
+      }),
+      children: header
+    })]
+  });
+}
+
+// ---- Main content area ----
+function MainContent(props) {
+  return /*#__PURE__*/jsx("main", {
+    className: css({
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      minWidth: 0,
+      minHeight: 0
+    }),
+    ...props
+  });
+}
+function ContentScroller(props) {
+  return /*#__PURE__*/jsx("div", {
+    "data-nixxie-content": "",
+    className: css({
+      flex: 1,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      WebkitOverflowScrolling: 'touch',
+      '&::-webkit-scrollbar': {
+        width: 5
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: '#e8e8e8',
+        borderRadius: 4
+      },
+      '&::-webkit-scrollbar-thumb:hover': {
+        background: '#d4d4d4'
+      }
+    }),
+    ...props
+  });
+}
+
+// ---- Public API ----
+
+function PageContainer({
+  children,
+  header,
+  title
+}) {
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const [cmdOpen, setCmdOpen] = useState(false);
+  useEffect(() => {
+    function onResize() {
+      if (window.innerWidth >= 768) setSidebarOpen(false);
+    }
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  useEffect(() => {
+    function onKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setCmdOpen(v => !v);
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+  return /*#__PURE__*/jsxs(PageWrapper, {
+    children: [/*#__PURE__*/jsx(NextHead, {
+      children: /*#__PURE__*/jsx("title", {
+        children: title ? `Nixxie – ${title}` : 'Nixxie'
+      }, "title")
+    }), /*#__PURE__*/jsx(Sidebar, {
+      isOpen: isSidebarOpen,
+      onClose: () => setSidebarOpen(false),
+      onCmdK: () => setCmdOpen(v => !v)
+    }), /*#__PURE__*/jsxs(MainContent, {
+      children: [/*#__PURE__*/jsx(TopBar, {
+        header: header,
+        onMenuClick: () => setSidebarOpen(v => !v),
+        isSidebarOpen: isSidebarOpen
+      }), /*#__PURE__*/jsx(ContentScroller, {
+        children: children
+      })]
+    }), /*#__PURE__*/jsx(CommandPalette, {
+      isOpen: cmdOpen,
+      onClose: () => setCmdOpen(false)
+    })]
+  });
+}
+
+export { DeveloperResourcesMenu as D, Logo as L, NavContainer as N, PageContainer as P, NavFooter as a, NavItem as b, NavList as c, PageWrapper as d, getHrefFromList as g };