Initial open-source release

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu

src/ui/Feedback.module.css

@@ -0,0 +1,204 @@
+.progress {
+  position: relative;
+  height: 4px;
+  min-width: 40px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--fg) 12%, transparent);
+}
+.bar {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--bg-button-primary);
+  transform-origin: left center;
+  transition: transform var(--dur) var(--ease);
+}
+.indeterminate .bar {
+  width: 40%;
+  transform: none;
+  animation: slide 1.1s var(--ease) infinite;
+}
+@keyframes slide {
+  from {
+    left: -40%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+.spinner {
+  flex: none;
+  color: var(--fg-muted);
+  animation: spin 0.9s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 7px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-tiny);
+  line-height: 1;
+  background: var(--bg-active);
+  color: var(--fg-emphasis);
+}
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fg-muted);
+}
+.tone-accent {
+  background: var(--accent);
+  color: var(--fg-on-accent);
+  --icon-color: currentColor;
+}
+.tone-danger {
+  background: var(--danger);
+  color: var(--fg-on-accent);
+  --icon-color: currentColor;
+}
+.tone-warning {
+  background: var(--warning);
+  color: var(--fg-on-accent);
+  --icon-color: currentColor;
+}
+.tone-success {
+  background: var(--success);
+  color: var(--fg-on-accent);
+  --icon-color: currentColor;
+}
+
+.empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  text-align: center;
+  color: var(--fg-subtle);
+  /* Centred, but scrolls instead of spilling over the header when the panel is short. */
+  overflow: auto;
+}
+.empty::before,
+.empty::after {
+  content: "";
+  flex: 1 0 0;
+}
+.emptyTitle {
+  color: var(--fg-muted);
+}
+.emptyBody {
+  max-width: 320px;
+  color: var(--fg-muted);
+}
+.emptyActions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.toast {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  width: 340px;
+  padding: 14px 34px 14px 14px;
+  background: var(--bg-popup);
+  border: 1px solid var(--border-popup);
+  border-radius: var(--radius-popup-large, 10px);
+  box-shadow: var(--shadow-balloon);
+  color: var(--fg);
+}
+.toastIcon {
+  margin-top: 0;
+}
+.level-info {
+  color: var(--info);
+}
+.level-warning {
+  color: var(--warning);
+}
+.level-error {
+  color: var(--danger);
+}
+.level-success {
+  color: var(--success);
+}
+.toastMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.toastHead {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-height: 16px;
+}
+.toastTitle {
+  flex: 1;
+  min-width: 0;
+  color: var(--fg-strong);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.toastMeta {
+  flex: none;
+  color: var(--fg-subtle);
+  font-size: var(--fs-small);
+}
+.toastBody {
+  color: var(--fg-secondary);
+  overflow-wrap: anywhere;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.toastActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 4px;
+}
+.link {
+  color: var(--link);
+  cursor: pointer;
+}
+.link:hover {
+  color: var(--link-hover);
+}
+.toastClose {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar {
+    transition: none;
+  }
+  /* Indeterminate progress: a static, partially filled bar instead of the sweep. */
+  .indeterminate .bar {
+    animation: none;
+    left: 0;
+    opacity: 0.6;
+  }
+  .spinner {
+    animation-duration: 2.4s;
+  }
+}