@igstack/app-catalog-frontend-core 6.9.0 → 6.10.1

package/src/index.css

@@ -249,38 +249,27 @@
   padding-left: 1.25rem;
 }
 
-/* Review labels. Plain CSS rather than utilities: there is no success token in the
-   palette, and a tinted chip needs a colour the theme does not name. `--chart-3` is
-   the palette's green and already shifts for dark mode.
-
-   Mix percentages are low on purpose. At 75%/72% these measured 3.55:1 and 3.24:1
-   against the cream page — under the 4.5:1 floor for 11px text — and the old 600/700
-   weights were compensating for that, which is why they shouted and were still hard
-   to read. Lowering the mix raises contrast in both themes, so there is no .dark
-   override. Verify any change by measurement, not by eye: 60%/55% looks fine and
-   still fails. */
-.comment-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
+/* Comment badges. Plain CSS rather than utilities: there is no success or
+   pending token in the palette, so each tints a chart colour, which already
+   shifts for dark mode. The text is mixed toward the foreground so it stays
+   readable at 10.5px in both themes: an untinted chart colour on its own pale
+   ground measured under 4.5:1. Verify any change by measurement, not by eye. */
+.comment__badge {
+  margin-left: 0.375rem;
+  padding: 0 0.4375rem;
   border-radius: 999px;
-  padding: 0.05rem 0.5rem;
-  font-size: 0.6875rem;
+  font-size: 0.65625rem;
   font-weight: 500;
-  line-height: 1.5;
+  line-height: 1rem;
   white-space: nowrap;
 }
-.comment-chip-applied {
-  /* 5.46:1 light, 7.67:1 dark */
-  color: color-mix(in oklab, var(--chart-3) 50%, var(--foreground));
-  background: color-mix(in oklab, var(--chart-3) 16%, var(--card));
-  border: 1px solid color-mix(in oklab, var(--chart-3) 35%, var(--card));
+.comment__badge.is-pending {
+  color: color-mix(in oklab, var(--chart-1) 62%, var(--foreground));
+  background: color-mix(in oklab, var(--chart-1) 12%, var(--card));
 }
-.comment-chip-seen {
-  color: var(--muted-foreground);
-  background: var(--muted);
-  border: 1px solid var(--border);
-  font-weight: 400;
+.comment__badge.is-used {
+  color: color-mix(in oklab, var(--chart-3) 50%, var(--foreground));
+  background: color-mix(in oklab, var(--chart-3) 13%, var(--card));
 }
 
 /* One register for every section label inside the detail card.
@@ -431,16 +420,112 @@
 
 /* The tab strip. Horizontally scrollable rather than wrapping: a wrapped strip
    changes the band's height from one entry to the next. */
+.detail-tabs-row {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
 .detail-tabs {
   display: flex;
+  flex: 1;
+  min-width: 0;
   gap: 2px;
-  border-bottom: 1px solid var(--border);
   overflow-x: auto;
   scrollbar-width: none;
+  scroll-behavior: smooth;
 }
 .detail-tabs::-webkit-scrollbar {
   display: none;
 }
+/* Outside the scrolling tablist, so the button never scrolls out of view. */
+.detail-tabs-trailing {
+  flex: none;
+  align-self: center;
+  padding-left: 0.75rem;
+}
+.detail-share {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 0.8125rem;
+  padding: 0.25rem 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.14s ease-out,
+    border-color 0.14s ease-out;
+}
+/* Below 640px, render the Share button compact: icon only, text visually hidden. */
+@media (max-width: 639px) {
+  .detail-share {
+    padding: 0.4375rem;
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.detail-share:hover {
+  color: color-mix(in oklab, var(--primary) 85%, black);
+  border-color: color-mix(in oklab, var(--primary) 85%, black);
+}
+.detail-share:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--primary) 85%, black);
+  outline-offset: 2px;
+}
+
+/* Behind this card: one left-aligned reading column. The input and its
+   Comments come first; each later group sits under a hairline with generous
+   room either side, and a plain title. */
+.behind-panel {
+  max-width: 62ch;
+}
+.behind-group + .behind-group {
+  margin-top: 3.5rem;
+  padding-top: 2.25rem;
+  border-top: 1px solid var(--border);
+}
+.behind-group__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 0.875rem;
+}
+.behind-dates {
+  margin-top: 0.375rem;
+  font-size: 0.78125rem;
+  color: var(--muted-foreground);
+}
+/* Touch targets: inline links in Behind get ≥24px hit area on coarse pointers. */
+@media (pointer: coarse) {
+  .behind-group a {
+    padding-block: 0.375rem;
+    display: inline-block;
+  }
+}
+.behind-ai__label {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin: 0.5rem 0 0.25rem;
+}
+.behind-ai {
+  font-size: 0.8125rem;
+  white-space: pre-wrap;
+  color: var(--muted-foreground);
+  background: var(--muted);
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+.behind-card-source {
+  margin-top: 2rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.behind-card-source:empty {
+  display: none;
+}
 .detail-tab {
   position: relative;
   display: inline-flex;
@@ -516,27 +601,6 @@
   background: var(--chart-4, oklch(0.72 0.16 70));
   box-shadow: 0 0 0 2px
     color-mix(in oklab, var(--chart-4, oklch(0.72 0.16 70)) 25%, transparent);
-
-  /* How many items are still waiting on a maintainer. Amber rather than red: an entry
-   with open feedback is disputed, not broken, and red is already the withdraw
-   affordance in the same thread. 5.45:1 light, 8.08:1 dark. */
-  .feedback-open-count {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.15rem;
-    border-radius: 999px;
-    padding: 0.15rem 0.35rem;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    white-space: nowrap;
-    color: color-mix(in oklab, var(--chart-4) 45%, var(--foreground));
-    background: color-mix(in oklab, var(--chart-4) 18%, var(--card));
-    border: 1px solid color-mix(in oklab, var(--chart-4) 38%, var(--card));
-  }
 }
 
 /* tw-animate-css ships no reduced-motion rules of its own, so honour the
@@ -551,3 +615,391 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* Comments on Behind this card: the heading with its help, then one feed.
+   A comment is a small meta line above the words, like a thread. */
+.comments-head {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.875rem;
+}
+.comments-head .behind-group__title {
+  margin-bottom: 0;
+}
+.comments-help-button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  color: var(--muted-foreground);
+}
+.comments-help-button:hover,
+.comments-help-button[aria-expanded='true'] {
+  color: var(--foreground);
+}
+.comments-help-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+/* Touch targets: ≥44×44px on coarse pointers, without moving the icon. */
+@media (pointer: coarse) {
+  .comments-help-button {
+    width: 44px;
+    height: 44px;
+    margin: -10px;
+  }
+}
+.comments-help {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  width: min(24rem, 100%);
+  margin-top: 0.375rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+.comments-help[hidden] {
+  display: none;
+}
+.comments-help__title {
+  font-weight: 600;
+  margin-bottom: 0.375rem;
+}
+.comments-help ul {
+  list-style: disc;
+  margin: 0 0 0.5rem;
+  padding-left: 1.125rem;
+}
+.comments-help__note {
+  color: var(--muted-foreground);
+}
+.comments {
+  display: grid;
+  gap: 1.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.comment__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 0.3rem;
+  font-size: 0.71875rem;
+  line-height: 1.3;
+  color: var(--muted-foreground);
+}
+.comment__who {
+  font-weight: 500;
+  color: color-mix(in oklab, var(--muted-foreground) 60%, var(--foreground));
+}
+.comment__text {
+  margin-top: 1px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--foreground);
+  white-space: pre-wrap;
+}
+.comment__text.is-empty {
+  font-style: italic;
+  color: var(--muted-foreground);
+}
+.comment__reply {
+  margin-top: 0.25rem;
+  font-size: 0.84375rem;
+  color: var(--muted-foreground);
+  white-space: pre-wrap;
+}
+.comment__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.comment__actions button {
+  text-decoration: underline;
+}
+.comment__actions button:hover {
+  color: var(--foreground);
+}
+.comment__actions button.is-destructive:hover {
+  color: var(--destructive);
+}
+.community-shots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+}
+.community-shots img {
+  display: block;
+  width: 48px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+}
+.community-shots a:hover img {
+  border-color: var(--ring);
+}
+.comments-skeleton {
+  display: grid;
+  gap: 1.375rem;
+}
+.comments-skeleton__item {
+  display: grid;
+  gap: 0.375rem;
+}
+.comments-skeleton__item::before,
+.comments-skeleton__item::after {
+  content: '';
+  height: 1em;
+  background: var(--muted);
+  border-radius: 4px;
+}
+.comments-skeleton__item::before {
+  width: 30%;
+}
+.comments-skeleton__item::after {
+  width: 80%;
+  margin-top: 0.125rem;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .comments-skeleton__item::before,
+  .comments-skeleton__item::after {
+    animation: skeleton-shimmer 2s ease-in-out infinite;
+  }
+}
+@keyframes skeleton-shimmer {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.comments-empty {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+
+/* "Know more?" — the input at the top of Behind this card */
+.know-more {
+  margin-bottom: 3rem;
+}
+/* "Share what you know" points here; a dragged file shows where it lands. */
+.know-more.is-flash .know-more-field textarea:not(.know-more-mirror),
+.know-more[data-drop] .know-more-field textarea:not(.know-more-mirror) {
+  border-color: color-mix(in oklab, var(--primary) 85%, black);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 25%, transparent);
+}
+.know-more[data-drop] .know-more-field textarea:not(.know-more-mirror) {
+  border-style: dashed;
+}
+.know-more-field {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+.know-more-field textarea:not(.know-more-mirror) {
+  flex: 1;
+  min-height: 0;
+  resize: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 20px;
+  padding: 9px 14px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--card);
+  outline: none;
+  transition:
+    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+    border-color 0.15s,
+    background 0.15s,
+    box-shadow 0.15s;
+}
+/* iOS zooms inputs under 16px on mobile; use 16px below 640px. */
+@media (max-width: 639px) {
+  .know-more-field textarea:not(.know-more-mirror) {
+    font-size: 1rem;
+  }
+}
+.know-more-field textarea:not(.know-more-mirror):focus {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
+}
+.know-more-field textarea:not(.know-more-mirror)::placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.know-more-clip {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+/* Touch targets: ≥44×44px on coarse pointers. */
+@media (pointer: coarse) {
+  .know-more-clip {
+    width: 44px;
+    height: 44px;
+  }
+}
+.know-more-clip:hover:not(:disabled),
+.know-more-clip:focus-visible {
+  opacity: 1;
+  background: var(--muted);
+}
+.know-more-clip:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+.know-more-thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+}
+.know-more-thumb {
+  position: relative;
+  width: 56px;
+  height: 42px;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+.know-more-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.know-more-thumb button {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.55);
+  color: white;
+}
+/* Always there, so the input never shifts; grey until there is something to send. */
+.know-more-send {
+  flex: none;
+  height: 40px;
+  padding-inline: 1rem;
+  border-radius: 10px;
+  font-size: 0.875rem;
+}
+@media (pointer: coarse) {
+  .know-more-send {
+    height: 44px;
+  }
+}
+.know-more-send:disabled {
+  opacity: 1;
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+.know-more-mirror {
+  position: absolute;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  padding: 9px 14px;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 20px;
+  border: 1px solid transparent;
+  resize: none;
+}
+@media (max-width: 639px) {
+  .know-more-mirror {
+    font-size: 1rem;
+  }
+}
+.know-more-hint {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.2s ease,
+    opacity 0.2s ease,
+    margin 0.2s ease;
+}
+.know-more-hint.is-on {
+  /* Room for two lines: on a narrow card the hint wraps. */
+  max-height: 3rem;
+  opacity: 1;
+  margin-top: 0.375rem;
+}
+.know-more-attaching {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.know-more-attaching:empty {
+  display: none;
+}
+.know-more-clip[aria-busy] {
+  cursor: progress;
+}
+.know-more-error {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--destructive);
+}
+.know-more-sent {
+  font-size: 0.8125rem;
+  color: oklch(0.52 0.14 150);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.25s ease,
+    opacity 0.25s ease;
+}
+.know-more-sent.is-on {
+  max-height: 1.5rem;
+  opacity: 1;
+  margin-top: 0.5rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .know-more-field textarea:not(.know-more-mirror),
+  .know-more-clip,
+  .know-more-hint,
+  .know-more-sent,
+  .detail-share {
+    transition: none;
+  }
+}