@pablozaiden/webapp 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/components/index.tsx

@@ -30,6 +30,10 @@ export function Badge({ variant = "default", className = "", children, ...props
   return <span {...props} className={`wapp-badge wapp-badge-${variant} ${className}`}>{children}</span>;
 }
 
+export function Page({ className = "", children, ...props }: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return <div {...props} className={`wapp-page ${className}`}>{children}</div>;
+}
+
 export function Panel({ title, description, actions, children, className = "" }: { title?: string; description?: string; actions?: ReactNode; children?: ReactNode; className?: string }) {
   return (
     <section className={`wapp-panel ${className}`}>

package/src/web/styles.css

@@ -1,6 +1,6 @@
 :root {
   color-scheme: light;
-  --wapp-bg: #f3f4f6;
+  --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(249 250 251 / 0.95);
   --wapp-surface: #ffffff;
   --wapp-surface-muted: #f9fafb;
@@ -18,7 +18,7 @@
 
 :root.dark {
   color-scheme: dark;
-  --wapp-bg: #0a0a0a;
+  --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(23 23 23 / 0.95);
   --wapp-surface: #262626;
   --wapp-surface-muted: #171717;
@@ -550,6 +550,12 @@ textarea::placeholder {
   min-height: 0;
   overflow: auto;
   overflow-x: hidden;
+  padding: 0;
+}
+
+.wapp-page {
+  width: 100%;
+  min-width: 0;
   padding: 1.5rem 2rem 2rem;
 }
 
@@ -1765,11 +1771,14 @@ textarea::placeholder {
   }
 
   .wapp-main-content {
-    padding: 1rem;
     overflow: auto;
     overflow-x: hidden;
   }
 
+  .wapp-page {
+    padding: 1rem;
+  }
+
   .wapp-panel-header,
   .wapp-entity-header {
     flex-wrap: wrap;