@nixxie-cms/core 2.1.0 → 2.2.0

package/dist/{PageContainer-5ae731cc.esm.js → PageContainer-355cfbfa.esm.js}

@@ -1,10 +1,11 @@
 import NextHead from 'next/head';
 import { useState, useRef, useMemo, useEffect } from 'react';
-import { css } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
 import NextLink from 'next/link';
-import { u as useNixxie } from './context-af9957ed.esm.js';
+import { u as useNixxie } from './context-2924eaaa.esm.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
+import { useId } from '@react-aria/utils';
 
 function Logo() {
   var _adminConfig$componen;
@@ -25,7 +26,7 @@ function DefaultLogo() {
       outline: 0,
       flexShrink: 0,
       '&:focus-visible': {
-        outline: '2px solid #000',
+        outline: `2px solid ${tokenSchema.color.scale.black}`,
         outlineOffset: 3,
         borderRadius: 4
       }
@@ -38,7 +39,7 @@ function DefaultLogo() {
         width: 28,
         height: 28,
         borderRadius: 6,
-        backgroundColor: '#000000',
+        backgroundColor: tokenSchema.color.scale.black,
         flexShrink: 0
       }),
       children: /*#__PURE__*/jsx("svg", {
@@ -48,7 +49,7 @@ function DefaultLogo() {
         fill: "none",
         children: /*#__PURE__*/jsx("path", {
           d: "M2.5 11V3L11.5 11V3",
-          stroke: "white",
+          stroke: tokenSchema.color.scale.white,
           strokeWidth: "1.8",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -59,7 +60,7 @@ function DefaultLogo() {
         fontSize: 14,
         fontWeight: 600,
         letterSpacing: '-0.03em',
-        color: '#0a0a0a',
+        color: tokenSchema.color.foreground.neutralEmphasis,
         lineHeight: 1,
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"
       }),
@@ -83,8 +84,10 @@ function NavItem({
   indent
 }) {
   const router = useRouter();
-  const segment = href.split('/')[1];
-  const isActive = router.pathname === href || segment && router.pathname.split('/')[1] === segment && href !== '/';
+  // Active on an exact match, or when the current route is nested under `href`
+  // (prefix match on a path boundary). Dashboard ('/') is only active on an
+  // exact match so it doesn't light up for every nested route.
+  const isActive = router.pathname === href || href !== '/' && router.pathname.startsWith(href + '/');
   return /*#__PURE__*/jsxs("a", {
     href: href,
     onClick: e => {
@@ -101,8 +104,8 @@ function NavItem({
       paddingBlock: '7px',
       fontSize: 13,
       fontWeight: isActive ? 500 : 400,
-      color: isActive ? '#0a0a0a' : '#636363',
-      backgroundColor: isActive ? '#f5f5f5' : 'transparent',
+      color: isActive ? tokenSchema.color.foreground.neutralEmphasis : tokenSchema.color.foreground.neutralSecondary,
+      backgroundColor: isActive ? tokenSchema.color.background.surfaceSecondary : 'transparent',
       textDecoration: 'none',
       borderRadius: '0 6px 6px 0',
       marginRight: '12px',
@@ -111,8 +114,8 @@ function NavItem({
       userSelect: 'none',
       transition: 'color 120ms, background-color 120ms',
       '&:hover': {
-        color: '#0a0a0a',
-        backgroundColor: '#f5f5f5'
+        color: tokenSchema.color.foreground.neutralEmphasis,
+        backgroundColor: tokenSchema.color.background.surfaceSecondary
       }
     }),
     children: [isActive && /*#__PURE__*/jsx("span", {
@@ -123,7 +126,7 @@ function NavItem({
         bottom: '20%',
         width: 2,
         borderRadius: '0 2px 2px 0',
-        backgroundColor: '#000000'
+        backgroundColor: tokenSchema.color.scale.black
       })
     }), /*#__PURE__*/jsx("span", {
       className: css({
@@ -158,7 +161,7 @@ function SectionLabel({
         fontWeight: 600,
         letterSpacing: '0.10em',
         textTransform: 'uppercase',
-        color: '#b8b8b8'
+        color: tokenSchema.color.foreground.neutralSecondary
       }),
       children: children
     }), action]
@@ -175,7 +178,7 @@ function NavDivider() {
       height: 1,
       marginInline: '16px',
       marginBlock: '6px',
-      backgroundColor: '#f2f2f2'
+      backgroundColor: tokenSchema.color.border.muted
     })
   });
 }
@@ -199,20 +202,20 @@ function SearchTrigger({
       paddingInline: '10px',
       paddingBlock: '7px',
       borderRadius: 6,
-      border: '1px solid #ebebeb',
-      backgroundColor: '#f5f5f5',
-      color: '#a3a3a3',
+      border: `1px solid ${tokenSchema.color.border.muted}`,
+      backgroundColor: tokenSchema.color.background.surfaceSecondary,
+      color: tokenSchema.color.foreground.neutralSecondary,
       fontSize: 12.5,
       cursor: 'pointer',
       textAlign: 'left',
       transition: 'border-color 140ms, background 140ms, color 140ms',
       '&:hover': {
-        borderColor: '#dedede',
-        backgroundColor: '#efefef',
-        color: '#737373'
+        borderColor: tokenSchema.color.border.emphasis,
+        backgroundColor: tokenSchema.color.background.surfaceSecondary,
+        color: tokenSchema.color.foreground.neutralSecondary
       },
       '&:focus-visible': {
-        outline: '2px solid #000',
+        outline: `2px solid ${tokenSchema.color.scale.black}`,
         outlineOffset: 2
       }
     }),
@@ -244,7 +247,7 @@ function SearchTrigger({
     }), /*#__PURE__*/jsx("kbd", {
       className: css({
         fontSize: 10.5,
-        color: '#c8c8c8',
+        color: tokenSchema.color.foreground.neutralSecondary,
         fontFamily: 'inherit',
         letterSpacing: '0.02em'
       }),
@@ -276,18 +279,18 @@ function NavSearch({
         paddingInline: '10px',
         paddingBlock: '5px',
         fontSize: 12.5,
-        border: '1px solid #ebebeb',
+        border: `1px solid ${tokenSchema.color.border.muted}`,
         borderRadius: 5,
-        backgroundColor: '#f5f5f5',
-        color: '#0a0a0a',
+        backgroundColor: tokenSchema.color.background.surfaceSecondary,
+        color: tokenSchema.color.foreground.neutralEmphasis,
         outline: 'none',
         boxSizing: 'border-box',
         transition: 'border-color 140ms',
         '&:focus': {
-          borderColor: '#b0b0b0'
+          borderColor: tokenSchema.color.alias.borderHovered
         },
         '&::placeholder': {
-          color: '#c8c8c8'
+          color: tokenSchema.color.foreground.neutralTertiary
         },
         '&::-webkit-search-cancel-button': {
           display: 'none'
@@ -321,7 +324,7 @@ function CollectionsSection({
       className: css({
         margin: '4px 16px',
         fontSize: 12.5,
-        color: '#c8c8c8'
+        color: tokenSchema.color.foreground.neutralSecondary
       }),
       children: "No results"
     }) : filtered.map(list => /*#__PURE__*/jsxs(NavItem, {
@@ -332,7 +335,7 @@ function CollectionsSection({
           marginLeft: 6,
           fontSize: 10,
           fontWeight: 500,
-          color: '#c8c8c8',
+          color: tokenSchema.color.foreground.neutralSecondary,
           letterSpacing: '0.04em',
           textTransform: 'uppercase'
         }),
@@ -394,7 +397,7 @@ function Navigation({
         className: css({
           margin: '8px 16px',
           fontSize: 12.5,
-          color: '#c8c8c8'
+          color: tokenSchema.color.foreground.neutralSecondary
         }),
         children: "No collections"
       }), process.env.NODE_ENV !== 'production' && apiPath && /*#__PURE__*/jsxs(Fragment, {
@@ -441,7 +444,7 @@ function NavFooter({
     className: css({
       paddingInline: '12px',
       paddingBlock: '10px',
-      borderTop: '1px solid #f2f2f2',
+      borderTop: `1px solid ${tokenSchema.color.border.muted}`,
       marginTop: 'auto'
     }),
     children: children
@@ -498,6 +501,8 @@ function CommandPalette({
   const [activeIndex, setActiveIndex] = useState(0);
   const inputRef = useRef(null);
   const listRef = useRef(null);
+  const panelRef = useRef(null);
+  const listboxId = useId();
   const commands = useCommands();
   const filtered = useMemo(() => {
     if (!query.trim()) return commands;
@@ -525,11 +530,29 @@ function CommandPalette({
     if (!isOpen) return;
     setQuery('');
     setActiveIndex(0);
+
+    // FOCUS RESTORE: remember what was focused before the palette opened.
+    const previouslyFocused = document.activeElement;
+
+    // SCROLL LOCK: prevent the page behind the modal from scrolling.
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
     const t = setTimeout(() => {
       var _inputRef$current;
       return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }, 10);
-    return () => clearTimeout(t);
+    return () => {
+      clearTimeout(t);
+      // Restore scroll position behaviour.
+      document.body.style.overflow = prevOverflow;
+      // Restore focus to whatever held it before we opened.
+      try {
+        var _previouslyFocused$fo;
+        previouslyFocused === null || previouslyFocused === void 0 || (_previouslyFocused$fo = previouslyFocused.focus) === null || _previouslyFocused$fo === void 0 || _previouslyFocused$fo.call(previouslyFocused);
+      } catch {
+        /* element may be gone from the DOM — ignore */
+      }
+    };
   }, [isOpen]);
   useEffect(() => {
     setActiveIndex(0);
@@ -551,6 +574,41 @@ function CommandPalette({
       cmd.action();
     }
   }
+
+  // FOCUS TRAP + panel-level ESCAPE. Runs for any child of the panel so the
+  // modal closes regardless of which element currently holds focus, and Tab /
+  // Shift+Tab stay contained within the panel's focusable descendants.
+  function onPanelKeyDown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+    if (e.key !== 'Tab') return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    let focusables;
+    try {
+      focusables = Array.from(panel.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(el => el.offsetParent !== null || el === document.activeElement);
+    } catch {
+      return;
+    }
+    if (focusables.length === 0) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const current = document.activeElement;
+    if (e.shiftKey) {
+      if (current === first || !panel.contains(current)) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (current === last || !panel.contains(current)) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
   function onKeyDown(e) {
     if (e.key === 'ArrowDown') {
       e.preventDefault();
@@ -574,6 +632,12 @@ function CommandPalette({
     flatList.forEach((cmd, i) => map.set(cmd.id, i));
     return map;
   }, [flatList]);
+
+  // Stable per-option id derived from the listbox id, used for both the rendered
+  // <li role="option"> ids and the input's aria-activedescendant.
+  const optionId = cmdId => `${listboxId}-opt-${cmdId}`;
+  const activeCommand = flatList[activeIndex];
+  const activeOptionId = activeCommand ? optionId(activeCommand.id) : undefined;
   if (!isOpen) return null;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
@@ -581,14 +645,16 @@ function CommandPalette({
       className: css({
         position: 'fixed',
         inset: 0,
-        backgroundColor: 'rgba(0,0,0,0.45)',
+        backgroundColor: tokenSchema.color.alias.blanket,
         zIndex: 200,
         backdropFilter: 'blur(3px)'
       })
     }), /*#__PURE__*/jsxs("div", {
+      ref: panelRef,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Command palette",
+      onKeyDown: onPanelKeyDown,
       className: css({
         position: 'fixed',
         top: '14vh',
@@ -599,7 +665,7 @@ function CommandPalette({
         maxHeight: '62vh',
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: '#ffffff',
+        backgroundColor: tokenSchema.color.background.canvas,
         borderRadius: 10,
         boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
         zIndex: 201,
@@ -611,16 +677,17 @@ function CommandPalette({
           alignItems: 'center',
           gap: 10,
           padding: '12px 16px',
-          borderBottom: '1px solid #f0f0f0'
+          borderBottom: `1px solid ${tokenSchema.color.border.muted}`
         }),
         children: [/*#__PURE__*/jsxs("svg", {
           width: "15",
           height: "15",
           viewBox: "0 0 15 15",
           fill: "none",
+          "aria-hidden": "true",
           style: {
             flexShrink: 0,
-            color: '#a3a3a3'
+            color: tokenSchema.color.foreground.neutralSecondary
           },
           children: [/*#__PURE__*/jsx("circle", {
             cx: "6.5",
@@ -643,16 +710,22 @@ function CommandPalette({
           onChange: e => setQuery(e.target.value),
           onKeyDown: onKeyDown,
           placeholder: "Search commands, lists, actions\u2026",
+          role: "combobox",
+          "aria-label": "Search commands",
+          "aria-expanded": flatList.length > 0,
+          "aria-controls": listboxId,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": activeOptionId,
           className: css({
             flex: 1,
             border: 'none',
             outline: 'none',
             fontSize: 14.5,
-            color: '#0a0a0a',
+            color: tokenSchema.color.foreground.neutralEmphasis,
             background: 'transparent',
             fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
             '&::placeholder': {
-              color: '#b8b8b8'
+              color: tokenSchema.color.foreground.neutralSecondary
             }
           })
         }), /*#__PURE__*/jsx("kbd", {
@@ -661,11 +734,11 @@ function CommandPalette({
             alignItems: 'center',
             gap: 2,
             padding: '2px 7px',
-            backgroundColor: '#f5f5f5',
-            border: '1px solid #e8e8e8',
+            backgroundColor: tokenSchema.color.background.surfaceSecondary,
+            border: `1px solid ${tokenSchema.color.border.muted}`,
             borderRadius: 5,
             fontSize: 11,
-            color: '#a3a3a3',
+            color: tokenSchema.color.foreground.neutralSecondary,
             fontFamily: 'inherit',
             flexShrink: 0
           }),
@@ -673,7 +746,9 @@ function CommandPalette({
         })]
       }), /*#__PURE__*/jsx("ul", {
         ref: listRef,
+        id: listboxId,
         role: "listbox",
+        "aria-label": "Commands",
         className: css({
           flex: 1,
           overflowY: 'auto',
@@ -684,7 +759,7 @@ function CommandPalette({
             width: 4
           },
           '&::-webkit-scrollbar-thumb': {
-            background: '#e8e8e8',
+            background: tokenSchema.color.border.muted,
             borderRadius: 4
           }
         }),
@@ -692,124 +767,131 @@ function CommandPalette({
           className: css({
             padding: '28px 16px',
             textAlign: 'center',
-            color: '#a3a3a3',
+            color: tokenSchema.color.foreground.neutralSecondary,
             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", {
+        }) : Array.from(grouped.entries()).map(([category, items], groupIdx) => {
+          const headerId = `${listboxId}-cat-${groupIdx}`;
+          return /*#__PURE__*/jsxs("li", {
+            role: "presentation",
+            children: [/*#__PURE__*/jsx("p", {
+              id: headerId,
+              role: "presentation",
+              className: css({
+                margin: 0,
+                padding: '8px 16px 3px',
+                fontSize: 10,
+                fontWeight: 600,
+                letterSpacing: '0.10em',
+                textTransform: 'uppercase',
+                color: tokenSchema.color.foreground.neutralSecondary
+              }),
+              children: category
+            }), /*#__PURE__*/jsx("ul", {
+              role: "group",
+              "aria-labelledby": headerId,
+              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", {
+                  id: optionId(cmd.id),
+                  role: "option",
+                  "aria-selected": isActive,
+                  "data-active": isActive,
+                  onClick: () => runCommand(cmd),
+                  onMouseEnter: () => setActiveIndex(idx),
                   className: css({
-                    display: 'inline-flex',
+                    display: '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
+                    gap: 10,
+                    padding: '7px 16px',
+                    cursor: 'pointer',
+                    backgroundColor: isActive ? tokenSchema.color.scale.black : 'transparent',
+                    transition: 'background 100ms',
+                    '&:hover': {
+                      backgroundColor: isActive ? tokenSchema.color.scale.black : tokenSchema.color.background.surfaceSecondary
+                    }
                   }),
                   children: [/*#__PURE__*/jsx("span", {
                     className: css({
-                      display: 'block',
-                      fontSize: 13.5,
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: 28,
+                      height: 28,
+                      borderRadius: 6,
+                      backgroundColor: isActive ? '#2a2a2a' : tokenSchema.color.background.surfaceSecondary,
+                      fontSize: 12,
                       fontWeight: 500,
-                      color: isActive ? '#ffffff' : '#0a0a0a',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      transition: 'color 100ms'
+                      color: isActive ? tokenSchema.color.foreground.onEmphasis : tokenSchema.color.foreground.neutralSecondary,
+                      flexShrink: 0,
+                      transition: 'background 100ms, color 100ms',
+                      fontFamily: 'monospace'
                     }),
-                    children: cmd.label
-                  }), cmd.description && /*#__PURE__*/jsx("span", {
+                    children: cmd.icon
+                  }), /*#__PURE__*/jsxs("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'
+                      flex: 1,
+                      minWidth: 0
+                    }),
+                    children: [/*#__PURE__*/jsx("span", {
+                      className: css({
+                        display: 'block',
+                        fontSize: 13.5,
+                        fontWeight: 500,
+                        color: isActive ? tokenSchema.color.foreground.onEmphasis : tokenSchema.color.foreground.neutralEmphasis,
+                        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 ? tokenSchema.color.foreground.inverseSecondary : tokenSchema.color.foreground.neutralSecondary,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        transition: 'color 100ms'
+                      }),
+                      children: cmd.description
+                    })]
+                  }), isActive && /*#__PURE__*/jsx("kbd", {
+                    className: css({
+                      fontSize: 11,
+                      color: tokenSchema.color.foreground.inverseSecondary,
+                      background: '#2a2a2a',
+                      border: '1px solid #3a3a3a',
+                      borderRadius: 4,
+                      padding: '2px 6px',
+                      fontFamily: 'inherit',
+                      flexShrink: 0
                     }),
-                    children: cmd.description
+                    children: "\u21B5"
                   })]
-                }), 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))
+                }, cmd.id);
+              })
+            })]
+          }, category);
+        })
       }), /*#__PURE__*/jsxs("div", {
         className: css({
           display: 'flex',
           alignItems: 'center',
           gap: 14,
           padding: '8px 16px',
-          borderTop: '1px solid #f0f0f0',
+          borderTop: `1px solid ${tokenSchema.color.border.muted}`,
           fontSize: 11,
-          color: '#b8b8b8'
+          color: tokenSchema.color.foreground.neutralSecondary
         }),
         children: [/*#__PURE__*/jsxs("span", {
           children: [/*#__PURE__*/jsx("kbd", {
@@ -856,13 +938,54 @@ function PageWrapper(props) {
       display: 'flex',
       height: '100vh',
       overflow: 'hidden',
-      backgroundColor: '#fafafa',
+      backgroundColor: tokenSchema.color.background.surface,
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
     }),
     ...props
   });
 }
 
+// ---- Skip to content (WCAG 2.4.1 Bypass Blocks) ----
+function SkipLink() {
+  return /*#__PURE__*/jsx("a", {
+    href: "#main-content",
+    className: css({
+      // Visually hidden, off-screen by default — kept out of the layout for mouse users.
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: 'hidden',
+      clip: 'rect(0 0 0 0)',
+      whiteSpace: 'nowrap',
+      border: 0,
+      zIndex: 60,
+      // Reveal on keyboard focus.
+      '&:focus, &:focus-visible': {
+        width: 'auto',
+        height: 'auto',
+        padding: '10px 16px',
+        margin: 8,
+        clip: 'auto',
+        overflow: 'visible',
+        backgroundColor: tokenSchema.color.background.canvas,
+        color: tokenSchema.color.foreground.neutralEmphasis,
+        borderRadius: 6,
+        boxShadow: `0 2px 8px ${tokenSchema.color.shadow.regular}`,
+        outline: `2px solid ${tokenSchema.color.foreground.neutralEmphasis}`,
+        outlineOffset: 2,
+        textDecoration: 'none',
+        fontSize: 14,
+        fontWeight: 500
+      }
+    }),
+    children: "Skip to content"
+  });
+}
+
 // ---- Mobile overlay ----
 function Backdrop({
   isVisible,
@@ -874,7 +997,7 @@ function Backdrop({
     className: css({
       position: 'fixed',
       inset: 0,
-      backgroundColor: 'rgba(10,10,10,0.35)',
+      backgroundColor: tokenSchema.color.alias.blanket,
       zIndex: 40,
       transition: 'opacity 200ms',
       opacity: isVisible ? 1 : 0,
@@ -888,16 +1011,91 @@ function Backdrop({
 }
 
 // ---- Sidebar — pure white, precise ----
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function Sidebar({
   isOpen,
   onClose,
   onCmdK
 }) {
+  const asideRef = useRef(null);
+  // Element to restore focus to (the hamburger) once the drawer closes.
+  const lastFocusedRef = useRef(null);
+
+  // Mobile drawer a11y: focus trap, Escape-to-close, initial focus, and focus
+  // restore. `isOpen` is only ever true on mobile (the resize handler forces it
+  // false at >=768px), so gating on it doubles as a mobile gate.
+  useEffect(() => {
+    if (!isOpen) return;
+    const aside = asideRef.current;
+    if (!aside) return;
+
+    // Save the currently focused element so we can restore it on close.
+    try {
+      const active = document.activeElement;
+      lastFocusedRef.current = active instanceof HTMLElement ? active : null;
+    } catch {
+      lastFocusedRef.current = null;
+    }
+    const getFocusable = () => {
+      try {
+        return Array.from(aside.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.offsetParent !== null || el === document.activeElement);
+      } catch {
+        return [];
+      }
+    };
+
+    // Move initial focus into the drawer.
+    try {
+      var _getFocusable$;
+      (_getFocusable$ = getFocusable()[0]) === null || _getFocusable$ === void 0 || _getFocusable$.focus();
+    } catch {
+      /* noop */
+    }
+    function onKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const focusable = getFocusable();
+      if (focusable.length === 0) {
+        // Nothing focusable inside — keep focus from escaping anyway.
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const current = document.activeElement;
+      if (e.shiftKey) {
+        if (current === first || !(aside !== null && aside !== void 0 && aside.contains(current))) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (current === last || !(aside !== null && aside !== void 0 && aside.contains(current))) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      // Restore focus to the trigger that opened the drawer.
+      try {
+        var _lastFocusedRef$curre;
+        (_lastFocusedRef$curre = lastFocusedRef.current) === null || _lastFocusedRef$curre === void 0 || _lastFocusedRef$curre.focus();
+      } catch {
+        /* noop */
+      }
+    };
+  }, [isOpen, onClose]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Backdrop, {
       isVisible: isOpen,
       onClick: onClose
     }), /*#__PURE__*/jsxs("aside", {
+      id: "nixxie-sidebar",
+      ref: asideRef,
       className: css({
         position: 'fixed',
         top: 0,
@@ -907,13 +1105,18 @@ function Sidebar({
         zIndex: 50,
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: '#ffffff',
-        borderRight: '1px solid #ebebeb',
+        backgroundColor: tokenSchema.color.background.canvas,
+        borderRight: `1px solid ${tokenSchema.color.border.muted}`,
         transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+        // Closed off-canvas drawer must leave the tab order / AT tree on
+        // mobile; `visibility:hidden` removes its descendants from both.
+        visibility: isOpen ? 'visible' : 'hidden',
         transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
         '@media (min-width: 768px)': {
           position: 'relative',
           transform: 'translateX(0)',
+          // Persistent desktop rail is always reachable.
+          visibility: 'visible',
           flexShrink: 0
         }
       }),
@@ -923,7 +1126,7 @@ function Sidebar({
           alignItems: 'center',
           height: TOPBAR_HEIGHT,
           paddingInline: '16px',
-          borderBottom: '1px solid #f2f2f2',
+          borderBottom: `1px solid ${tokenSchema.color.border.muted}`,
           flexShrink: 0
         }),
         children: /*#__PURE__*/jsx(Logo, {})
@@ -937,7 +1140,7 @@ function Sidebar({
             width: 3
           },
           '&::-webkit-scrollbar-thumb': {
-            background: '#ebebeb',
+            background: tokenSchema.color.border.muted,
             borderRadius: 3
           }
         }),
@@ -963,8 +1166,8 @@ function TopBar({
       height: TOPBAR_HEIGHT,
       paddingInline: '24px',
       gap: '14px',
-      backgroundColor: '#ffffff',
-      borderBottom: '1px solid #ebebeb',
+      backgroundColor: tokenSchema.color.background.canvas,
+      borderBottom: `1px solid ${tokenSchema.color.border.muted}`,
       flexShrink: 0,
       zIndex: 30
     }),
@@ -972,6 +1175,7 @@ function TopBar({
       onClick: onMenuClick,
       "aria-label": isSidebarOpen ? 'Close menu' : 'Open menu',
       "aria-expanded": isSidebarOpen,
+      "aria-controls": "nixxie-sidebar",
       className: css({
         display: 'inline-flex',
         alignItems: 'center',
@@ -979,15 +1183,15 @@ function TopBar({
         width: 32,
         height: 32,
         borderRadius: 6,
-        border: '1px solid #ebebeb',
+        border: `1px solid ${tokenSchema.color.border.muted}`,
         background: 'transparent',
         cursor: 'pointer',
         flexShrink: 0,
-        color: '#a3a3a3',
+        color: tokenSchema.color.foreground.neutralTertiary,
         transition: 'color 130ms, background 130ms',
         '&:hover': {
-          background: '#f5f5f5',
-          color: '#0a0a0a'
+          background: tokenSchema.color.background.surfaceSecondary,
+          color: tokenSchema.color.foreground.neutralEmphasis
         },
         '@media (min-width: 768px)': {
           display: 'none'
@@ -1048,6 +1252,8 @@ function TopBar({
 // ---- Main content area ----
 function MainContent(props) {
   return /*#__PURE__*/jsx("main", {
+    id: "main-content",
+    tabIndex: -1,
     className: css({
       flex: 1,
       display: 'flex',
@@ -1071,11 +1277,11 @@ function ContentScroller(props) {
         width: 5
       },
       '&::-webkit-scrollbar-thumb': {
-        background: '#e8e8e8',
+        background: tokenSchema.color.border.muted,
         borderRadius: 4
       },
       '&::-webkit-scrollbar-thumb:hover': {
-        background: '#d4d4d4'
+        background: tokenSchema.color.border.emphasis
       }
     }),
     ...props
@@ -1114,7 +1320,7 @@ function PageContainer({
       children: /*#__PURE__*/jsx("title", {
         children: title ? `Nixxie – ${title}` : 'Nixxie'
       }, "title")
-    }), /*#__PURE__*/jsx(Sidebar, {
+    }), /*#__PURE__*/jsx(SkipLink, {}), /*#__PURE__*/jsx(Sidebar, {
       isOpen: isSidebarOpen,
       onClose: () => setSidebarOpen(false),
       onCmdK: () => setCmdOpen(v => !v)