create-feedbax 0.2.0 → 0.2.1

package/template/src/index.css

@@ -1,4 +1,4 @@
-@import "@feedbax/ui/globals.css";
+@import "./components/ui/styles/globals.css";
 
 :root {
   --portal-ink: var(--foreground);
@@ -154,13 +154,7 @@
 
 body {
   margin: 0;
-  background:
-    linear-gradient(
-      color-mix(in srgb, var(--foreground) 3.5%, transparent) 1px,
-      transparent 1px
-    ),
-    var(--portal-paper);
-  background-size: 100% 4rem;
+  background: var(--portal-paper);
   color: var(--portal-ink);
 }
 
@@ -181,6 +175,14 @@ textarea:focus-visible {
   outline-offset: 3px;
 }
 
+input[data-slot="command-input"]:focus-visible {
+  outline: none;
+}
+
+[data-slot="command-input-wrapper"]:focus-within {
+  box-shadow: inset 0 -1px 0 var(--ring);
+}
+
 .vote-toggle-button {
   display: inline-flex;
   min-height: 2.5rem;
@@ -272,10 +274,10 @@ textarea:focus-visible {
 
 .feedback-submit-copy h2 {
   margin: 0;
-  font-size: clamp(2rem, 4vw, 3.8rem);
-  font-weight: 650;
-  letter-spacing: -0.06em;
-  line-height: 0.98;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.4;
 }
 
 .feedback-submit-copy > p:last-child {
@@ -466,8 +468,8 @@ textarea:focus-visible {
 
 .post-detail-dialog {
   display: block;
-  width: min(70rem, calc(100vw - 2rem));
-  max-width: 70rem;
+  width: min(64rem, calc(100vw - 2rem));
+  max-width: 64rem;
   max-height: calc(100svh - 2rem);
   overflow-y: auto;
   padding: 0;
@@ -483,32 +485,8 @@ textarea:focus-visible {
   min-height: 0;
 }
 
-.post-full-page-link {
-  display: flex;
-  min-height: 4.5rem;
-  padding: 0 4.25rem 0 1.5rem;
-  align-items: center;
-  justify-content: flex-end;
-  border-bottom: 1px solid var(--portal-rule);
-  color: var(--muted-foreground);
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-decoration-color: transparent;
-  text-underline-offset: 0.25rem;
-  transition:
-    color 160ms ease,
-    text-decoration-color 160ms ease;
-}
-
-.post-full-page-link:hover {
-  color: var(--portal-ink);
-  text-decoration-color: currentColor;
-}
-
-.post-full-page-link svg {
-  width: 0.9rem;
-  height: 0.9rem;
-  margin-left: 0.5rem;
+.post-detail-dialog .post-detail-sidebar {
+  padding-top: 4rem;
 }
 
 .post-detail-drawer .overlay-post-detail {
@@ -534,9 +512,16 @@ textarea:focus-visible {
 }
 
 .portal-shell {
+  display: flex;
+  flex-direction: column;
   min-height: 100svh;
 }
 
+#main-content {
+  flex: 1;
+  min-width: 0;
+}
+
 .portal-header {
   display: flex;
   align-items: center;
@@ -624,7 +609,7 @@ textarea:focus-visible {
 
 .feedback-intro h1 {
   margin: 0;
-  font-size: clamp(2rem, 4vw, 3.4rem);
+  font-size: var(--text-2xl);
   font-weight: 650;
   letter-spacing: -0.055em;
   line-height: 1;
@@ -638,331 +623,82 @@ textarea:focus-visible {
   line-height: 1.55;
 }
 
-.changelog-page {
-  width: min(calc(100% - 2rem), 90rem);
-  min-height: calc(100svh - 5rem);
-  margin: 0 auto;
-  padding: clamp(3rem, 7vw, 5rem) 0 6rem;
-  animation: page-in 480ms ease-out both;
-}
-
-.changelog-heading {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 2rem;
-}
-
-.changelog-heading h1 {
-  margin: 0;
-  font-size: clamp(1.75rem, 3vw, 2.25rem);
-  font-weight: 650;
-  letter-spacing: -0.04em;
-  line-height: 1;
-}
-
-.changelog-heading p {
-  margin: 0.75rem 0 0;
-  color: var(--muted-foreground);
-  font-size: 0.95rem;
-}
-
-.changelog-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin: 2.5rem 0 1rem;
-}
-
-.changelog-filters {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  width: min(100%, 28rem);
-}
-
-.changelog-filters button {
-  height: 2.5rem;
-  padding-inline: 1rem;
-  color: var(--muted-foreground);
-  font-size: 0.8rem;
-}
-
-.changelog-filters button[aria-pressed="true"] {
-  background: var(--muted);
-  color: var(--foreground);
-}
-
 .changelog-timeline {
-  position: relative;
   display: grid;
-  gap: 0.75rem;
-  margin: 0;
+  gap: 2.5rem;
+  max-width: 64rem;
+  margin: 2.5rem auto 0;
   padding: 0;
   list-style: none;
 }
 
-.changelog-timeline::before {
-  position: absolute;
-  top: 1.5rem;
-  bottom: 4.5rem;
-  left: 10.875rem;
-  width: 1px;
-  background: var(--border);
-  content: "";
-}
-
 .changelog-timeline-entry {
   position: relative;
   display: grid;
-  grid-template-columns: 9.75rem 1.5rem minmax(0, 1fr);
+  grid-template-columns: 8rem minmax(0, 1fr);
+  gap: 2rem;
   align-items: start;
 }
 
 .changelog-timeline-entry > time {
-  padding-top: 1.1rem;
+  padding-top: 0.2rem;
   color: var(--muted-foreground);
-  font-size: 0.8rem;
+  font-size: var(--text-xs);
   font-variant-numeric: tabular-nums;
 }
 
 .changelog-timeline-marker {
+  position: absolute;
   z-index: 1;
-  width: 0.45rem;
-  height: 0.45rem;
-  margin: 1.35rem auto 0;
-  border: 2px solid var(--background);
+  top: 0.45rem;
+  left: 10rem;
+  width: 0.4rem;
+  height: 0.4rem;
+  transform: translateX(-50%);
   border-radius: 50%;
-  background: color-mix(
-    in srgb,
-    var(--muted-foreground) 55%,
-    var(--background)
-  );
-  box-sizing: content-box;
+  background: var(--muted-foreground);
+  box-shadow: 0 0 0 4px var(--background);
 }
 
 .changelog-timeline-entry > article {
   min-width: 0;
+  padding: 0 0 2.5rem 2rem;
+  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
   scroll-margin-top: 6rem;
-  border: 1px solid var(--border);
-  background: color-mix(in srgb, var(--card) 36%, transparent);
-  transition:
-    border-color 180ms ease,
-    background-color 180ms ease;
 }
 
-.changelog-timeline-entry > article:hover,
 .changelog-timeline-entry > article:target {
-  border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
-  background: color-mix(in srgb, var(--card) 72%, transparent);
-}
-
-.changelog-timeline-entry > article:target {
-  outline: 1px solid color-mix(in srgb, var(--ring) 65%, transparent);
-  outline-offset: 3px;
-}
-
-.changelog-entry-layout {
-  padding: 1rem 1.5rem;
-}
-
-.changelog-entry-layout.has-image {
-  display: grid;
-  grid-template-columns: minmax(17rem, 1fr) minmax(20rem, 0.8fr);
-  gap: clamp(1.5rem, 4vw, 4rem);
-  align-items: center;
-  min-height: 16rem;
-}
-
-.changelog-entry-copy {
-  min-width: 0;
-}
-
-.changelog-labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-bottom: 0.7rem;
-}
-
-.changelog-label {
-  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
-  background: color-mix(in srgb, var(--muted) 72%, transparent);
-  color: var(--muted-foreground);
-}
-
-.changelog-label > span {
-  width: 0.45rem;
-  height: 0.45rem;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.changelog-label.is-new {
-  background: color-mix(in srgb, var(--changelog-new) 12%, transparent);
-  color: var(--changelog-new);
-}
-
-.changelog-label.is-improved {
-  background: color-mix(in srgb, var(--changelog-improved) 12%, transparent);
-  color: var(--changelog-improved);
-}
-
-.changelog-label.is-fixed {
-  background: color-mix(in srgb, var(--destructive) 12%, transparent);
-  color: var(--destructive);
-}
-
-.changelog-entry-title {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.changelog-entry-title h2 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 650;
-  letter-spacing: -0.025em;
-}
-
-.changelog-entry-title a {
-  display: inline-grid;
-  flex: none;
-  width: 1.75rem;
-  height: 1.75rem;
-  place-items: center;
-  color: var(--muted-foreground);
-  opacity: 0.55;
-  transition:
-    color 160ms ease,
-    opacity 160ms ease,
-    transform 160ms ease;
-}
-
-.changelog-entry-title a:hover,
-.changelog-entry-title a:focus-visible {
-  color: var(--foreground);
-  opacity: 1;
-  transform: translateY(-1px);
-}
-
-.changelog-entry-title svg {
-  width: 0.9rem;
-  height: 0.9rem;
-}
-
-.changelog-entry-summary {
-  margin: 0.45rem 0 0;
-  color: var(--muted-foreground);
-  font-size: 0.9rem;
-  line-height: 1.5;
+  outline: 1px solid var(--ring);
+  outline-offset: 0.75rem;
 }
 
 .changelog-entry-body {
-  margin-top: 0.7rem;
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
   color: var(--muted-foreground);
-  font-size: 0.86rem;
-  line-height: 1.55;
+  font-size: var(--text-sm);
+  line-height: 1.75;
+  overflow-wrap: anywhere;
 }
 
-.changelog-entry-body p,
-.changelog-entry-body ul {
+.changelog-entry-body p {
   margin: 0;
+  white-space: pre-line;
 }
 
-.changelog-entry-body ul {
-  padding-left: 1.25rem;
-}
-
-.changelog-entry-layout img {
-  display: block;
-  width: 100%;
-  border: 1px solid var(--border);
-  background: var(--background);
-}
-
-.changelog-load-more {
-  display: flex;
-  justify-content: center;
-  margin: 1rem 0 0 11.25rem;
-}
-
-@media (max-width: 800px) {
-  .changelog-page {
-    width: min(calc(100% - 2rem), 42rem);
-    padding-top: 5rem;
-  }
-
-  .changelog-heading {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .changelog-heading button,
-  .changelog-toolbar button {
-    width: 100%;
-  }
-
-  .changelog-toolbar {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    margin-top: 1rem;
-  }
-
-  .changelog-filters {
-    width: 100%;
-  }
-
-  .changelog-filters button {
-    height: 2.75rem;
-    min-width: 0;
-    padding-inline: 0.45rem;
-    font-size: 0.72rem;
-  }
-
-  .changelog-timeline::before {
-    top: 3rem;
-    bottom: 3rem;
-    left: 0.35rem;
-  }
-
+@media (max-width: 640px) {
   .changelog-timeline-entry {
-    grid-template-columns: 0.75rem minmax(0, 1fr);
-    column-gap: 0.75rem;
-  }
-
-  .changelog-timeline-entry > time {
-    grid-column: 2;
-    padding: 0 0 0.55rem;
-  }
-
-  .changelog-timeline-marker {
-    grid-column: 1;
-    grid-row: 1 / span 2;
-    margin-top: 0.25rem;
-  }
-
-  .changelog-timeline-entry > article {
-    grid-column: 2;
-  }
-
-  .changelog-entry-layout,
-  .changelog-entry-layout.has-image {
-    display: grid;
     grid-template-columns: minmax(0, 1fr);
-    gap: 1.25rem;
-    min-height: 0;
-    padding: 1.1rem;
+    gap: 0.75rem;
   }
-
-  .changelog-load-more {
-    margin-left: 1.5rem;
+  .changelog-timeline-entry > article {
+    padding-left: 0;
+    border-left: 0;
   }
-
-  .changelog-load-more button {
-    width: 100%;
-    min-width: 0;
+  .changelog-timeline-marker {
+    display: none;
   }
 }
 
@@ -1041,76 +777,6 @@ textarea:focus-visible {
   padding-top: 3rem;
 }
 
-.feedback-feed-skeleton .animate-pulse,
-.post-detail-skeleton .animate-pulse {
-  border-radius: 0;
-}
-
-.feedback-skeleton-heading {
-  width: min(34rem, 80vw);
-  height: clamp(2.5rem, 7vw, 5.5rem);
-}
-
-.feedback-skeleton-deck {
-  width: min(32rem, 70vw);
-  height: 1.25rem;
-  margin-top: 1.25rem;
-}
-
-.feedback-skeleton-control {
-  width: 9rem;
-  height: 2.75rem;
-}
-
-.feedback-skeleton-section-heading,
-.feedback-skeleton-meta {
-  width: 8rem;
-  height: 0.75rem;
-}
-
-.feedback-skeleton-row {
-  display: grid;
-  gap: 0.8rem;
-  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
-}
-
-.feedback-skeleton-title {
-  width: min(30rem, 70vw);
-  height: 2rem;
-}
-
-.feedback-skeleton-copy {
-  width: min(42rem, 80vw);
-  height: 1rem;
-}
-
-.post-detail-skeleton-back {
-  width: 8rem;
-  height: 1rem;
-}
-
-.post-detail-skeleton-meta {
-  width: 12rem;
-  height: 0.8rem;
-}
-
-.post-detail-skeleton-title {
-  width: min(44rem, 75vw);
-  height: clamp(3rem, 7vw, 6rem);
-  margin-top: 1.25rem;
-}
-
-.post-detail-skeleton-copy {
-  width: min(52rem, 80vw);
-  height: 1rem;
-  margin-top: 2rem;
-}
-
-.post-detail-skeleton-copy-short {
-  width: min(35rem, 60vw);
-  margin-top: 0.75rem;
-}
-
 .creation-skeleton-eyebrow {
   width: 7rem;
   height: 0.75rem;
@@ -1275,7 +941,7 @@ textarea:focus-visible {
 .roadmap-intro h1 {
   max-width: 12ch;
   margin: 0;
-  font-size: clamp(3rem, 7vw, 6.5rem);
+  font-size: var(--text-2xl);
   font-weight: 650;
   letter-spacing: -0.075em;
   line-height: 0.94;
@@ -1468,7 +1134,7 @@ textarea:focus-visible {
 .feedback-detail h1 {
   max-width: 14ch;
   margin: 1.25rem 0 0;
-  font-size: clamp(3rem, 7vw, 6.5rem);
+  font-size: var(--text-2xl);
   font-weight: 650;
   letter-spacing: -0.075em;
   line-height: 0.94;
@@ -1478,7 +1144,7 @@ textarea:focus-visible {
   max-width: 48rem;
   margin: clamp(2rem, 5vw, 4rem) 0 0;
   color: var(--muted-foreground);
-  font-size: clamp(1.15rem, 2vw, 1.5rem);
+  font-size: var(--text-sm);
   line-height: 1.75;
   white-space: pre-wrap;
 }
@@ -1511,7 +1177,7 @@ textarea:focus-visible {
 }
 
 .public-post-detail {
-  width: min(90vw, 70rem);
+  width: min(90vw, 64rem);
   padding: clamp(2rem, 5vw, 4rem) 0 5rem;
 }
 
@@ -1525,7 +1191,7 @@ textarea:focus-visible {
 .public-post-detail .post-detail-layout {
   display: grid;
   max-width: none;
-  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
+  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.38fr);
   margin-top: 1.5rem;
   border: 1px solid var(--portal-rule);
   background: color-mix(in srgb, var(--card) 55%, var(--background));
@@ -1539,7 +1205,7 @@ textarea:focus-visible {
 .post-detail-primary,
 .post-detail-sidebar {
   min-width: 0;
-  padding: clamp(1.5rem, 4vw, 2.5rem);
+  padding: 1.5rem;
 }
 
 .post-detail-sidebar {
@@ -1578,19 +1244,24 @@ textarea:focus-visible {
 }
 
 .public-post-detail h1 {
-  max-width: 22ch;
-  margin: 1.5rem 0 0;
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 650;
-  letter-spacing: -0.05em;
-  line-height: 1.05;
+  max-width: none;
+  margin: 1rem 0 0;
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.4;
+}
+
+.public-post-detail[data-display="overlay"] h1 {
+  font-size: var(--text-lg);
+  line-height: 1.5;
 }
 
 .public-post-detail .feedback-detail-description {
   max-width: 45rem;
   margin: 0.75rem 0 0;
   color: var(--muted-foreground);
-  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
+  font-size: var(--text-sm);
   line-height: 1.65;
 }
 
@@ -1641,16 +1312,22 @@ textarea:focus-visible {
   letter-spacing: -0.02em;
 }
 
-.post-detail-comments-empty {
-  min-height: 13rem;
+.post-detail-thread-list {
+  max-height: 30rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   margin-top: 1.25rem;
-  border: 1px dashed var(--portal-rule);
-  background: color-mix(in srgb, var(--muted) 12%, transparent);
+  border-top: 1px solid var(--portal-rule);
 }
 
 .comment-threads {
-  margin-top: 1.25rem;
-  border-block: 1px solid var(--portal-rule);
+  padding-right: 0.5rem;
+}
+
+.public-post-detail .comment-thread {
+  max-width: none;
+  margin-top: 0;
 }
 
 .comment-thread + .comment-thread {
@@ -1756,7 +1433,7 @@ textarea:focus-visible {
 }
 
 .comment-composer-input {
-  min-height: 7rem;
+  min-height: 6rem;
   resize: vertical;
   border-color: color-mix(in srgb, var(--foreground) 28%, var(--portal-rule));
   background: var(--background);
@@ -1839,7 +1516,7 @@ textarea:focus-visible {
 .public-error h1 {
   max-width: 12ch;
   margin: 0;
-  font-size: clamp(3rem, 7vw, 6.5rem);
+  font-size: var(--text-2xl);
   font-weight: 650;
   letter-spacing: -0.075em;
   line-height: 0.94;
@@ -1882,18 +1559,7 @@ textarea:focus-visible {
 }
 
 .portal-loading {
-  display: flex;
-  min-height: calc(100svh - 4.5rem);
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  color: var(--muted-foreground);
-  font-size: 0.85rem;
-}
-
-.portal-loading svg {
-  width: 1.1rem;
-  animation: spin 900ms linear infinite;
+  width: 100%;
 }
 
 @keyframes page-in {
@@ -2031,7 +1697,7 @@ textarea:focus-visible {
   }
 
   .feedback-detail h1 {
-    font-size: clamp(3rem, 15vw, 4.25rem);
+    font-size: var(--text-2xl);
   }
 
   .feedback-detail-dates {
@@ -2040,7 +1706,7 @@ textarea:focus-visible {
   }
 
   .feedback-intro h1 {
-    font-size: clamp(2rem, 10vw, 3rem);
+    font-size: var(--text-2xl);
   }
 
   .feedback-filters {
@@ -2085,7 +1751,7 @@ textarea:focus-visible {
   }
 
   .public-post-detail h1 {
-    font-size: clamp(1.85rem, 8vw, 2.5rem);
+    font-size: var(--text-xl);
   }
 
   .post-detail-primary,
@@ -2101,10 +1767,6 @@ textarea:focus-visible {
     justify-content: flex-end;
   }
 
-  .post-detail-comments-empty {
-    min-height: 10rem;
-  }
-
   .comment[data-reply="true"] {
     margin-left: 0.75rem;
     padding-left: 0.75rem;
@@ -2119,11 +1781,6 @@ textarea:focus-visible {
   .post-detail-details > div {
     grid-template-columns: minmax(5rem, 0.65fr) minmax(0, 1fr);
   }
-
-  .post-full-page-link {
-    min-height: 3.75rem;
-    padding-right: 1.25rem;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {