snice 3.4.1 → 3.6.0

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

@@ -5,10 +5,19 @@
 }
 
 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;
+  font-family: var(--snice-font-family);
+  background: var(--snice-color-background);
+  color: var(--snice-color-text);
+  line-height: var(--snice-line-height-normal);
+}
+
+/* Override component backgrounds to respect dark mode */
+snice-card {
+  --card-bg: var(--snice-color-background-element);
+}
+
+snice-layout-sidebar {
+  --sidebar-bg: var(--snice-color-background-secondary);
 }
 
 #app {
@@ -16,14 +25,14 @@ body {
 }
 
 .post {
-  margin-bottom: 1rem;
+  margin-bottom: var(--snice-spacing-md);
 }
 
 .post-header {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: var(--snice-spacing-md);
+  margin-bottom: var(--snice-spacing-md);
 }
 
 .post-author {
@@ -32,65 +41,65 @@ body {
 }
 
 .post-name {
-  font-weight: 600;
-  color: var(--text-color);
+  font-weight: var(--snice-font-weight-semibold);
+  color: var(--snice-color-text);
 }
 
 .post-time {
-  font-size: 0.875rem;
-  color: var(--text-light, #666);
+  font-size: var(--snice-font-size-sm);
+  color: var(--snice-color-text-secondary);
 }
 
 .post-content {
-  margin-bottom: 1rem;
-  line-height: 1.6;
+  margin-bottom: var(--snice-spacing-md);
+  line-height: var(--snice-line-height-loose);
 }
 
 .post-actions {
   display: flex;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color, #e0e0e0);
+  gap: var(--snice-spacing-md);
+  padding-top: var(--snice-spacing-md);
+  border-top: 1px solid var(--snice-color-border);
 }
 
 .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;
+  padding: var(--snice-spacing-2xl);
+  background: linear-gradient(135deg, var(--snice-color-primary) 0%, var(--snice-color-primary-hover) 100%);
+  color: var(--snice-color-text-inverse);
+  border-radius: var(--snice-border-radius-xl) var(--snice-border-radius-xl) 0 0;
+  margin-bottom: var(--snice-spacing-2xl);
 }
 
 .profile-name {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-top: 1rem;
+  font-size: var(--snice-font-size-2xl);
+  font-weight: var(--snice-font-weight-semibold);
+  margin-top: var(--snice-spacing-md);
 }
 
 .profile-bio {
-  margin-top: 0.5rem;
+  margin-top: var(--snice-spacing-xs);
   opacity: 0.9;
 }
 
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
+  gap: var(--snice-spacing-md);
+  margin-bottom: var(--snice-spacing-2xl);
 }
 
 .message-item {
   display: flex;
-  gap: 1rem;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  gap: var(--snice-spacing-md);
+  padding: var(--snice-spacing-md);
+  border-bottom: 1px solid var(--snice-color-border);
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background var(--snice-transition-fast);
 }
 
 .message-item:hover {
-  background: var(--background-hover, #f9f9f9);
+  background: var(--snice-color-background-secondary);
 }
 
 .message-content {
@@ -98,50 +107,50 @@ body {
 }
 
 .message-name {
-  font-weight: 600;
-  margin-bottom: 0.25rem;
+  font-weight: var(--snice-font-weight-semibold);
+  margin-bottom: var(--snice-spacing-2xs);
 }
 
 .message-preview {
-  font-size: 0.875rem;
-  color: var(--text-light, #666);
+  font-size: var(--snice-font-size-sm);
+  color: var(--snice-color-text-secondary);
 }
 
 .settings-section {
-  margin-bottom: 2rem;
+  margin-bottom: var(--snice-spacing-2xl);
 }
 
 .settings-section h2 {
-  font-size: 1.25rem;
-  margin-bottom: 1rem;
-  color: var(--text-color);
+  font-size: var(--snice-font-size-xl);
+  margin-bottom: var(--snice-spacing-md);
+  color: var(--snice-color-text);
 }
 
 .settings-group {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--snice-spacing-md);
 }
 
 .setting-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 0;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  padding: var(--snice-spacing-md) 0;
+  border-bottom: 1px solid var(--snice-color-border);
 }
 
 .setting-label {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--snice-spacing-2xs);
 }
 
 .setting-title {
-  font-weight: 500;
+  font-weight: var(--snice-font-weight-medium);
 }
 
 .setting-description {
-  font-size: 0.875rem;
-  color: var(--text-light, #666);
+  font-size: var(--snice-font-size-sm);
+  color: var(--snice-color-text-secondary);
 }

package/dist/components/audio-recorder/snice-audio-recorder.d.ts

@@ -7,6 +7,7 @@ export declare class SniceAudioRecorder extends HTMLElement implements SniceAudi
     showVisualizer: boolean;
     maxDuration: number;
     showTimer: boolean;
+    showPlayback: boolean;
     private mediaRecorder;
     private stream;
     private audioChunks;
@@ -20,10 +21,15 @@ export declare class SniceAudioRecorder extends HTMLElement implements SniceAudi
     private analyser;
     private visualizerData;
     private animationFrame;
-    private recordedUrl;
+    recordedUrl: string;
+    private isPlaying;
+    private playbackTime;
+    private audioElement;
+    private playbackInterval;
+    private timerElement?;
     styles(): import("snice").CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    init(): void;
+    cleanup(): void;
     render(): import("snice").TemplateResult;
     private renderVisualizer;
     private renderControls;
@@ -39,11 +45,15 @@ export declare class SniceAudioRecorder extends HTMLElement implements SniceAudi
     getDuration(): number;
     isRecording(): boolean;
     download(filename?: string): void;
+    reset(): void;
+    handleTogglePlayback(): void;
+    private stopPlayback;
+    handleSeek(e: MouseEvent): void;
     private handleRecordingComplete;
     private startTimer;
     private stopTimer;
     private updateVisualizer;
-    private cleanup;
+    private cleanupMedia;
     private emitRecorderStart;
     private emitRecorderError;
     private emitRecorderPause;