@geenius/feedback 0.1.0

package/packages/react-css/src/components/index.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+import type { FeedbackItem, FeedbackType, FeedbackStatus, FeedbackPriority, NPSResponse } from '@geenius-feedback/shared'
+import { STATUS_CONFIG, PRIORITY_CONFIG, TYPE_CONFIG, FEEDBACK_TYPES, formatRelativeTime, calcNPSStats, getNPSCategory } from '@geenius-feedback/shared'
+import type { RuleOperator } from '@geenius-feedback/shared'
+
+export function StatusBadge({ status }: { status: FeedbackStatus }) {
+  return <span className={`feedback__status-badge feedback__status-badge--${status}`}>{STATUS_CONFIG[status].emoji} {STATUS_CONFIG[status].label}</span>
+}
+
+export function PriorityBadge({ priority }: { priority: FeedbackPriority }) {
+  return <span className={`feedback__priority-badge feedback__priority-badge--${priority}`}>{PRIORITY_CONFIG[priority].label}</span>
+}
+
+export function TypeBadge({ type }: { type: FeedbackType }) {
+  return <span className={`feedback__type-badge feedback__type-badge--${type}`}>{TYPE_CONFIG[type].icon} {TYPE_CONFIG[type].label}</span>
+}
+
+export function FeedbackCard({ item, onVote, hasVoted, onClick }: { item: FeedbackItem; onVote?: (id: string) => void; hasVoted?: boolean; onClick?: (id: string) => void }) {
+  return (
+    <div className={`feedback__card feedback__card--${item.type}`} onClick={() => onClick?.(item.id)}>
+      {onVote && (
+        <button type="button" className={`feedback__vote-btn ${hasVoted ? 'feedback__vote-btn--active' : 'feedback__vote-btn--inactive'}`} onClick={e => { e.stopPropagation(); onVote(item.id) }}>
+          <span className="feedback__vote-btn-arrow">{hasVoted ? '▲' : '△'}</span>
+          <span>{item.votes}</span>
+        </button>
+      )}
+      <div className="feedback__card-info">
+        <div className="feedback__card-badges"><TypeBadge type={item.type} /><StatusBadge status={item.status} /><PriorityBadge priority={item.priority} /></div>
+        <div className="feedback__card-title">{item.title}</div>
+        <div className="feedback__card-desc">{item.description}</div>
+        <div className="feedback__card-meta">{item.userName && <span>{item.userName}</span>}<span>{formatRelativeTime(item.createdAt)}</span>{item.tags.map(t => <span key={t} className="feedback__tag">{t}</span>)}</div>
+      </div>
+    </div>
+  )
+}
+
+export function FeedbackTypeSelector({ value, onChange }: { value: FeedbackType; onChange: (t: FeedbackType) => void }) {
+  return (
+    <div className="feedback__type-selector">
+      {FEEDBACK_TYPES.map(t => <button key={t} type="button" onClick={() => onChange(t)}
+        className={`feedback__type-tab ${value === t ? '' : 'feedback__type-tab--inactive'}`}
+        style={value === t ? { background: TYPE_CONFIG[t].color, color: 'white' } : undefined}>{TYPE_CONFIG[t].icon} {TYPE_CONFIG[t].label}</button>)}
+    </div>
+  )
+}
+
+export function FeedbackForm({ onSubmit, onClose }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string>; onClose?: () => void }) {
+  const [type, setType] = useState<FeedbackType>('general')
+  const [title, setTitle] = useState(''); const [desc, setDesc] = useState('')
+  const [submitting, setSubmitting] = useState(false); const [error, setError] = useState<string | null>(null); const [success, setSuccess] = useState(false)
+  const submit = async () => {
+    if (!title.trim()) { setError('Title required'); return }; if (desc.length < 10) { setError('10+ chars'); return }
+    setSubmitting(true); setError(null); try { await onSubmit({ type, title, description: desc }); setSuccess(true) } catch (e) { setError(String(e)) } finally { setSubmitting(false) }
+  }
+  if (success) return <div className="feedback__success"><div className="feedback__success-icon">🎉</div><div className="feedback__success-text">Thank you!</div><div className="feedback__success-sub">Feedback submitted</div></div>
+  return (
+    <div className="feedback__form">
+      <FeedbackTypeSelector value={type} onChange={setType} />
+      <input type="text" className="feedback__form-input" placeholder="Title…" value={title} onChange={e => setTitle(e.target.value)} />
+      <textarea className="feedback__form-input feedback__form-textarea" placeholder="Description…" value={desc} onChange={e => setDesc(e.target.value)} />
+      {error && <div className="feedback__form-error">{error}</div>}
+      <div className="feedback__form-actions">
+        {onClose && <button type="button" className="feedback__btn feedback__btn--outline" onClick={onClose}>Cancel</button>}
+        <button type="button" className="feedback__btn feedback__btn--primary" onClick={submit} disabled={submitting}>{submitting ? 'Submitting…' : 'Submit'}</button>
+      </div>
+    </div>
+  )
+}
+
+export function FeedbackWidget({ onSubmit, position = 'right' }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string>; position?: 'left' | 'right' }) {
+  const [isOpen, setIsOpen] = useState(false)
+  return (<>
+    <button type="button" className="feedback__widget-trigger" onClick={() => setIsOpen(true)}>Feedback</button>
+    {isOpen && <div className="feedback__widget-overlay" onClick={() => setIsOpen(false)}>
+      <div className="feedback__widget-backdrop" />
+      <div className="feedback__widget-panel" onClick={e => e.stopPropagation()}>
+        <div className="feedback__widget-header"><span className="feedback__widget-title">Send Feedback</span><button type="button" className="feedback__close-btn" onClick={() => setIsOpen(false)}>✕</button></div>
+        <FeedbackForm onSubmit={onSubmit} onClose={() => setIsOpen(false)} />
+      </div>
+    </div>}
+  </>)
+}
+
+export function NPSSurvey({ onSubmit, onDismiss }: { onSubmit: (score: number, comment?: string) => void; onDismiss: () => void }) {
+  const [score, setScore] = useState<number | null>(null); const [comment, setComment] = useState(''); const [step, setStep] = useState<'score'|'comment'|'thanks'>('score')
+  return (
+    <div className="feedback__nps">
+      {step === 'score' && <div><div className="feedback__nps-header"><span className="feedback__nps-title">How likely to recommend us?</span><button type="button" className="feedback__close-btn" onClick={onDismiss}>✕</button></div><div className="feedback__nps-subtitle">0 = Not at all · 10 = Extremely likely</div>
+        <div className="feedback__nps-scores">{Array.from({length:11}).map((_,i) => <button key={i} type="button" className="feedback__nps-score-btn" onClick={() => { setScore(i); setStep('comment') }}>{i}</button>)}</div><div className="feedback__nps-labels"><span>Not likely</span><span>Very likely</span></div></div>}
+      {step === 'comment' && <div><div className="feedback__nps-title" style={{marginBottom: '0.75rem'}}>Score: {score}</div><textarea className="feedback__form-input feedback__form-textarea" value={comment} onChange={e => setComment(e.target.value)} placeholder="Optional…" /><button type="button" className="feedback__btn feedback__btn--primary" style={{width:'100%',marginTop:'0.75rem'}} onClick={() => { onSubmit(score!, comment||undefined); setStep('thanks') }}>Submit</button></div>}
+      {step === 'thanks' && <div className="feedback__success"><div className="feedback__success-icon">🎉</div><div className="feedback__success-text">Thank you!</div></div>}
+    </div>
+  )
+}
+
+export function NPSResults({ responses }: { responses: NPSResponse[] }) {
+  const stats = calcNPSStats(responses); const total = stats.totalResponses || 1
+  const color = stats.npsScore >= 50 ? 'oklch(0.72 0.18 155)' : stats.npsScore >= 0 ? 'oklch(0.72 0.18 60)' : 'oklch(0.60 0.25 25)'
+  return (
+    <div className="feedback__nps-results">
+      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.5rem'}}><span>NPS Score</span><span className="feedback__nps-results-score" style={{color}}>{stats.npsScore}</span></div>
+      <div className="feedback__nps-bar"><div className="feedback__nps-bar-detractors" style={{width:`${(stats.detractors/total)*100}%`}} /><div className="feedback__nps-bar-passives" style={{width:`${(stats.passives/total)*100}%`}} /><div className="feedback__nps-bar-promoters" style={{width:`${(stats.promoters/total)*100}%`}} /></div>
+      <div className="feedback__nps-breakdown"><div><span style={{color:'oklch(0.60 0.25 25)',fontWeight:700}}>{stats.detractors}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Detractors</span></div><div><span style={{color:'oklch(0.72 0.18 60)',fontWeight:700}}>{stats.passives}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Passives</span></div><div><span style={{color:'oklch(0.72 0.18 155)',fontWeight:700}}>{stats.promoters}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Promoters</span></div></div>
+      <div style={{marginTop:'0.75rem',paddingTop:'0.75rem',borderTop:'1px solid oklch(1 0 0/0.05)',display:'flex',justifyContent:'space-between',fontSize:'0.6875rem',color:'oklch(1 0 0/0.4)'}}><span>Avg: {stats.averageScore}/10</span><span>{stats.totalResponses} responses</span></div>
+    </div>
+  )
+}

package/packages/react-css/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFeedback, useFeedbackForm, useNPS, useFeedbackAdmin } from '@geenius-feedback/react'
+export type { FeedbackFilter } from '@geenius-feedback/react'

package/packages/react-css/src/index.tsx

@@ -0,0 +1,5 @@
+export { useFeedback, useFeedbackForm, useNPS, useFeedbackAdmin } from './hooks'
+export type { FeedbackFilter } from './hooks'
+export { StatusBadge, PriorityBadge, TypeBadge, FeedbackCard, FeedbackTypeSelector, FeedbackForm, FeedbackWidget, NPSSurvey, NPSResults } from './components'
+import './styles.css'
+export type { FeedbackItem, NPSResponse, FeedbackConfig, FeedbackStats, NPSStats, FeedbackType, FeedbackStatus, FeedbackPriority } from '@geenius-feedback/shared'

package/packages/react-css/src/pages/FeedbackAdminPage.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import '../styles.css';
+
+const FeedbackAdminPage: React.FC = () => {
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div className="feedback__breadcrumb">
+        <span className="feedback__breadcrumb-item">Feedback</span>
+        <span className="feedback__breadcrumb-sep">/</span>
+        <span className="feedback__breadcrumb-item--active">Admin</span>
+      </div>
+
+      <div className="feedback__stats-grid">
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">📊</div>
+          <div className="feedback__stat-value">7.8</div>
+          <div className="feedback__stat-label">NPS Score</div>
+        </div>
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">⭐</div>
+          <div className="feedback__stat-value">4.2</div>
+          <div className="feedback__stat-label">Avg Rating</div>
+        </div>
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">⏱️</div>
+          <div className="feedback__stat-value">2.1h</div>
+          <div className="feedback__stat-label">Avg Response</div>
+        </div>
+      </div>
+
+      <div className="feedback__filter-panel">
+        <div className="feedback__filter-section">
+          <div className="feedback__filter-section-title">Status</div>
+          <div className="feedback__filter-options">
+            <label className="feedback__filter-option">
+              <input type="checkbox" defaultChecked />
+              <span className="feedback__filter-option-label">Open</span>
+            </label>
+            <label className="feedback__filter-option">
+              <input type="checkbox" defaultChecked />
+              <span className="feedback__filter-option-label">Under Review</span>
+            </label>
+            <label className="feedback__filter-option">
+              <input type="checkbox" defaultChecked />
+              <span className="feedback__filter-option-label">Planned</span>
+            </label>
+          </div>
+        </div>
+        <div className="feedback__filter-section">
+          <div className="feedback__filter-section-title">Priority</div>
+          <div className="feedback__filter-options">
+            <label className="feedback__filter-option">
+              <input type="checkbox" defaultChecked />
+              <span className="feedback__filter-option-label">Critical</span>
+            </label>
+            <label className="feedback__filter-option">
+              <input type="checkbox" defaultChecked />
+              <span className="feedback__filter-option-label">High</span>
+            </label>
+            <label className="feedback__filter-option">
+              <input type="checkbox" />
+              <span className="feedback__filter-option-label">Low</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: '2rem' }}>
+        <h3 style={{ fontSize: '0.875rem', fontWeight: '600', marginBottom: '1rem', color: 'oklch(1 0 0 / 0.8)' }}>
+          Recent Activity
+        </h3>
+        <table className="feedback__admin-table">
+          <thead>
+            <tr>
+              <th>Item</th>
+              <th>Status</th>
+              <th>Priority</th>
+              <th>Votes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Add Dark Mode</td>
+              <td>
+                <select className="feedback__admin-select">
+                  <option>In Progress</option>
+                  <option>Planned</option>
+                  <option>Open</option>
+                </select>
+              </td>
+              <td>High</td>
+              <td>42</td>
+            </tr>
+            <tr>
+              <td>Login Timeout Issue</td>
+              <td>
+                <select className="feedback__admin-select">
+                  <option>Open</option>
+                  <option>In Progress</option>
+                </select>
+              </td>
+              <td>Critical</td>
+              <td>12</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackAdminPage;

package/packages/react-css/src/pages/FeedbackPage.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import '../styles.css';
+
+const FeedbackPage: React.FC = () => {
+  const feedbackItems = [
+    { id: 1, title: 'Add Dark Mode', type: 'feature', status: 'in-progress', votes: 42, priority: 'high' },
+    { id: 2, title: 'Bug: Login timeout issue', type: 'bug', status: 'open', votes: 12, priority: 'critical' },
+    { id: 3, title: 'Improve API documentation', type: 'suggestion', status: 'planned', votes: 28, priority: 'medium' },
+  ];
+
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div className="feedback__breadcrumb">
+        <span className="feedback__breadcrumb-item">Feedback</span>
+        <span className="feedback__breadcrumb-sep">/</span>
+        <span className="feedback__breadcrumb-item--active">View All</span>
+      </div>
+
+      <div className="feedback__stats-grid">
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">💬</div>
+          <div className="feedback__stat-value">145</div>
+          <div className="feedback__stat-label">Total Feedback</div>
+        </div>
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">👍</div>
+          <div className="feedback__stat-value">89</div>
+          <div className="feedback__stat-label">In Progress</div>
+        </div>
+        <div className="feedback__stat-card">
+          <div className="feedback__stat-icon">✅</div>
+          <div className="feedback__stat-value">34</div>
+          <div className="feedback__stat-label">Implemented</div>
+        </div>
+      </div>
+
+      <div className="feedback__filter-tabs" style={{ marginBottom: '1.5rem' }}>
+        <button className="feedback__filter-tab feedback__filter-tab--active">All</button>
+        <button className="feedback__filter-tab feedback__filter-tab--inactive">Features</button>
+        <button className="feedback__filter-tab feedback__filter-tab--inactive">Bugs</button>
+        <button className="feedback__filter-tab feedback__filter-tab--inactive">Suggestions</button>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        {feedbackItems.map(item => (
+          <div key={item.id} className={`feedback__card feedback__card--${item.type}`}>
+            <div className="feedback__vote-btn feedback__vote-btn--inactive">
+              <span className="feedback__vote-btn-arrow">▲</span>
+              <span>{item.votes}</span>
+            </div>
+            <div className="feedback__card-info">
+              <div className="feedback__card-badges">
+                <span className={`feedback__type-badge feedback__type-badge--${item.type}`}>{item.type}</span>
+                <span className={`feedback__status-badge feedback__status-badge--${item.status}`}>{item.status}</span>
+                <span className="feedback__priority-badge feedback__priority-badge--high">{item.priority}</span>
+              </div>
+              <div className="feedback__card-title">{item.title}</div>
+              <div className="feedback__card-meta">
+                <span>Posted by user</span>
+                <span>2 days ago</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="feedback__pagination">
+        <button className="feedback__pagination-btn">Previous</button>
+        <span className="feedback__pagination-info">Page 1 of 5</span>
+        <button className="feedback__pagination-btn">Next</button>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackPage;

package/packages/react-css/src/styles.css

@@ -0,0 +1,281 @@
+/* ─── Feedback Design Tokens (OKLCH) ──────────────────── */
+:root {
+  --feedback-bg: oklch(0.12 0.01 250);
+  --feedback-surface: oklch(0.16 0.01 250);
+  --feedback-border: oklch(0.22 0.01 250);
+  --feedback-text: oklch(0.95 0.01 250);
+  --feedback-text-muted: oklch(0.58 0.02 250);
+  --feedback-accent: oklch(0.65 0.20 265);
+  --feedback-open: oklch(0.65 0.20 245);
+  --feedback-review: oklch(0.72 0.18 60);
+  --feedback-planned: oklch(0.70 0.22 280);
+  --feedback-progress: oklch(0.65 0.20 265);
+  --feedback-done: oklch(0.72 0.18 155);
+  --feedback-declined: oklch(0.50 0.10 250);
+  --feedback-bug: oklch(0.60 0.25 25);
+  --feedback-feature: oklch(0.70 0.22 280);
+  --feedback-suggestion: oklch(0.72 0.18 60);
+  --feedback-general: oklch(0.65 0.20 245);
+  --feedback-radius: 0.75rem;
+}
+
+/* ─── Feedback Card ──────────────────────────────────── */
+.feedback__card {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+.feedback__card:hover { border-color: oklch(0.65 0.20 265 / 0.2); background: oklch(1 0 0 / 0.04); }
+.feedback__card-info { flex: 1; min-width: 0; }
+.feedback__card-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
+.feedback__card-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.125rem; }
+.feedback__card-desc { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.feedback__card-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.625rem; color: oklch(1 0 0 / 0.25); }
+.feedback__card--bug { border-left: 3px solid var(--feedback-bug); }
+.feedback__card--feature { border-left: 3px solid var(--feedback-feature); }
+.feedback__card--suggestion { border-left: 3px solid var(--feedback-suggestion); }
+.feedback__card--general { border-left: 3px solid var(--feedback-general); }
+
+/* ─── Vote Button ────────────────────────────────────── */
+.feedback__vote-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  border: none;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-variant-numeric: tabular-nums;
+}
+.feedback__vote-btn--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.3); }
+.feedback__vote-btn--inactive:hover { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.5); }
+.feedback__vote-btn--active { background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); }
+.feedback__vote-btn-arrow { font-size: 0.875rem; }
+
+/* ─── Status Badge ───────────────────────────────────── */
+.feedback__status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__status-badge--open { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+.feedback__status-badge--under-review { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__status-badge--planned { background: oklch(0.70 0.22 280 / 0.15); color: oklch(0.70 0.22 280); }
+.feedback__status-badge--in-progress { background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); }
+.feedback__status-badge--done { background: oklch(0.72 0.18 155 / 0.15); color: oklch(0.72 0.18 155); }
+.feedback__status-badge--declined { background: oklch(0.50 0.10 250 / 0.15); color: oklch(0.50 0.10 250); }
+
+/* ─── Priority Badge ─────────────────────────────────── */
+.feedback__priority-badge { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__priority-badge--low { background: oklch(0.58 0.10 250 / 0.15); color: oklch(0.58 0.10 250); }
+.feedback__priority-badge--medium { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__priority-badge--high { background: oklch(0.68 0.22 35 / 0.15); color: oklch(0.68 0.22 35); }
+.feedback__priority-badge--critical { background: oklch(0.60 0.25 25 / 0.15); color: oklch(0.60 0.25 25); }
+
+/* ─── Type Badge ─────────────────────────────────────── */
+.feedback__type-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__type-badge--bug { background: oklch(0.60 0.25 25 / 0.15); color: oklch(0.60 0.25 25); }
+.feedback__type-badge--feature { background: oklch(0.70 0.22 280 / 0.15); color: oklch(0.70 0.22 280); }
+.feedback__type-badge--suggestion { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__type-badge--general { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+
+/* ─── Widget ─────────────────────────────────────────── */
+.feedback__widget-trigger {
+  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
+  z-index: 40; padding: 0.5rem 1rem; border-radius: var(--feedback-radius) 0 0 var(--feedback-radius);
+  background: var(--feedback-accent); color: white; border: none; cursor: pointer;
+  writing-mode: vertical-rl; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em;
+  box-shadow: -2px 0 12px oklch(0.65 0.20 265 / 0.3);
+}
+.feedback__widget-trigger:hover { background: oklch(0.70 0.22 265); }
+.feedback__widget-overlay { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
+.feedback__widget-backdrop { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); backdrop-filter: blur(4px); }
+.feedback__widget-panel { position: relative; width: 100%; max-width: 28rem; background: oklch(0.06 0.01 250); border-left: 1px solid var(--feedback-border); padding: 1.5rem; overflow-y: auto; }
+.feedback__widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
+.feedback__widget-title { font-size: 1.125rem; font-weight: 700; color: var(--feedback-text); }
+
+/* ─── Form ───────────────────────────────────────────── */
+.feedback__form { display: flex; flex-direction: column; gap: 1rem; }
+.feedback__form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--feedback-text); outline: none; }
+.feedback__form-input::placeholder { color: oklch(1 0 0 / 0.3); }
+.feedback__form-input:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+.feedback__form-textarea { resize: none; min-height: 6rem; }
+.feedback__form-error { font-size: 0.6875rem; color: oklch(0.60 0.25 25); }
+.feedback__form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
+
+/* ─── Type Selector ──────────────────────────────────── */
+.feedback__type-selector { display: flex; gap: 0.375rem; }
+.feedback__type-tab { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--feedback-radius) * 0.8); border: none; font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
+.feedback__type-tab--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); }
+.feedback__type-tab--inactive:hover { background: oklch(1 0 0 / 0.1); }
+
+/* ─── NPS ────────────────────────────────────────────── */
+.feedback__nps { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; width: 24rem; border: 1px solid oklch(1 0 0 / 0.1); border-radius: calc(var(--feedback-radius) * 1.5); background: oklch(0.08 0.01 250); padding: 1.5rem; box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); }
+.feedback__nps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
+.feedback__nps-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.9); }
+.feedback__nps-subtitle { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); margin-bottom: 1rem; }
+.feedback__nps-scores { display: flex; gap: 0.25rem; }
+.feedback__nps-score-btn { flex: 1; padding: 0.625rem 0; border: none; border-radius: calc(var(--feedback-radius) * 0.8); background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); font-size: 0.6875rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
+.feedback__nps-score-btn:hover { background: oklch(1 0 0 / 0.1); }
+.feedback__nps-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.625rem; color: oklch(1 0 0 / 0.2); }
+.feedback__nps-results { padding: 1.25rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__nps-results-score { font-size: 1.875rem; font-weight: 900; font-variant-numeric: tabular-nums; }
+.feedback__nps-bar { display: flex; height: 1.25rem; overflow: hidden; border-radius: 9999px; margin: 1rem 0; }
+.feedback__nps-bar-detractors { background: oklch(0.60 0.25 25 / 0.7); }
+.feedback__nps-bar-passives { background: oklch(0.72 0.18 60 / 0.7); }
+.feedback__nps-bar-promoters { background: oklch(0.72 0.18 155 / 0.7); }
+.feedback__nps-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; font-size: 0.6875rem; }
+
+/* ─── Board ──────────────────────────────────────────── */
+.feedback__board { display: flex; flex-direction: column; gap: 0.625rem; }
+
+/* ─── Admin Table ────────────────────────────────────── */
+.feedback__admin-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
+.feedback__admin-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(1 0 0 / 0.4); border-bottom: 1px solid oklch(1 0 0 / 0.08); }
+.feedback__admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid oklch(1 0 0 / 0.05); }
+.feedback__admin-table tr:hover { background: oklch(1 0 0 / 0.02); }
+.feedback__admin-select { padding: 0.25rem 0.5rem; border: 1px solid var(--feedback-border); border-radius: calc(var(--feedback-radius) * 0.6); background: oklch(1 0 0 / 0.05); font-size: 0.6875rem; color: var(--feedback-text); outline: none; }
+
+/* ─── Stats Grid ─────────────────────────────────────── */
+.feedback__stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+.feedback__stat-card { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__stat-icon { font-size: 1.125rem; }
+.feedback__stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: oklch(1 0 0 / 0.9); }
+.feedback__stat-label { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Search ─────────────────────────────────────────── */
+.feedback__search { width: 100%; max-width: 16rem; padding: 0.625rem 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--feedback-text); outline: none; }
+.feedback__search::placeholder { color: oklch(1 0 0 / 0.3); }
+.feedback__search:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+
+/* ─── Filter Tabs ────────────────────────────────────── */
+.feedback__filter-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.feedback__filter-tab { padding: 0.375rem 0.75rem; border: none; border-radius: calc(var(--feedback-radius) * 0.8); font-size: 0.6875rem; font-weight: 500; cursor: pointer; }
+.feedback__filter-tab--active { background: var(--feedback-accent); color: white; }
+.feedback__filter-tab--inactive { background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); }
+.feedback__filter-tab--inactive:hover { background: oklch(1 0 0 / 0.1); }
+
+/* ─── Btn ────────────────────────────────────────────── */
+.feedback__btn { padding: 0.5rem 1rem; border-radius: calc(var(--feedback-radius) * 0.8); font-size: 0.6875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
+.feedback__btn--primary { background: var(--feedback-accent); color: white; }
+.feedback__btn--primary:hover { background: oklch(0.70 0.22 265); }
+.feedback__btn--outline { border: 1px solid var(--feedback-border); background: transparent; color: oklch(1 0 0 / 0.6); }
+.feedback__btn--danger { background: oklch(0.60 0.25 25 / 0.2); color: oklch(0.60 0.25 25); }
+
+/* ─── Skeleton ───────────────────────────────────────── */
+.feedback__skeleton { background: oklch(1 0 0 / 0.05); border-radius: var(--feedback-radius); animation: feedback-pulse 1.5s ease-in-out infinite; }
+@keyframes feedback-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* ─── Empty ──────────────────────────────────────────── */
+.feedback__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem; text-align: center; }
+.feedback__empty-icon { font-size: 3rem; opacity: 0.2; margin-bottom: 0.75rem; }
+.feedback__empty-text { font-size: 0.875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Success ────────────────────────────────────────── */
+.feedback__success { display: flex; flex-direction: column; align-items: center; padding: 2rem; text-align: center; }
+.feedback__success-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+.feedback__success-text { font-size: 1rem; font-weight: 600; color: oklch(1 0 0 / 0.9); margin-bottom: 0.25rem; }
+.feedback__success-sub { font-size: 0.875rem; color: oklch(1 0 0 / 0.5); }
+
+/* ─── Tag ────────────────────────────────────────────── */
+.feedback__tag { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: oklch(1 0 0 / 0.05); font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+
+/* ─── Close Button ───────────────────────────────────── */
+.feedback__close-btn { padding: 0.375rem; border: none; background: transparent; color: oklch(1 0 0 / 0.3); cursor: pointer; border-radius: calc(var(--feedback-radius) * 0.6); }
+.feedback__close-btn:hover { color: oklch(1 0 0 / 0.5); background: oklch(1 0 0 / 0.05); }
+
+/* ─── Comment Thread ─────────────────────────────────── */
+.feedback__comment-thread { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.01); }
+.feedback__comment { display: flex; gap: 0.75rem; }
+.feedback__comment-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: oklch(0.65 0.20 265 / 0.2); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; }
+.feedback__comment-body { flex: 1; }
+.feedback__comment-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
+.feedback__comment-author { font-size: 0.75rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.feedback__comment-time { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__comment-text { font-size: 0.6875rem; color: oklch(1 0 0 / 0.7); line-height: 1.4; }
+.feedback__comment-reply-btn { margin-top: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.625rem; border: none; background: transparent; color: oklch(0.65 0.20 265); cursor: pointer; transition: all 0.1s; }
+.feedback__comment-reply-btn:hover { color: oklch(0.70 0.22 265); }
+
+/* ─── Rating Component ───────────────────────────────── */
+.feedback__rating { display: flex; gap: 0.25rem; }
+.feedback__rating-star { font-size: 1.5rem; cursor: pointer; opacity: 0.3; transition: all 0.15s; }
+.feedback__rating-star--filled { opacity: 1; color: oklch(0.72 0.18 60); }
+.feedback__rating-star:hover { opacity: 1; transform: scale(1.1); }
+
+/* ─── Sentiment Indicator ────────────────────────────── */
+.feedback__sentiment-card { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); text-align: center; }
+.feedback__sentiment-icon { font-size: 2rem; margin-bottom: 0.5rem; }
+.feedback__sentiment-label { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 0.25rem; }
+.feedback__sentiment-count { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Response Panel ─────────────────────────────────── */
+.feedback__response-panel { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__response-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
+.feedback__response-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.feedback__response-time { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__response-body { font-size: 0.6875rem; color: oklch(1 0 0 / 0.7); line-height: 1.5; }
+.feedback__response-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+.feedback__response-btn { padding: 0.25rem 0.5rem; font-size: 0.625rem; border: none; background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.5); cursor: pointer; border-radius: calc(var(--feedback-radius) * 0.6); transition: all 0.1s; }
+.feedback__response-btn:hover { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.6); }
+
+/* ─── Analytics Chart ────────────────────────────────── */
+.feedback__analytics { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__analytics-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 1rem; }
+.feedback__analytics-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 10rem; }
+.feedback__analytics-bar { flex: 1; border-radius: 0.25rem 0.25rem 0 0; background: linear-gradient(to top, oklch(0.65 0.20 265), oklch(0.65 0.20 265 / 0.4)); transition: all 0.2s; position: relative; }
+.feedback__analytics-bar:hover { background: linear-gradient(to top, oklch(0.70 0.22 265), oklch(0.70 0.22 265)); }
+.feedback__analytics-label { position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.625rem; color: oklch(1 0 0 / 0.4); white-space: nowrap; }
+
+/* ─── Filter Control Panel ───────────────────────────── */
+.feedback__filter-panel { border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.feedback__filter-section { margin-bottom: 1rem; }
+.feedback__filter-section:last-child { margin-bottom: 0; }
+.feedback__filter-section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: oklch(1 0 0 / 0.4); margin-bottom: 0.5rem; letter-spacing: 0.05em; }
+.feedback__filter-options { display: flex; flex-direction: column; gap: 0.25rem; }
+.feedback__filter-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.6875rem; }
+.feedback__filter-option input { cursor: pointer; }
+.feedback__filter-option-label { color: oklch(1 0 0 / 0.7); cursor: pointer; }
+
+/* ─── Tag Selector ───────────────────────────────────── */
+.feedback__tag-selector { padding: 1rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.02); }
+.feedback__tag-selector-label { display: block; font-size: 0.6875rem; font-weight: 500; color: oklch(1 0 0 / 0.6); margin-bottom: 0.5rem; text-transform: uppercase; }
+.feedback__tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.feedback__tag-item { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); font-size: 0.6875rem; font-weight: 500; }
+.feedback__tag-remove { margin-left: 0.25rem; cursor: pointer; font-weight: 700; opacity: 0.6; transition: opacity 0.1s; }
+.feedback__tag-remove:hover { opacity: 1; }
+
+/* ─── Feedback Form Actions ──────────────────────────── */
+.feedback__form-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--feedback-border); }
+.feedback__form-counter { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+.feedback__form-actions-group { display: flex; gap: 0.5rem; }
+
+/* ─── Feedback Status Indicator ──────────────────────── */
+.feedback__status-indicator { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
+.feedback__status-indicator--new { background: oklch(0.65 0.20 245 / 0.15); color: oklch(0.65 0.20 245); }
+.feedback__status-indicator--in-review { background: oklch(0.72 0.18 60 / 0.15); color: oklch(0.72 0.18 60); }
+.feedback__status-indicator--implemented { background: oklch(0.72 0.18 155 / 0.15); color: oklch(0.72 0.18 155); }
+
+/* ─── Detailed Stats Row ─────────────────────────────── */
+.feedback__detailed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
+.feedback__detailed-stat-item { padding: 0.75rem; border: 1px solid var(--feedback-border); border-radius: var(--feedback-radius); background: oklch(1 0 0 / 0.01); text-align: center; }
+.feedback__detailed-stat-icon { font-size: 1.25rem; margin-bottom: 0.25rem; }
+.feedback__detailed-stat-value { font-size: 1rem; font-weight: 700; color: oklch(1 0 0 / 0.9); }
+.feedback__detailed-stat-label { font-size: 0.625rem; color: oklch(1 0 0 / 0.4); margin-top: 0.25rem; }
+
+/* ─── Breadcrumb Navigation ──────────────────────────── */
+.feedback__breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
+.feedback__breadcrumb-item { color: oklch(1 0 0 / 0.5); }
+.feedback__breadcrumb-item--active { color: oklch(1 0 0 / 0.8); font-weight: 500; }
+.feedback__breadcrumb-sep { color: oklch(1 0 0 / 0.2); margin: 0 0.25rem; }
+
+/* ─── Pagination Controls ────────────────────────────── */
+.feedback__pagination { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 1rem; }
+.feedback__pagination-btn { padding: 0.375rem 0.75rem; border: 1px solid var(--feedback-border); border-radius: calc(var(--feedback-radius) * 0.6); background: oklch(1 0 0 / 0.05); color: oklch(1 0 0 / 0.6); font-size: 0.6875rem; cursor: pointer; transition: all 0.1s; }
+.feedback__pagination-btn:hover:not(:disabled) { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.8); }
+.feedback__pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.feedback__pagination-info { font-size: 0.6875rem; color: oklch(1 0 0 / 0.5); }

package/packages/react-css/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "src"
+  ]
+}

package/packages/react-css/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  external: ['react'],
+})

package/packages/shared/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-feedback/shared\n\n> Geenius Feedback — Shared types & Convex schema\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-feedback/shared\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-feedback/shared';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n