snice 3.3.0 → 3.4.0

package/bin/templates/social/src/pages/feed-page.ts

@@ -0,0 +1,111 @@
+import { page } from '../router';
+import { render, styles, html, css } from 'snice';
+import type { Placard } from 'snice';
+
+const placard: Placard = {
+  name: 'feed',
+  title: 'Feed',
+  icon: '🏠',
+  show: true,
+  order: 1
+};
+
+@page({ tag: 'feed-page', routes: ['/'], placard })
+export class FeedPage extends HTMLElement {
+  @render()
+  renderContent() {
+    return html/*html*/`
+      <div class="container">
+        <h1>Your Feed</h1>
+
+        <snice-card class="post">
+          <div class="post-header">
+            <snice-avatar
+              name="Sarah Chen"
+              size="48"
+              src="https://i.pravatar.cc/150?img=1">
+            </snice-avatar>
+            <div class="post-author">
+              <span class="post-name">Sarah Chen</span>
+              <span class="post-time">2 hours ago</span>
+            </div>
+            <snice-badge variant="success">Following</snice-badge>
+          </div>
+          <div class="post-content">
+            Just launched our new product! 🚀 Check it out and let me know what you think.
+            Really excited to share this with the community.
+          </div>
+          <div class="post-actions">
+            <snice-button variant="text" size="small">👍 Like (24)</snice-button>
+            <snice-button variant="text" size="small">💬 Comment (5)</snice-button>
+            <snice-button variant="text" size="small">🔗 Share</snice-button>
+          </div>
+        </snice-card>
+
+        <snice-card class="post">
+          <div class="post-header">
+            <snice-avatar
+              name="Mike Johnson"
+              size="48"
+              src="https://i.pravatar.cc/150?img=12">
+            </snice-avatar>
+            <div class="post-author">
+              <span class="post-name">Mike Johnson</span>
+              <span class="post-time">5 hours ago</span>
+            </div>
+            <snice-badge variant="primary">Developer</snice-badge>
+          </div>
+          <div class="post-content">
+            Working on a new open source project. Looking for contributors!
+            If you're interested in web components, reach out.
+          </div>
+          <div class="post-actions">
+            <snice-button variant="text" size="small">👍 Like (42)</snice-button>
+            <snice-button variant="text" size="small">💬 Comment (12)</snice-button>
+            <snice-button variant="text" size="small">🔗 Share</snice-button>
+          </div>
+        </snice-card>
+
+        <snice-card class="post">
+          <div class="post-header">
+            <snice-avatar
+              name="Emma Davis"
+              size="48"
+              src="https://i.pravatar.cc/150?img=5">
+            </snice-avatar>
+            <div class="post-author">
+              <span class="post-name">Emma Davis</span>
+              <span class="post-time">1 day ago</span>
+            </div>
+            <snice-badge variant="warning">Designer</snice-badge>
+          </div>
+          <div class="post-content">
+            New design system is live! 🎨 We've updated our color palette and typography.
+            Feedback welcome!
+          </div>
+          <div class="post-actions">
+            <snice-button variant="text" size="small">👍 Like (67)</snice-button>
+            <snice-button variant="text" size="small">💬 Comment (18)</snice-button>
+            <snice-button variant="text" size="small">🔗 Share</snice-button>
+          </div>
+        </snice-card>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css/*css*/`
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+      }
+
+      h1 {
+        margin-bottom: 2rem;
+        color: var(--text-color);
+      }
+    `;
+  }
+}

package/bin/templates/social/src/pages/messages-page.ts

@@ -0,0 +1,102 @@
+import { page } from '../router';
+import { render, styles, html, css } from 'snice';
+import type { Placard } from 'snice';
+
+const placard: Placard = {
+  name: 'messages',
+  title: 'Messages',
+  icon: '💬',
+  show: true,
+  order: 3
+};
+
+@page({ tag: 'messages-page', routes: ['/messages'], placard })
+export class MessagesPage extends HTMLElement {
+  @render()
+  renderContent() {
+    return html/*html*/`
+      <div class="container">
+        <h1>Messages</h1>
+
+        <snice-card>
+          <div class="message-item">
+            <snice-avatar
+              name="Sarah Chen"
+              size="48"
+              src="https://i.pravatar.cc/150?img=1">
+            </snice-avatar>
+            <div class="message-content">
+              <div class="message-name">Sarah Chen</div>
+              <div class="message-preview">Thanks for the feedback! Let's discuss...</div>
+            </div>
+            <snice-badge variant="primary">2</snice-badge>
+          </div>
+
+          <div class="message-item">
+            <snice-avatar
+              name="Mike Johnson"
+              size="48"
+              src="https://i.pravatar.cc/150?img=12">
+            </snice-avatar>
+            <div class="message-content">
+              <div class="message-name">Mike Johnson</div>
+              <div class="message-preview">Can we schedule a call tomorrow?</div>
+            </div>
+          </div>
+
+          <div class="message-item">
+            <snice-avatar
+              name="Emma Davis"
+              size="48"
+              src="https://i.pravatar.cc/150?img=5">
+            </snice-avatar>
+            <div class="message-content">
+              <div class="message-name">Emma Davis</div>
+              <div class="message-preview">The new designs look great! 🎨</div>
+            </div>
+          </div>
+
+          <div class="message-item">
+            <snice-avatar
+              name="John Smith"
+              size="48"
+              src="https://i.pravatar.cc/150?img=13">
+            </snice-avatar>
+            <div class="message-content">
+              <div class="message-name">John Smith</div>
+              <div class="message-preview">Meeting confirmed for 3pm</div>
+            </div>
+          </div>
+
+          <div class="message-item">
+            <snice-avatar
+              name="Lisa Brown"
+              size="48"
+              src="https://i.pravatar.cc/150?img=9">
+            </snice-avatar>
+            <div class="message-content">
+              <div class="message-name">Lisa Brown</div>
+              <div class="message-preview">Thanks for your help!</div>
+            </div>
+          </div>
+        </snice-card>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css/*css*/`
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+      }
+
+      h1 {
+        margin-bottom: 2rem;
+        color: var(--text-color);
+      }
+    `;
+  }
+}

package/bin/templates/social/src/pages/not-found-page.ts

@@ -0,0 +1,46 @@
+import { page } from '../router';
+import { render, styles, html, css } from 'snice';
+
+@page({ tag: 'not-found-page', routes: ['/404'] })
+export class NotFoundPage extends HTMLElement {
+  @render()
+  renderContent() {
+    return html/*html*/`
+      <div class="container">
+        <h1>404</h1>
+        <p>Page not found</p>
+        <snice-button variant="primary">
+          <a href="#/" style="color: inherit; text-decoration: none;">Go Home</a>
+        </snice-button>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css/*css*/`
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 60vh;
+        text-align: center;
+        padding: 2rem;
+      }
+
+      h1 {
+        font-size: 6rem;
+        font-weight: bold;
+        color: var(--primary-color);
+        margin-bottom: 1rem;
+      }
+
+      p {
+        font-size: 1.5rem;
+        color: var(--text-light);
+        margin-bottom: 2rem;
+      }
+    `;
+  }
+}

package/bin/templates/social/src/pages/profile-page.ts

@@ -0,0 +1,99 @@
+import { page } from '../router';
+import { render, styles, html, css } from 'snice';
+import type { Placard } from 'snice';
+
+const placard: Placard = {
+  name: 'profile',
+  title: 'Profile',
+  icon: '👤',
+  show: true,
+  order: 2
+};
+
+@page({ tag: 'profile-page', routes: ['/profile'], placard })
+export class ProfilePage extends HTMLElement {
+  @render()
+  renderContent() {
+    return html/*html*/`
+      <div class="container">
+        <snice-card>
+          <div class="profile-header">
+            <snice-avatar
+              name="Alex Morgan"
+              size="120"
+              src="https://i.pravatar.cc/150?img=8">
+            </snice-avatar>
+            <h1 class="profile-name">Alex Morgan</h1>
+            <p class="profile-bio">Full-stack developer | Web components enthusiast | Coffee addict ☕</p>
+          </div>
+
+          <div class="stats-grid">
+            <snice-stat
+              label="Posts"
+              value="142">
+            </snice-stat>
+            <snice-stat
+              label="Followers"
+              value="1.2k">
+            </snice-stat>
+            <snice-stat
+              label="Following"
+              value="384">
+            </snice-stat>
+          </div>
+
+          <snice-tabs>
+            <snice-tab slot="tab" panel="posts" active>Posts</snice-tab>
+            <snice-tab slot="tab" panel="about">About</snice-tab>
+            <snice-tab slot="tab" panel="activity">Activity</snice-tab>
+
+            <snice-tab-panel slot="panel" name="posts">
+              <div style="padding: 1rem;">
+                <p>Your recent posts will appear here.</p>
+                <br>
+                <snice-button variant="primary">Create Post</snice-button>
+              </div>
+            </snice-tab-panel>
+
+            <snice-tab-panel slot="panel" name="about">
+              <div style="padding: 1rem;">
+                <h3>About Me</h3>
+                <p style="margin-top: 1rem;">
+                  Passionate about building modern web applications with
+                  cutting-edge technologies. Love sharing knowledge and
+                  collaborating with the community.
+                </p>
+                <br>
+                <h3>Skills</h3>
+                <div style="display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap;">
+                  <snice-badge>JavaScript</snice-badge>
+                  <snice-badge>TypeScript</snice-badge>
+                  <snice-badge>Web Components</snice-badge>
+                  <snice-badge>CSS</snice-badge>
+                  <snice-badge>Node.js</snice-badge>
+                </div>
+              </div>
+            </snice-tab-panel>
+
+            <snice-tab-panel slot="panel" name="activity">
+              <div style="padding: 1rem;">
+                <p>Recent activity will be shown here.</p>
+              </div>
+            </snice-tab-panel>
+          </snice-tabs>
+        </snice-card>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css/*css*/`
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+      }
+    `;
+  }
+}

package/bin/templates/social/src/pages/settings-page.ts

@@ -0,0 +1,119 @@
+import { page } from '../router';
+import { render, styles, html, css } from 'snice';
+import type { Placard } from 'snice';
+
+const placard: Placard = {
+  name: 'settings',
+  title: 'Settings',
+  icon: '⚙️',
+  show: true,
+  order: 4
+};
+
+@page({ tag: 'settings-page', routes: ['/settings'], placard })
+export class SettingsPage extends HTMLElement {
+  @render()
+  renderContent() {
+    return html/*html*/`
+      <div class="container">
+        <h1>Settings</h1>
+
+        <snice-card class="settings-section">
+          <h2>Profile Settings</h2>
+          <div class="settings-group">
+            <snice-input
+              label="Display Name"
+              value="Alex Morgan"
+              placeholder="Enter your name">
+            </snice-input>
+
+            <snice-input
+              label="Email"
+              type="email"
+              value="alex.morgan@example.com"
+              placeholder="Enter your email">
+            </snice-input>
+
+            <snice-textarea
+              label="Bio"
+              value="Full-stack developer | Web components enthusiast"
+              placeholder="Tell us about yourself"
+              rows="4">
+            </snice-textarea>
+          </div>
+        </snice-card>
+
+        <snice-card class="settings-section">
+          <h2>Notifications</h2>
+          <div class="settings-group">
+            <div class="setting-item">
+              <div class="setting-label">
+                <span class="setting-title">Email Notifications</span>
+                <span class="setting-description">Receive email updates about your activity</span>
+              </div>
+              <snice-switch checked></snice-switch>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-label">
+                <span class="setting-title">Push Notifications</span>
+                <span class="setting-description">Receive push notifications on your device</span>
+              </div>
+              <snice-switch checked></snice-switch>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-label">
+                <span class="setting-title">Weekly Digest</span>
+                <span class="setting-description">Get a weekly summary of your activity</span>
+              </div>
+              <snice-switch></snice-switch>
+            </div>
+          </div>
+        </snice-card>
+
+        <snice-card class="settings-section">
+          <h2>Privacy</h2>
+          <div class="settings-group">
+            <div class="setting-item">
+              <div class="setting-label">
+                <span class="setting-title">Private Profile</span>
+                <span class="setting-description">Make your profile visible to followers only</span>
+              </div>
+              <snice-switch></snice-switch>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-label">
+                <span class="setting-title">Show Activity Status</span>
+                <span class="setting-description">Let others see when you're online</span>
+              </div>
+              <snice-switch checked></snice-switch>
+            </div>
+          </div>
+        </snice-card>
+
+        <div style="display: flex; gap: 1rem;">
+          <snice-button variant="primary">Save Changes</snice-button>
+          <snice-button variant="secondary">Cancel</snice-button>
+        </div>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css/*css*/`
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+      }
+
+      h1 {
+        margin-bottom: 2rem;
+        color: var(--text-color);
+      }
+    `;
+  }
+}

package/bin/templates/social/src/router.ts

@@ -0,0 +1,9 @@
+import { Router } from 'snice';
+
+const { page, initialize, navigate } = Router({
+  target: '#app',
+  type: 'hash',
+  layout: 'snice-layout-sidebar',
+});
+
+export { page, initialize, navigate };

package/bin/templates/social/src/styles/global.css

@@ -0,0 +1,147 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--background-color, #f5f5f5);
+  color: var(--text-color, #333);
+  line-height: 1.5;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+.post {
+  margin-bottom: 1rem;
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.post-author {
+  display: flex;
+  flex-direction: column;
+}
+
+.post-name {
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.post-time {
+  font-size: 0.875rem;
+  color: var(--text-light, #666);
+}
+
+.post-content {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.post-actions {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.profile-header {
+  text-align: center;
+  padding: 2rem;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: white;
+  border-radius: 12px 12px 0 0;
+  margin-bottom: 2rem;
+}
+
+.profile-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 1rem;
+}
+
+.profile-bio {
+  margin-top: 0.5rem;
+  opacity: 0.9;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.message-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.message-item:hover {
+  background: var(--background-hover, #f9f9f9);
+}
+
+.message-content {
+  flex: 1;
+}
+
+.message-name {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.message-preview {
+  font-size: 0.875rem;
+  color: var(--text-light, #666);
+}
+
+.settings-section {
+  margin-bottom: 2rem;
+}
+
+.settings-section h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--text-color);
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.setting-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.setting-title {
+  font-weight: 500;
+}
+
+.setting-description {
+  font-size: 0.875rem;
+  color: var(--text-light, #666);
+}

package/bin/templates/social/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": false,
+    "emitDecoratorMetadata": false,
+    "useDefineForClassFields": false,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src"]
+}

package/bin/templates/social/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import swc from 'unplugin-swc';
+
+export default defineConfig({
+  plugins: [
+    swc.vite({
+      jsc: {
+        parser: {
+          syntax: 'typescript',
+          decorators: true,
+        },
+        target: 'es2022',
+        transform: {
+          decoratorMetadata: false,
+          decoratorVersion: '2022-03',
+          useDefineForClassFields: false,
+        },
+      },
+    }),
+  ],
+  build: {
+    target: 'es2015',
+    minify: 'terser',
+    cssMinify: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['snice']
+        }
+      }
+    },
+    sourcemap: true,
+    chunkSizeWarningLimit: 500
+  },
+  esbuild: {
+    drop: process.env.NODE_ENV === 'production' ? ['debugger'] : []
+  }
+});