@stevederico/skateboard-ui 5.1.0 → 5.2.3

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+5.2.3
+
+  No border on phones
+
+5.2.2
+
+  Fix CI install
+
+5.2.1
+
+  Publish from CI
+
+5.2.0
+
+  Add live list option
+  Reload stale builds
+  Raise dark contrast
+  Bolder page titles
+
 5.1.0
 
   Add loadLegal option

package/dist/App.js

@@ -112,6 +112,22 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
     validateConstants(constants);
     // Initialize utilities with constants
     initializeUtilities(constants);
+    // A deploy replaces the hashed chunk files. A page opened before it asks
+    // for chunks that are gone ("Importing a module script failed"); reload
+    // once to pick up the new build instead of showing a broken route.
+    window.addEventListener('vite:preloadError', (event) => {
+        event.preventDefault();
+        try {
+            const last = Number(sessionStorage.getItem('skateboard-chunk-reload') || 0);
+            if (Date.now() - last < 10_000)
+                return;
+            sessionStorage.setItem('skateboard-chunk-reload', String(Date.now()));
+        }
+        catch {
+            // Storage can be unavailable (private mode, some web views); reload anyway
+        }
+        window.location.reload();
+    });
     // Prevent theme flash by setting dark class before React hydrates
     // This runs synchronously before render, reading from localStorage or system preference
     const storageKey = 'theme';

package/dist/components/core/Utilities.d.ts

@@ -360,13 +360,24 @@ export declare function apiRequestWithParams<T = any>(endpoint: string, params?:
  * @throws {Error} - If required fields are missing or invalid
  */
 export declare function validateConstants(constants: SkateboardConstants): SkateboardConstants;
+/** Options for {@link useListData}. */
+export interface ListDataOptions {
+    /**
+     * Keep the list fresh: refetch quietly every this many milliseconds while
+     * the page is visible, and again when the user returns to it. `true`
+     * means 60 seconds. Quiet refetches skip the loading state and keep the
+     * last good rows on error, so new items just appear.
+     */
+    live?: boolean | number;
+}
 /**
- * Standard list data fetcher with optional sorting
+ * Standard list data fetcher with optional sorting and live refresh
  * @param {string} endpoint - API endpoint to fetch from
  * @param {function} sortFn - Optional sort function for results
+ * @param {ListDataOptions} options - `live` turns on quiet periodic refetch
  * @returns {object} - { data, loading, error, refetch }
  */
-export declare function useListData<T = any>(endpoint: string, sortFn?: ((a: T, b: T) => number) | null): {
+export declare function useListData<T = any>(endpoint: string, sortFn?: ((a: T, b: T) => number) | null, options?: ListDataOptions): {
     data: T[];
     loading: boolean;
     error: string | null;

package/dist/components/core/Utilities.js

@@ -838,22 +838,24 @@ export function validateConstants(constants) {
     }
     return constants;
 }
-// ===== REACT HOOKS =====
 /**
- * Standard list data fetcher with optional sorting
+ * Standard list data fetcher with optional sorting and live refresh
  * @param {string} endpoint - API endpoint to fetch from
  * @param {function} sortFn - Optional sort function for results
+ * @param {ListDataOptions} options - `live` turns on quiet periodic refetch
  * @returns {object} - { data, loading, error, refetch }
  */
-export function useListData(endpoint, sortFn = null) {
+export function useListData(endpoint, sortFn = null, options = {}) {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     // Keep sortFn in a ref so an inline sort function doesn't retrigger the fetch effect every render
     const sortFnRef = useRef(sortFn);
     sortFnRef.current = sortFn;
-    const fetchData = async (signal) => {
-        setLoading(true);
+    const liveMs = options.live === true ? 60_000 : typeof options.live === 'number' ? options.live : 0;
+    const fetchData = async (signal, quiet = false) => {
+        if (!quiet)
+            setLoading(true);
         try {
             const result = await apiRequest(endpoint, { signal });
             const sort = sortFnRef.current;
@@ -865,17 +867,32 @@ export function useListData(endpoint, sortFn = null) {
             // Ignore abort errors (DOMException in the browser, not an Error)
             if ((err instanceof DOMException || err instanceof Error) && err.name === 'AbortError')
                 return;
-            setError(err instanceof Error ? err.message : String(err));
+            // A failed quiet refresh keeps showing the last good rows
+            if (!quiet)
+                setError(err instanceof Error ? err.message : String(err));
         }
         finally {
-            setLoading(false);
+            if (!quiet)
+                setLoading(false);
         }
     };
     useEffect(() => {
         const controller = new AbortController();
         fetchData(controller.signal);
-        return () => controller.abort();
-    }, [endpoint]);
+        if (liveMs <= 0)
+            return () => controller.abort();
+        const tick = () => {
+            if (document.visibilityState === 'visible')
+                fetchData(controller.signal, true);
+        };
+        const timer = setInterval(tick, liveMs);
+        document.addEventListener('visibilitychange', tick);
+        return () => {
+            controller.abort();
+            clearInterval(timer);
+            document.removeEventListener('visibilitychange', tick);
+        };
+    }, [endpoint, liveMs]);
     return { data, loading, error, refetch: () => fetchData() };
 }
 // ===== UI VISIBILITY CONTROLS =====

package/dist/components/layout/Header.js

@@ -4,6 +4,6 @@ import { Button } from "../../ui/button.js";
 import { Badge } from "../../ui/badge.js";
 import { cn } from "../../shadcn/lib/utils.js";
 function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
-    return (_jsxs(_Fragment, { children: [_jsx("header", { className: cn("flex h-(--header-height) shrink-0 items-center gap-2", className), ...props, children: _jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [_jsx("h1", { className: "text-lg font-medium", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [typeof buttonTitle !== "undefined" && (_jsx(Button, { variant: "ghost", size: "sm", className: buttonClass || "", onClick: onButtonTitleClick, children: buttonTitle })), children] })] }) }), _jsx(Separator, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: cn("flex h-(--header-height) shrink-0 items-center gap-2", className), ...props, children: _jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [_jsx("h1", { className: "text-[1.625rem] leading-8 font-extrabold tracking-tight", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [typeof buttonTitle !== "undefined" && (_jsx(Button, { variant: "ghost", size: "sm", className: buttonClass || "", onClick: onButtonTitleClick, children: buttonTitle })), children] })] }) }), _jsx(Separator, {})] }));
 }
 export default Header;

package/dist/components/layout/Layout.js

@@ -14,5 +14,5 @@ export default function Layout({ children }) {
     return (_jsxs("div", { className: "min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]", children: [_jsx("a", { href: "#main", className: "sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring", children: "Skip to content" }), _jsxs(SidebarProvider, { defaultOpen: !constants.sidebarCollapsed, style: {
                     '--sidebar-width': '12rem',
                     '--header-height': '3.5rem',
-                }, children: [showSidebar && _jsx(Sidebar, { variant: "inset" }), _jsx(SidebarInset, { id: "main", className: `border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`, children: _jsx(Outlet, {}) })] }), showTabBar && _jsx(TabBar, { className: "md:hidden" })] }));
+                }, children: [showSidebar && _jsx(Sidebar, { variant: "inset" }), _jsx(SidebarInset, { id: "main", className: `md:border md:border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`, children: _jsx(Outlet, {}) })] }), showTabBar && _jsx(TabBar, { className: "md:hidden" })] }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "5.1.0",
+  "version": "5.2.3",
   "type": "module",
   "exports": {
     ".": {

package/styles.css

@@ -170,22 +170,22 @@
 .dark {
   --background: oklch(0.05 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.12 0 0);
+  --card: oklch(0.19 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.12 0 0);
+  --popover: oklch(0.19 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.05 0 0);
-  --secondary: oklch(0.18 0 0);
+  --secondary: oklch(0.28 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.18 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.2 0 0);
+  --muted: oklch(0.28 0 0);
+  --muted-foreground: oklch(0.8 0 0);
+  --accent: oklch(0.28 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.32 0 0);
-  --input: oklch(0.30 0 0);
+  --border: oklch(0.5 0 0);
+  --input: oklch(0.5 0 0);
   --ring: oklch(0.439 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -207,22 +207,22 @@
   :root:not(.light) {
     --background: oklch(0.05 0 0);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.12 0 0);
+    --card: oklch(0.19 0 0);
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.12 0 0);
+    --popover: oklch(0.19 0 0);
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.985 0 0);
     --primary-foreground: oklch(0.05 0 0);
-    --secondary: oklch(0.18 0 0);
+    --secondary: oklch(0.28 0 0);
     --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.18 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.2 0 0);
+    --muted: oklch(0.28 0 0);
+    --muted-foreground: oklch(0.8 0 0);
+    --accent: oklch(0.28 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.396 0.141 25.723);
     --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.32 0 0);
-    --input: oklch(0.30 0 0);
+    --border: oklch(0.5 0 0);
+    --input: oklch(0.5 0 0);
     --ring: oklch(0.439 0 0);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);