@pablozaiden/webapp 0.2.1 → 0.2.3

package/docs/sidebar.md

@@ -36,7 +36,7 @@ Sidebar nodes support:
 | `badge` | Status/count label |
 | `defaultCollapsed` | Initial collapsed state |
 
-Search is intentionally app-defined: `getNodes({ search })` receives raw search text and returns the tree that should be rendered.
+Search is intentionally app-defined: `getNodes({ search })` receives raw search text and returns the tree that should be rendered. Set `sidebar.search: false` when an app has a small fixed navigation tree and should not show the sidebar search box.
 
 Use `actions` when an entity needs commands in the sidebar. The same `ActionMenuItem[]` should also be returned from `header.getActions` for that entity route so right-click actions and the title-bar three-line menu stay consistent:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",
@@ -44,11 +44,13 @@
     "@simplewebauthn/browser": "13.3.0",
     "@simplewebauthn/server": "13.3.1",
     "jose": "6.2.3",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
     "tailwindcss": "4.3.1",
     "zod": "4.4.3"
   },
+  "peerDependencies": {
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.10.3",
     "@testing-library/react": "16.3.2",
@@ -56,6 +58,8 @@
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "playwright": "1.61.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "typescript": "6.0.3"
   }
 }

package/src/server/auth/passkeys.ts

@@ -227,14 +227,14 @@ export function passkeyStatus(req: Request, store: WebAppStore, config: RuntimeC
   const users = store.countUsers();
   const owner = store.getOwnerUser();
   const passkeyConfigured = store.listPasskeys().length > 0;
-  const ownerPasskeySetupRequired = users > 0 && Boolean(owner && !owner.passkeyConfigured);
+  const ownerPasskeySetupRequired = enabled && !config.passkeyDisabled && users > 0 && Boolean(owner && !owner.passkeyConfigured);
   return {
     enabled,
     passkeyConfigured,
     passkeyDisabled: config.passkeyDisabled,
     passkeyRequired: enabled && users > 0 && !config.passkeyDisabled,
-    authenticated: !enabled || Boolean(getPasskeySessionUser(req, store, config)),
-    bootstrapRequired: enabled && users === 0,
+    authenticated: !enabled || config.passkeyDisabled || Boolean(getPasskeySessionUser(req, store, config)),
+    bootstrapRequired: enabled && !config.passkeyDisabled && users === 0,
     ownerPasskeySetupRequired,
   };
 }

package/src/server/create-web-app-server.ts

@@ -60,6 +60,9 @@ export interface WebAppServerConfig<TEvent = unknown> {
   realtime?: {
     path?: string;
   };
+  logLevel?: {
+    onChange?: (level: LogLevelName) => void;
+  };
 }
 
 export const WEBAPP_SOCKET_HANDLER = "webappSocketHandler";
@@ -90,6 +93,7 @@ export interface WebAppServer<TEvent = unknown> {
 }
 
 const log = createLogger("webapp:server");
+const LOG_LEVELS = new Set<LogLevelName>(["trace", "debug", "info", "warn", "error"]);
 
 function bearerToken(req: Request): string | undefined {
   const header = req.headers.get("authorization")?.trim();
@@ -177,6 +181,16 @@ function currentUser(auth: AuthenticatedRequestState): CurrentUser | undefined {
   return auth.kind === "anonymous" ? undefined : auth.user;
 }
 
+function toCurrentUserRecord(user: { id: string; username: string; role: "owner" | "admin" | "user" }): CurrentUser {
+  return {
+    id: user.id,
+    username: user.username,
+    role: user.role,
+    isOwner: user.role === "owner",
+    isAdmin: user.role === "owner" || user.role === "admin",
+  };
+}
+
 function requireUser(auth: AuthenticatedRequestState): CurrentUser {
   const user = currentUser(auth);
   if (!user) {
@@ -274,7 +288,9 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
   const store = input.store ?? sqliteWebAppStore({ dataDir: config.dataDir });
   store.initialize();
   const savedLogLevel = store.getLogLevelPreference();
-  setLogLevel(config.logLevelFromEnv ? config.logLevel : savedLogLevel ?? config.logLevel);
+  const activeLogLevel = config.logLevelFromEnv ? config.logLevel : savedLogLevel ?? config.logLevel;
+  setLogLevel(activeLogLevel);
+  input.logLevel?.onChange?.(activeLogLevel);
   const realtime = createRealtimeBus<TEvent>();
   const version = input.version ?? "0.0.0-development";
   const wsPath = input.realtime?.path ?? "/api/ws";
@@ -285,6 +301,16 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
   const apiKeysEnabled = input.auth?.apiKeys ?? false;
   const deviceAuthEnabled = input.auth?.deviceAuth ?? false;
 
+  function disabledAuthOwner(): CurrentUser {
+    const existing = store.getOwnerUser();
+    if (existing) {
+      return toCurrentUserRecord(existing);
+    }
+    const owner = createUserRecord({ username: "admin", role: "owner" });
+    store.createUser(owner);
+    return toCurrentUserRecord(owner);
+  }
+
   async function authorize(req: Request, required: boolean): Promise<AuthenticatedRequestState | Response> {
     const token = bearerToken(req);
     if (token) {
@@ -314,6 +340,9 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
       return errorResponse(401, "invalid_token", "Bearer token is invalid");
     }
     if (passkeysEnabled) {
+      if (config.passkeyDisabled) {
+        return { kind: "passkey", user: disabledAuthOwner() };
+      }
       const user = getPasskeySessionUser(req, store, config);
       if (user) {
         return { kind: "passkey", user };
@@ -327,11 +356,16 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
         }) : { kind: "anonymous" };
       }
     }
+    if (required && passkeysEnabled && !config.passkeyDisabled && store.countUsers() === 0) {
+      return errorResponse(401, "authentication_required", "Passkey authentication is required", undefined, {
+        headers: { "x-webapp-passkey-required": "true" },
+      });
+    }
     return { kind: "anonymous" };
   }
 
   function configResponse(req: Request): WebAppConfigResponse {
-    const user = passkeysEnabled ? getPasskeySessionUser(req, store, config) : undefined;
+    const user = passkeysEnabled && config.passkeyDisabled ? disabledAuthOwner() : passkeysEnabled ? getPasskeySessionUser(req, store, config) : undefined;
     return {
       appName: config.appName,
       version,
@@ -637,8 +671,12 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
           if (originFailure) return originFailure;
           if (config.logLevelFromEnv) return errorResponse(409, "log_level_from_env", "Log level is controlled by environment");
           const body = await parseJson<{ level: LogLevelName }>(req);
+          if (!LOG_LEVELS.has(body.level)) {
+            return errorResponse(400, "invalid_log_level", "Log level must be one of trace, debug, info, warn, error");
+          }
           store.setLogLevelPreference(body.level);
           setLogLevel(body.level);
+          input.logLevel?.onChange?.(body.level);
           return successResponse({ level: body.level });
         }
       }
@@ -776,10 +814,12 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
 
   function start(): Server<WebAppWebSocketData> {
     const dynamicHandler = (req: Request, server: Server<WebAppWebSocketData>) => handleRequest(req, server);
+    const publicRouteHandlers = Object.fromEntries(Object.keys(publicRoutes).map((path) => [path, dynamicHandler]));
     const server = Bun.serve<WebAppWebSocketData>({
       hostname: config.host,
       port: config.port,
       routes: {
+        ...publicRouteHandlers,
         "/api/*": dynamicHandler,
         "/.well-known/*": dynamicHandler,
         "/device": deviceAuthEnabled && !canRespondWithIndex(input.index) ? input.index as never : dynamicHandler,

package/src/web/WebAppRoot.tsx

@@ -40,6 +40,7 @@ export interface WebAppRootProps {
   appName: string;
   homeRoute: WebAppRoute;
   sidebar: {
+    search?: boolean;
     topActions?: SidebarAction[];
     pinning?: false | {
       sectionTitle?: string;
@@ -876,10 +877,11 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
   const [search, setSearch] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const sidebarSearchEnabled = sidebar.search !== false;
   const pinningEnabled = sidebar.pinning !== false;
   const sidebarPins = useSidebarPins(appName, sidebar.pinning ? sidebar.pinning.storageKey : undefined);
   const baseNodes = useMemo(() => sidebar.getNodes({ search: "" }), [sidebar]);
-  const filteredNodes = useMemo(() => sidebar.getNodes({ search }), [sidebar, search]);
+  const filteredNodes = useMemo(() => sidebar.getNodes({ search: sidebarSearchEnabled ? search : "" }), [sidebar, search, sidebarSearchEnabled]);
   const allPinnableItems = useMemo(() => flattenSidebarItems(baseNodes).filter((node) => node.pinnable && node.route), [baseNodes]);
   const currentPins = useMemo(() => {
     const byId = new Map(allPinnableItems.map((node) => [node.pinId ?? node.id, node]));
@@ -907,7 +909,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
   }), [pinningActionFor]);
   const nodes = useMemo(() => {
     const augmented = augmentPinningActions(filteredNodes);
-    if (!pinningEnabled || search.trim() || currentPins.length === 0) return augmented;
+    if (!pinningEnabled || (sidebarSearchEnabled && search.trim()) || currentPins.length === 0) return augmented;
     const augmentedByPinId = new Map(flattenSidebarItems(augmentPinningActions(baseNodes)).map((node) => [node.pinId ?? node.id, node]));
     const pinnedChildren = currentPins.map((pin) => ({
       ...(augmentedByPinId.get(pin.id) ?? {
@@ -927,7 +929,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
       { type: "section" as const, id: "framework:pinned", title: sidebar.pinning ? sidebar.pinning.sectionTitle ?? "Pinned" : "Pinned", children: pinnedChildren },
       ...augmented,
     ];
-  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, search, sidebar.pinning]);
+  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, search, sidebar.pinning, sidebarSearchEnabled]);
 
   useEffect(() => {
     if (!config?.currentUser) return;
@@ -988,7 +990,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, settin
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
-          <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search" /></label>
+          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search" /></label> : null}
           <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} />
         </div>
         <div className="wapp-sidebar-footer">v{effectiveVersion}<button type="button" aria-label="Reload" onClick={() => window.location.reload()}><Icon name="refresh" /></button></div>

package/src/web/index.ts

@@ -4,4 +4,5 @@ export * from "./render";
 export * from "./api-client";
 export * from "./sidebar/types";
 export * from "./realtime/useRealtime";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 export type { ThemePreference } from "../contracts";

package/src/web/styles.css

@@ -725,6 +725,7 @@ textarea::placeholder {
   font-size: 0.875rem;
   font-weight: 600;
   padding: 0.5rem 0.875rem;
+  white-space: nowrap;
   transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
 }
 
@@ -978,6 +979,10 @@ textarea::placeholder {
   gap: 0.5rem;
 }
 
+.wapp-settings .wapp-row-actions {
+  flex: 0 0 auto;
+}
+
 .wapp-danger-zone {
   display: flex;
   align-items: flex-start;
@@ -1156,6 +1161,10 @@ textarea::placeholder {
   padding: 0.75rem;
 }
 
+.wapp-list-row > span {
+  min-width: 0;
+}
+
 .wapp-grid-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1395,3 +1404,21 @@ textarea::placeholder {
     margin-top: 0.75rem;
   }
 }
+
+@media (max-width: 640px) {
+  .wapp-settings .wapp-list-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: 0.75rem;
+  }
+
+  .wapp-settings .wapp-list-row .wapp-row-actions {
+    justify-content: flex-start;
+    margin-top: 0;
+  }
+
+  .wapp-settings .wapp-row-actions .wapp-inline-select {
+    max-width: 100%;
+  }
+}