@geenius/feedback 0.1.0 → 0.3.0

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

@@ -1,281 +0,0 @@
-/* ─── 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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,10 +0,0 @@
-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/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "@geenius-feedback/shared",
-  "version": "0.1.0",
-  "private": false,
-  "type": "module",
-  "description": "Geenius Feedback \u2014 Shared types & Convex schema",
-  "author": "Antigravity HQ",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./convex": "./src/convex.ts"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "pnpm clean && pnpm build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
-  "devDependencies": {
-    "convex": "^1.34.0",
-    "tsup": "^8.5.1",
-    "typescript": "~6.0.2",
-    "vitest": "^4.0.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}

package/packages/shared/src/__tests__/feedback.test.ts

@@ -1,72 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import {
-  STATUS_CONFIG, PRIORITY_CONFIG, TYPE_CONFIG,
-  FEEDBACK_TYPES, FEEDBACK_STATUSES, FEEDBACK_PRIORITIES,
-  getStatusTransitions, getNPSCategory, calcNPSScore,
-} from '../index'
-
-describe('Feedback Constants', () => {
-  it('FEEDBACK_TYPES has 4 types', () => {
-    expect(FEEDBACK_TYPES).toHaveLength(4)
-    expect(FEEDBACK_TYPES).toContain('bug')
-    expect(FEEDBACK_TYPES).toContain('feature')
-  })
-
-  it('FEEDBACK_STATUSES has 6 statuses', () => {
-    expect(FEEDBACK_STATUSES).toHaveLength(6)
-    expect(FEEDBACK_STATUSES).toContain('open')
-    expect(FEEDBACK_STATUSES).toContain('done')
-  })
-
-  it('STATUS_CONFIG maps every status to label+color', () => {
-    FEEDBACK_STATUSES.forEach(s => {
-      expect(STATUS_CONFIG[s]).toBeDefined()
-      expect(STATUS_CONFIG[s].label).toBeDefined()
-    })
-  })
-
-  it('PRIORITY_CONFIG has low through critical', () => {
-    FEEDBACK_PRIORITIES.forEach(p => {
-      expect(PRIORITY_CONFIG[p]).toBeDefined()
-    })
-  })
-})
-
-describe('Status Transitions', () => {
-  it('open can transition to under-review', () => {
-    const transitions = getStatusTransitions('open')
-    expect(transitions).toContain('under-review')
-  })
-
-  it('done has limited transitions', () => {
-    const transitions = getStatusTransitions('done')
-    expect(Array.isArray(transitions)).toBe(true)
-  })
-})
-
-describe('NPS Scoring', () => {
-  it('getNPSCategory detractor for 0-6', () => {
-    expect(getNPSCategory(0)).toBe('detractor')
-    expect(getNPSCategory(6)).toBe('detractor')
-  })
-
-  it('getNPSCategory passive for 7-8', () => {
-    expect(getNPSCategory(7)).toBe('passive')
-    expect(getNPSCategory(8)).toBe('passive')
-  })
-
-  it('getNPSCategory promoter for 9-10', () => {
-    expect(getNPSCategory(9)).toBe('promoter')
-    expect(getNPSCategory(10)).toBe('promoter')
-  })
-
-  it('calcNPSScore computes score from responses', () => {
-    const responses = [
-      { score: 10 }, { score: 9 }, { score: 5 }, { score: 3 },
-    ] as any[]
-    const nps = calcNPSScore(responses)
-    expect(typeof nps).toBe('number')
-    expect(nps).toBeGreaterThanOrEqual(-100)
-    expect(nps).toBeLessThanOrEqual(100)
-  })
-})

package/packages/shared/src/config.ts

@@ -1,49 +0,0 @@
-/**
- * @fileoverview Configuration factory for Geenius Feedback
- */
-
-import type { FeedbackConfig } from './types'
-
-export interface ConfigureFeedbackOptions {
-  floatingWidget?: boolean
-  npsEnabled?: boolean
-  npsInterval?: number
-  categories?: Array<'bug' | 'feature' | 'general' | 'suggestion'>
-  allowAnonymous?: boolean
-}
-
-/**
- * Configure the feedback system with custom options
- * @param options Configuration options for the feedback system
- * @returns FeedbackConfig object ready for use
- * @example
- * ```ts
- * const config = configureFeedback({
- *   floatingWidget: true,
- *   npsEnabled: true,
- *   npsInterval: 7,
- *   categories: ['bug', 'feature', 'general'],
- *   allowAnonymous: true,
- * })
- * ```
- */
-export function configureFeedback(options: ConfigureFeedbackOptions = {}): FeedbackConfig {
-  return {
-    floatingWidget: options.floatingWidget ?? true,
-    npsEnabled: options.npsEnabled ?? true,
-    npsInterval: options.npsInterval ?? 7,
-    categories: options.categories ?? ['bug', 'feature', 'general', 'suggestion'],
-    allowAnonymous: options.allowAnonymous ?? true,
-  }
-}
-
-/**
- * Default feedback configuration
- */
-export const defaultFeedbackConfig: FeedbackConfig = {
-  floatingWidget: true,
-  npsEnabled: true,
-  npsInterval: 7,
-  categories: ['bug', 'feature', 'general', 'suggestion'],
-  allowAnonymous: true,
-}

package/packages/shared/src/index.ts

@@ -1,111 +0,0 @@
-export type {
-  FeedbackType, FeedbackStatus, FeedbackPriority, NPSCategory,
-  Attachment, FeedbackItem, NPSResponse, FeedbackConfig,
-  FeedbackStats, NPSStats,
-} from './types'
-
-export { configureFeedback, defaultFeedbackConfig } from './config'
-export type { ConfigureFeedbackOptions } from './config'
-
-import type { FeedbackStatus, FeedbackPriority, FeedbackType, NPSResponse, FeedbackStats, NPSStats, FeedbackItem } from './types'
-
-// ─── Status Config ───────────────────────────────────
-export const STATUS_CONFIG: Record<FeedbackStatus, { label: string; color: string; emoji: string }> = {
-  open: { label: 'Open', color: 'oklch(0.65 0.20 245)', emoji: '📬' },
-  'under-review': { label: 'Under Review', color: 'oklch(0.72 0.18 60)', emoji: '🔍' },
-  planned: { label: 'Planned', color: 'oklch(0.70 0.22 280)', emoji: '📋' },
-  'in-progress': { label: 'In Progress', color: 'oklch(0.65 0.20 265)', emoji: '🚧' },
-  done: { label: 'Done', color: 'oklch(0.72 0.18 155)', emoji: '✅' },
-  declined: { label: 'Declined', color: 'oklch(0.50 0.10 250)', emoji: '🚫' },
-}
-
-export const PRIORITY_CONFIG: Record<FeedbackPriority, { label: string; color: string }> = {
-  low: { label: 'Low', color: 'oklch(0.58 0.10 250)' },
-  medium: { label: 'Medium', color: 'oklch(0.72 0.18 60)' },
-  high: { label: 'High', color: 'oklch(0.68 0.22 35)' },
-  critical: { label: 'Critical', color: 'oklch(0.60 0.25 25)' },
-}
-
-export const TYPE_CONFIG: Record<FeedbackType, { label: string; icon: string; color: string }> = {
-  bug: { label: 'Bug', icon: '🐛', color: 'oklch(0.60 0.25 25)' },
-  feature: { label: 'Feature', icon: '✨', color: 'oklch(0.70 0.22 280)' },
-  suggestion: { label: 'Suggestion', icon: '💡', color: 'oklch(0.72 0.18 60)' },
-  general: { label: 'General', icon: '💬', color: 'oklch(0.65 0.20 245)' },
-}
-
-export const FEEDBACK_TYPES: FeedbackType[] = ['bug', 'feature', 'suggestion', 'general']
-export const FEEDBACK_STATUSES: FeedbackStatus[] = ['open', 'under-review', 'planned', 'in-progress', 'done', 'declined']
-export const FEEDBACK_PRIORITIES: FeedbackPriority[] = ['low', 'medium', 'high', 'critical']
-
-// ─── Status Transitions ─────────────────────────────
-const STATUS_TRANSITIONS: Record<FeedbackStatus, FeedbackStatus[]> = {
-  open: ['under-review', 'planned', 'declined'],
-  'under-review': ['planned', 'in-progress', 'declined'],
-  planned: ['in-progress', 'declined'],
-  'in-progress': ['done', 'planned'],
-  done: ['open'],
-  declined: ['open'],
-}
-
-export function getStatusTransitions(status: FeedbackStatus): FeedbackStatus[] {
-  return STATUS_TRANSITIONS[status] ?? []
-}
-
-// ─── NPS Utilities ───────────────────────────────────
-export function getNPSCategory(score: number): 'detractor' | 'passive' | 'promoter' {
-  if (score <= 6) return 'detractor'
-  if (score <= 8) return 'passive'
-  return 'promoter'
-}
-
-export function calcNPSScore(responses: NPSResponse[]): number {
-  if (responses.length === 0) return 0
-  let promoters = 0, detractors = 0
-  for (const r of responses) {
-    const cat = getNPSCategory(r.score)
-    if (cat === 'promoter') promoters++
-    else if (cat === 'detractor') detractors++
-  }
-  return Math.round(((promoters - detractors) / responses.length) * 100)
-}
-
-export function calcNPSStats(responses: NPSResponse[]): NPSStats {
-  let promoters = 0, passives = 0, detractors = 0, totalScore = 0
-  for (const r of responses) {
-    totalScore += r.score
-    const cat = getNPSCategory(r.score)
-    if (cat === 'promoter') promoters++
-    else if (cat === 'passive') passives++
-    else detractors++
-  }
-  return {
-    averageScore: responses.length > 0 ? Math.round((totalScore / responses.length) * 10) / 10 : 0,
-    totalResponses: responses.length,
-    promoters, passives, detractors,
-    npsScore: calcNPSScore(responses),
-  }
-}
-
-export function calcFeedbackStats(items: FeedbackItem[]): FeedbackStats {
-  const byType = { bug: 0, feature: 0, suggestion: 0, general: 0 }
-  const byStatus = { open: 0, 'under-review': 0, planned: 0, 'in-progress': 0, done: 0, declined: 0 }
-  const byPriority = { low: 0, medium: 0, high: 0, critical: 0 }
-  for (const item of items) {
-    byType[item.type]++
-    byStatus[item.status]++
-    byPriority[item.priority]++
-  }
-  return { total: items.length, byType, byStatus, byPriority }
-}
-
-export function formatRelativeTime(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime()
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return 'just now'
-  if (mins < 60) return `${mins}m ago`
-  const hrs = Math.floor(mins / 60)
-  if (hrs < 24) return `${hrs}h ago`
-  const days = Math.floor(hrs / 24)
-  if (days < 30) return `${days}d ago`
-  return new Date(dateStr).toLocaleDateString()
-}

package/packages/shared/src/types.ts

@@ -1,59 +0,0 @@
-export type FeedbackType = 'bug' | 'feature' | 'general' | 'suggestion'
-export type FeedbackStatus = 'open' | 'under-review' | 'planned' | 'in-progress' | 'done' | 'declined'
-export type FeedbackPriority = 'low' | 'medium' | 'high' | 'critical'
-export type NPSCategory = 'detractor' | 'passive' | 'promoter'
-
-export interface Attachment { url: string; name: string; size: number }
-
-export interface FeedbackItem {
-  id: string
-  type: FeedbackType
-  title: string
-  description: string
-  status: FeedbackStatus
-  priority: FeedbackPriority
-  userId?: string
-  userEmail?: string
-  userName?: string
-  url?: string
-  browser?: string
-  os?: string
-  tags: string[]
-  votes: number
-  createdAt: string
-  updatedAt: string
-  attachments?: Attachment[]
-  adminNote?: string
-}
-
-export interface NPSResponse {
-  id: string
-  score: number
-  comment?: string
-  userId?: string
-  submittedAt: string
-}
-
-export interface FeedbackConfig {
-  floatingWidget: boolean
-  npsEnabled: boolean
-  npsInterval: number
-  categories: FeedbackType[]
-  allowAnonymous: boolean
-}
-
-export interface FeedbackStats {
-  total: number
-  byType: Record<FeedbackType, number>
-  byStatus: Record<FeedbackStatus, number>
-  byPriority: Record<FeedbackPriority, number>
-}
-
-export interface NPSStats {
-  averageScore: number
-  totalResponses: number
-  promoters: number
-  passives: number
-  detractors: number
-  npsScore: number
-}