@n3rd-ai/ui 0.2.1 → 0.2.2

package/dist/{chunk-MZO6ECNX.js → chunk-P5L6UDFY.js}

@@ -45,7 +45,7 @@ function ToastProvider({
     display: "flex",
     flexDirection: "column",
     gap: "var(--n3rd-space-2)",
-    zIndex: 9998,
+    zIndex: "var(--n3rd-z-toast, 9998)",
     fontFamily: "var(--n3rd-font)",
     fontSize: "var(--n3rd-text-sm)"
   };

package/dist/hooks/index.js

@@ -1,11 +1,13 @@
 "use client";
-export { useToast } from '../chunk-MZO6ECNX.js';
+export { useToast } from '../chunk-P5L6UDFY.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 function useTypewriter({ text, speed = 50, delay = 0, onComplete }) {
   const [displayed, setDisplayed] = useState("");
   const [done, setDone] = useState(false);
   const hasRun = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(() => {
     if (hasRun.current) return;
     hasRun.current = true;
@@ -19,7 +21,7 @@ function useTypewriter({ text, speed = 50, delay = 0, onComplete }) {
         } else {
           clearInterval(interval);
           setDone(true);
-          onComplete?.();
+          onCompleteRef.current?.();
         }
       }, speed);
     }, delay);
@@ -27,27 +29,26 @@ function useTypewriter({ text, speed = 50, delay = 0, onComplete }) {
       clearTimeout(timeout);
       clearInterval(interval);
     };
-  }, [text, speed, delay, onComplete]);
+  }, [text, speed, delay]);
   return { displayed, done };
 }
 function useKeyboard(shortcuts) {
-  const handleKeyDown = useCallback(
-    (e) => {
-      for (const shortcut of shortcuts) {
-        const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase();
-        const ctrlMatch = (shortcut.ctrl ?? false) === e.ctrlKey;
-        const metaMatch = (shortcut.meta ?? false) === e.metaKey;
-        const shiftMatch = (shortcut.shift ?? false) === e.shiftKey;
-        const altMatch = (shortcut.alt ?? false) === e.altKey;
-        if (keyMatch && ctrlMatch && metaMatch && shiftMatch && altMatch) {
-          e.preventDefault();
-          shortcut.handler(e);
-          return;
-        }
+  const shortcutsRef = useRef(shortcuts);
+  shortcutsRef.current = shortcuts;
+  const handleKeyDown = useCallback((e) => {
+    for (const shortcut of shortcutsRef.current) {
+      const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase();
+      const ctrlMatch = (shortcut.ctrl ?? false) === e.ctrlKey;
+      const metaMatch = (shortcut.meta ?? false) === e.metaKey;
+      const shiftMatch = (shortcut.shift ?? false) === e.shiftKey;
+      const altMatch = (shortcut.alt ?? false) === e.altKey;
+      if (keyMatch && ctrlMatch && metaMatch && shiftMatch && altMatch) {
+        e.preventDefault();
+        shortcut.handler(e);
+        return;
       }
-    },
-    [shortcuts]
-  );
+    }
+  }, []);
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);

package/dist/index.css

@@ -17,6 +17,15 @@
     transform: translateY(0);
   }
 }
+@media (max-width: 640px) {
+  .n3rd-nav {
+    padding: var(--n3rd-space-2) var(--n3rd-space-3);
+    font-size: var(--n3rd-text-xs);
+  }
+  .n3rd-footer-starfield {
+    display: none;
+  }
+}
 
 /* src/components/layout/Box.css */
 .n3rd-box {
@@ -62,6 +71,13 @@
   line-height: var(--n3rd-line-height);
 }
 
+/* src/components/layout/Grid.css */
+@media (max-width: 640px) {
+  .n3rd-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 /* src/components/display/Footer.css */
 .n3rd-footer {
   font-family: var(--n3rd-font);
@@ -90,6 +106,9 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 0;
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
 }
 .n3rd-footer-sun-line {
   height: 6px;
@@ -104,6 +123,9 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: var(--n3rd-space-6);
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
 }
 .n3rd-footer-horizon-bright {
   width: 100%;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "./index.css";
-import { ToastProvider } from './chunk-MZO6ECNX.js';
-export { ToastProvider, useToast } from './chunk-MZO6ECNX.js';
+import { ToastProvider } from './chunk-P5L6UDFY.js';
+export { ToastProvider, useToast } from './chunk-P5L6UDFY.js';
 import { getBorderChars } from './chunk-CBVIEAN7.js';
 export { BORDER_CHARS, getBorderChars } from './chunk-CBVIEAN7.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -119,7 +119,7 @@ function Grid({ children, columns = 3, gap = "md", className, style }) {
     gap: GAP_MAP3[gap],
     ...style
   };
-  return /* @__PURE__ */ jsx("div", { className, style: gridStyle, children });
+  return /* @__PURE__ */ jsx("div", { className: `n3rd-grid ${className ?? ""}`, style: gridStyle, children });
 }
 var CHARS = {
   single: "\u2500",
@@ -168,6 +168,7 @@ function Page({ children, maxWidth = "1200px", className, style }) {
     margin: "0 auto",
     padding: "var(--n3rd-space-6) var(--n3rd-space-4)",
     minHeight: "100vh",
+    overflowX: "hidden",
     ...style
   };
   return /* @__PURE__ */ jsx("main", { className, style: pageStyle, children });
@@ -356,6 +357,7 @@ function Table({ columns, rows, border = "single", className, style }) {
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
         "th",
         {
+          scope: "col",
           style: {
             textAlign: "left",
             padding: "var(--n3rd-space-2)",
@@ -845,6 +847,7 @@ function Progress({
       style: progressStyle,
       role: "progressbar",
       "aria-valuenow": value,
+      "aria-valuemin": 0,
       "aria-valuemax": max,
       children: [
         /* @__PURE__ */ jsxs("span", { children: [
@@ -899,6 +902,8 @@ function Typewriter({
   const [displayed, setDisplayed] = useState("");
   const [done, setDone] = useState(false);
   const hasRun = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(() => {
     if (hasRun.current) return;
     hasRun.current = true;
@@ -912,7 +917,7 @@ function Typewriter({
         } else {
           clearInterval(interval);
           setDone(true);
-          onComplete?.();
+          onCompleteRef.current?.();
         }
       }, speed);
     }, delay);
@@ -920,7 +925,7 @@ function Typewriter({
       clearTimeout(timeout);
       clearInterval(interval);
     };
-  }, [text, speed, delay, onComplete]);
+  }, [text, speed, delay]);
   return /* @__PURE__ */ jsxs("span", { className, children: [
     displayed,
     !done && cursor !== false && /* @__PURE__ */ jsx(Cursor, { style: cursor })
@@ -934,7 +939,7 @@ function Scanline({ opacity = 0.03 }) {
     width: "100%",
     height: "100%",
     pointerEvents: "none",
-    zIndex: 9999,
+    zIndex: "var(--n3rd-z-scanline, 9999)",
     background: `repeating-linear-gradient(
       0deg,
       transparent,

package/dist/theme/reset.css

@@ -65,6 +65,17 @@ pre {
   font-family: var(--n3rd-font);
 }
 
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td {
+  padding: 0;
+  text-align: left;
+}
+
 ::selection {
   background: var(--n3rd-accent-purple);
   color: var(--n3rd-bg-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n3rd-ai/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Terminal-first UI framework for Next.js. ASCII everything. Zero images. Pure text.",
   "type": "module",
   "main": "./dist/index.js",