@nuraly/lumenjs 0.1.3 → 0.2.0

package/templates/dashboard/pages/index.ts

@@ -1,41 +1,72 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { useDb } from '@nuraly/lumenjs/db';
 
-export function loader() {
-  const db = useDb();
-  const stats = db.all('SELECT id, label, value, unit, updated_at FROM stats ORDER BY id');
-  return { stats };
+export async function loader() {
+  return {
+    stats: [
+      { label: 'Users', value: '1,234' },
+      { label: 'Revenue', value: '$12,345' },
+      { label: 'Orders', value: '567' },
+      { label: 'Conversion', value: '3.2%' },
+    ],
+  };
 }
 
-@customElement('page-dashboard')
-export class PageDashboard extends LitElement {
-  @property({ type: Object }) data: any;
+let tick = 0;
+
+export function subscribe({ push }: { push: (data: any) => void }) {
+  const interval = setInterval(() => {
+    tick++;
+    push({
+      stats: [
+        { label: 'Users', value: (1234 + tick * 3).toLocaleString() },
+        { label: 'Revenue', value: '$' + (12345 + tick * 47).toLocaleString() },
+        { label: 'Orders', value: (567 + tick).toLocaleString() },
+        { label: 'Conversion', value: (3.2 + Math.sin(tick / 5) * 0.5).toFixed(1) + '%' },
+      ],
+      updatedAt: new Date().toISOString(),
+    });
+  }, 2000);
+  return () => clearInterval(interval);
+}
+
+export class PageIndex extends LitElement {
+  static properties = {
+    loaderData: { type: Object },
+    liveData: { type: Object },
+  };
+  loaderData: any = {};
+  liveData: any = null;
 
   static styles = css`
-    :host { display: block; max-width: 960px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif; }
-    h1 { font-size: 2rem; margin-bottom: 1.5rem; }
+    :host { display: block; }
+    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
     .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
-    .card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
-    .card .label { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem; }
-    .card .value { font-size: 1.75rem; font-weight: 600; color: #111827; }
-    .card .unit { font-size: 0.75rem; color: #9ca3af; margin-left: 0.25rem; }
+    .card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.2s; }
+    .card.live { box-shadow: 0 0 0 2px rgba(124,58,237,0.3), 0 1px 3px rgba(0,0,0,0.08); }
+    .card-label { font-size: 0.875rem; color: #64748b; }
+    .card-value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; }
+    .status { font-size: 0.75rem; color: #94a3b8; margin-top: 1.5rem; }
+    .status .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 0.375rem; vertical-align: middle; }
   `;
 
   render() {
-    const stats = this.data?.stats || [];
+    const stats = this.liveData?.stats || this.loaderData.stats || [];
+    const isLive = !!this.liveData;
     return html`
-      <h1>Dashboard</h1>
+      <h1>Overview</h1>
       <div class="grid">
-        ${stats.map((stat: any) => html`
-          <div class="card">
-            <div class="label">${stat.label}</div>
-            <div class="value">
-              ${stat.value}<span class="unit">${stat.unit}</span>
-            </div>
+        ${stats.map((s: any) => html`
+          <div class="card ${isLive ? 'live' : ''}">
+            <div class="card-label">${s.label}</div>
+            <div class="card-value">${s.value}</div>
           </div>
         `)}
       </div>
+      ${isLive ? html`
+        <div class="status">
+          <span class="dot"></span>Live — updated ${this.liveData.updatedAt ? new Date(this.liveData.updatedAt).toLocaleTimeString() : ''}
+        </div>
+      ` : ''}
     `;
   }
 }

package/templates/dashboard/pages/settings/index.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from 'lit';
+
+export class PageSettings extends LitElement {
+  static properties = { name: { type: String } };
+  name = '';
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
+    .form-group { margin-bottom: 1rem; }
+    label { display: block; font-size: 0.875rem; color: #64748b; margin-bottom: 0.375rem; }
+    input { width: 100%; max-width: 400px; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.875rem; }
+    input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
+    button { background: #7c3aed; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem; }
+    button:hover { background: #6d28d9; }
+  `;
+
+  render() {
+    return html`
+      <h1>Settings</h1>
+      <div class="form-group">
+        <label>Display Name</label>
+        <input type="text" placeholder="Enter your name" .value=${this.name}
+          @input=${(e: Event) => this.name = (e.target as HTMLInputElement).value} />
+      </div>
+      <button @click=${() => alert(`Saved: ${this.name}`)}>Save</button>
+    `;
+  }
+}

package/templates/default/lumenjs.config.ts

@@ -0,0 +1,3 @@
+export default {
+  title: '{{PROJECT_NAME}}',
+};

package/templates/default/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "lumenjs dev",
+    "build": "lumenjs build",
+    "serve": "lumenjs serve"
+  },
+  "dependencies": {
+    "@nuraly/lumenjs": "^0.1.3",
+    "lit": "^3.1.0"
+  }
+}

package/templates/default/pages/index.ts

@@ -0,0 +1,24 @@
+import { LitElement, html, css } from 'lit';
+
+export async function loader() {
+  return { title: 'Welcome to LumenJS' };
+}
+
+export class PageIndex extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; max-width: 640px; margin: 0 auto; padding: 2rem; font-family: system-ui; }
+    h1 { color: #7c3aed; margin-bottom: 0.5rem; }
+    p { color: #64748b; line-height: 1.6; }
+    a { color: #7c3aed; }
+  `;
+
+  render() {
+    return html`
+      <h1>${this.loaderData.title}</h1>
+      <p>Edit <code>pages/index.ts</code> to get started.</p>
+    `;
+  }
+}