collavre 0.24.1 → 0.25.0

data/app/assets/stylesheets/collavre/creatives.css

@@ -334,64 +334,86 @@ creative-tree-row.show-edit .creative-row {
     color: var(--text-muted);
 }
 
-/* Progress toggle (hover-to-complete) */
+/* Leaf creatives with binary progress are directly actionable. The checkbox and
+   the completion mark share one grid cell so the control keeps a single width
+   whichever state is showing. */
 .progress-toggle-wrap {
-    position: relative;
     cursor: pointer;
-    display: inline-flex;
+    display: inline-grid;
+    grid-template-areas: "progress-state";
     align-items: center;
+    justify-items: center;
+    min-width: 1.5em;
     padding-top: 4px;
 }
 
-.progress-toggle-wrap .creative-progress-complete,
-.progress-toggle-wrap .creative-progress-incomplete {
-    padding-top: 0;
+.progress-toggle-wrap > * {
+    grid-area: progress-state;
 }
 
 .progress-toggle-checkbox {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
+    width: 1em;
+    height: 1em;
     margin: 0;
-    z-index: 1;
+    cursor: pointer;
+    accent-color: var(--color-brand);
+    transition: opacity 0.12s ease;
+}
+
+/* A completed leaf shows the admin completion mark (blank by default) instead of
+   a checked box, so finished rows read as quietly as completed parent rows. */
+.progress-toggle-mark {
+    color: var(--color-brand);
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.12s ease;
+}
+
+.progress-toggle-wrap[data-current-progress="1"] .progress-toggle-checkbox {
+    opacity: 0;
+}
+
+.progress-toggle-wrap[data-current-progress="1"] .progress-toggle-mark {
+    opacity: 1;
+}
+
+/* Hover or keyboard focus brings the checked box back, so an accidental
+   completion is undone in place instead of through the inline editor. */
+.progress-toggle-wrap[data-current-progress="1"]:hover .progress-toggle-checkbox,
+.progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-checkbox {
+    opacity: 1;
 }
 
-/* Desktop: show checkbox on row hover (same pattern as edit-btn, comments-btn) */
+.progress-toggle-wrap[data-current-progress="1"]:hover .progress-toggle-mark,
+.progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-mark {
+    opacity: 0;
+}
+
+/* Pointer devices keep a resting row quiet: the checkbox joins the row's other
+   hover-revealed actions (edit, comments) instead of standing in every row, and
+   keyboard focus reveals it for pointerless navigation. Touch devices have no
+   hover to reveal it, so there the checkbox stays visible. The wrap keeps its
+   width either way, so revealing the box never shifts the row. */
 @media (hover: hover) {
-    .progress-toggle-checkbox {
-        width: 1em;
-        height: 1em;
-        visibility: hidden;
+    .creative-row .progress-toggle-checkbox {
         opacity: 0;
-        position: absolute;
-        margin: auto;
-        pointer-events: none;
     }
 
-    .creative-row:hover .progress-toggle-wrap .creative-progress-complete,
-    .creative-row:hover .progress-toggle-wrap .creative-progress-incomplete {
-        visibility: hidden;
+    .creative-row:hover .progress-toggle-checkbox,
+    .creative-row .progress-toggle-wrap:focus-within .progress-toggle-checkbox {
+        opacity: 1;
     }
 
-    .creative-row:hover .progress-toggle-checkbox {
-        visibility: visible;
-        opacity: 1;
-        position: absolute;
-        inset: 0;
-        margin: auto;
-        pointer-events: auto;
-        accent-color: var(--color-brand);
+    .creative-row:hover .progress-toggle-wrap[data-current-progress="1"] .progress-toggle-mark,
+    .creative-row .progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-mark {
+        opacity: 0;
     }
 }
 
-/* Touch devices: always show both text and clickable area */
-@media (hover: none) {
-    .progress-toggle-checkbox {
-        opacity: 0;
-        pointer-events: auto;
+@media (prefers-reduced-motion: reduce) {
+    .progress-toggle-checkbox,
+    .progress-toggle-mark {
+        transition: none;
     }
 }
 
@@ -430,6 +452,30 @@ creative-tree-row.show-edit .creative-row {
     color: var(--text-muted);
     font-size: 1.2em;
     letter-spacing: 2px;
+
+    /*
+     * Hold the dots back for the first ~180ms. Most tree fetches resolve well
+     * inside that window, and an indicator that appears and vanishes again is
+     * itself the flicker we are trying to remove; a slow fetch still gets
+     * feedback.
+     *
+     * Deliberately animated *up* from transparent rather than declaring
+     * `opacity: 0` on the element: where animations are suppressed
+     * (reduced-motion overrides, headless test harnesses) the placeholder falls
+     * back to fully visible instead of disappearing altogether.
+     */
+    animation: creative-tree-loading-fade-in 300ms ease-out;
+}
+
+@keyframes creative-tree-loading-fade-in {
+    0%,
+    60% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 .creative-tree-loading-placeholder .creative-loading-indicator {
@@ -1052,3 +1098,266 @@ creative-tree-row.is-being-edited .creative-tree {
     box-shadow: var(--shadow-2);
 }
 
+/* ============================================================================
+ * Creative tree — actionable empty state
+ * engines/collavre/app/views/collavre/creatives/_empty_state.html.erb
+ * Uses semantic tokens only, so dark mode (body.dark-mode) is automatic.
+ * ============================================================================ */
+.creative-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: var(--space-7) var(--space-3) var(--space-8);
+}
+
+/* The disc is painted by a gradient rather than by a border-radius background
+ * on purpose. Some Android devices (reproduced on a Galaxy S24 / Android 16,
+ * screenshot measured pixel by pixel) draw the *last* corner of a rounded-rect
+ * background fill — bottom-left — as the straight chord of its arc instead of
+ * the arc, which reads as a folded-over corner. It is the fill only; rounded
+ * borders on the same page come out correct. It is also independent of the
+ * radius value: `1e5px`, `9999px` and `50%` all resolve to the identical used
+ * radius (exactly 28 for this 56px box), so swapping the radius cannot help.
+ * A gradient never asks the rasteriser for a rounded rect in the first place.
+ *
+ * So: no border-radius on this rule. Putting one back reinstates the rounded
+ * background clip, and the artifact with it.
+ */
+.creative-empty-state-icon {
+    width: 56px;
+    height: 56px;
+    background: radial-gradient(circle closest-side,
+                                var(--surface-btn) calc(100% - 0.5px),
+                                transparent 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--space-3);
+    color: var(--text-muted);
+}
+
+.creative-empty-state-icon svg {
+    width: 28px;
+    height: 28px;
+}
+
+.creative-empty-state-heading {
+    font-size: var(--text-3);
+    font-weight: var(--weight-6);
+    color: var(--text-primary);
+    margin: 0 0 var(--space-4);
+}
+
+/* --- Concept card: "what's a creative?" --- */
+.creative-empty-state-concept {
+    margin: 0 0 var(--space-4);
+    padding: var(--space-3) var(--space-4) var(--space-4);
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    border-radius: 8px;
+    max-width: 560px;
+    width: 100%;
+}
+
+.creative-empty-state-concept-title {
+    font-size: var(--text-1);
+    font-weight: var(--weight-6);
+    color: var(--text-primary);
+    margin-bottom: var(--space-3);
+}
+
+.creative-empty-state-concept-diagram {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.creative-empty-state-facet {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    /* Wide enough that the longest label (empty_state_facet_task) wraps to two
+       lines at --text-0 instead of shredding into a four-line stack. */
+    width: 108px;
+}
+
+.creative-empty-state-facet-chip {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    background: var(--surface-section);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+}
+
+.creative-empty-state-facet-chip svg {
+    width: 20px;
+    height: 20px;
+}
+
+.creative-empty-state-facet-label {
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    line-height: 1.3;
+    text-align: center;
+    /* CJK text breaks mid-word by default; wrap at spaces instead. */
+    word-break: keep-all;
+}
+
+.creative-empty-state-op {
+    color: var(--text-muted);
+    font-weight: var(--weight-6);
+    font-size: var(--text-1);
+    padding: 0 2px;
+    align-self: flex-start;
+    margin-top: 12px;
+}
+
+/* Glues each operator to the term it introduces, so a diagram too narrow for one
+   row wraps before an operator instead of leaving one dangling at a row end. */
+.creative-empty-state-term {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+}
+
+/* Center the "=" beside the shorter result block instead of using the facet
+   chip offset. */
+.creative-empty-state-result .creative-empty-state-op {
+    align-self: center;
+    margin-top: 0;
+}
+
+.creative-empty-state-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    border: 1.5px solid var(--color-active);
+    border-radius: 10px;
+    padding: 8px 12px;
+    background: var(--surface-section);
+}
+
+.creative-empty-state-block-icons {
+    display: flex;
+    gap: 6px;
+    color: var(--color-active);
+}
+
+.creative-empty-state-block-icons svg {
+    width: 15px;
+    height: 15px;
+}
+
+.creative-empty-state-block-label {
+    font-size: var(--text-0);
+    font-weight: var(--weight-6);
+    color: var(--text-primary);
+}
+
+.creative-empty-state-concept-caption {
+    font-size: var(--text-1);
+    color: var(--text-muted);
+    line-height: 1.55;
+    margin: var(--space-3) 0 0;
+    text-align: center;
+}
+
+/* --- Writable CTAs --- */
+.creative-empty-state-actions-row {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.add-creative-btn--cta {
+    gap: 6px;
+}
+
+.add-creative-btn--cta svg {
+    width: 14px;
+    height: 14px;
+}
+
+.add-creative-btn-kbd {
+    font-family: inherit;
+    font-size: 10px;
+    background: rgba(255, 255, 255, 0.22);
+    border-radius: 3px;
+    padding: 1px 5px;
+    margin-left: 2px;
+}
+
+/* --- Read-only variant: write-access request --- */
+.creative-empty-state-readonly {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.creative-empty-state-readonly-message {
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    margin: 0;
+    max-width: 340px;
+}
+
+/* Author-origin `display` beats the UA stylesheet's `[hidden] { display: none }`
+   regardless of selector specificity, so the [hidden] overrides below are
+   required or these elements would always render even while hidden — the
+   request button carries the global `.btn` class (display: inline-flex from
+   dark_mode.css), and the pending pill sets its own inline-flex below. */
+.creative-empty-state-readonly .btn[hidden],
+.creative-empty-state-request-pending[hidden] {
+    display: none;
+}
+
+.creative-empty-state-request-pending {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    padding: 6px 14px;
+    background: var(--surface-btn);
+}
+
+.creative-empty-state-request-pending-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: var(--radius-round);
+    background: var(--color-brand);
+    animation: creative-empty-state-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes creative-empty-state-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+}
+
+/* --- Unauthenticated variant: sign up / log in --- */
+.creative-empty-state-loggedout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.creative-empty-state-loggedout-message {
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    margin: 0;
+    max-width: 340px;
+}

data/app/assets/stylesheets/collavre/desktop_setup.css

@@ -0,0 +1,246 @@
+.desktop-setup {
+  max-width: 56rem;
+  margin: var(--space-7) auto;
+  color: var(--text-primary);
+}
+
+.desktop-setup__header {
+  text-align: center;
+  margin-bottom: var(--space-6);
+}
+.desktop-setup__header h1 {
+  font-size: var(--text-6);
+  margin: var(--space-1) 0 var(--space-2);
+}
+.desktop-setup__header p { color: var(--text-muted); }
+.desktop-setup__eyebrow, .desktop-setup__kicker {
+  color: var(--color-active);
+  font-size: var(--text-0);
+  font-weight: var(--weight-7);
+  letter-spacing: .08em;
+  margin: 0 0 var(--space-2);
+  text-transform: uppercase;
+}
+.desktop-setup__progress {
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: repeat(4, 1fr);
+  list-style: none;
+  margin: 0 0 var(--space-5);
+  padding: 0;
+}
+.desktop-setup__progress li {
+  align-items: center;
+  color: var(--text-muted);
+  display: flex;
+  font-size: var(--text-0);
+  font-weight: var(--weight-6);
+  gap: var(--space-1);
+}
+.desktop-setup__progress span {
+  align-items: center;
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-round);
+  display: inline-flex;
+  height: 1.5rem;
+  justify-content: center;
+  width: 1.5rem;
+}
+.desktop-setup__progress .is-current, .desktop-setup__progress .is-complete { color: var(--text-primary); }
+.desktop-setup__progress .is-current span, .desktop-setup__progress .is-complete span {
+  background: var(--color-active);
+  border-color: var(--color-active);
+  color: white;
+}
+.desktop-setup__panel {
+  background: var(--surface-section);
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-4);
+  box-shadow: var(--shadow-2);
+  min-height: 23rem;
+  padding: var(--space-7);
+}
+.desktop-setup__panel h2 {
+  font-size: var(--text-5);
+  line-height: var(--leading-1);
+  margin: 0 0 var(--space-3);
+}
+.desktop-setup__lead {
+  color: var(--text-muted);
+  font-size: var(--text-2);
+  line-height: var(--leading-3);
+  margin: 0 0 var(--space-6);
+  max-width: 44rem;
+}
+.desktop-setup__cards {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(3, 1fr);
+}
+.desktop-setup__summary, .desktop-setup__adapter-list article {
+  background: var(--surface-secondary);
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-3);
+}
+.desktop-setup__adapter-list h3 {
+  font-size: var(--text-2);
+  margin: var(--space-3) 0 var(--space-1);
+}
+.desktop-setup__adapter-list p {
+  color: var(--text-muted);
+  font-size: var(--text-0);
+  line-height: var(--leading-2);
+}
+.desktop-setup__notice {
+  background: color-mix(in srgb, var(--color-active) 8%, transparent);
+  border-left: var(--border-3) solid var(--color-active);
+  border-radius: var(--radius-2);
+  color: var(--text-muted);
+  font-size: var(--text-0);
+  line-height: var(--leading-2);
+  margin-top: var(--space-5);
+  padding: var(--space-3);
+}
+.desktop-setup__summary {
+  display: grid;
+  margin-bottom: var(--space-5);
+}
+.desktop-setup__summary div {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: 9rem 1fr;
+  padding: var(--space-3) var(--space-4);
+}
+.desktop-setup__summary div + div { border-top: var(--border-1) solid var(--border-color); }
+.desktop-setup__summary strong { font-size: var(--text-1); }
+.desktop-setup__summary span { color: var(--text-muted); }
+.desktop-setup__consent {
+  align-items: flex-start;
+  display: flex;
+  font-weight: var(--weight-6);
+  gap: var(--space-2);
+}
+.desktop-setup__consent input { margin-top: .2rem; }
+.desktop-setup__hint {
+  color: var(--text-muted);
+  font-size: var(--text-0);
+  margin: var(--space-2) 0 0;
+}
+.desktop-setup__account-form {
+  display: grid;
+  gap: var(--space-4);
+}
+.desktop-setup__form-grid {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: 1fr 1fr;
+}
+.desktop-setup__field {
+  display: grid;
+  gap: var(--space-1);
+}
+.desktop-setup__field label {
+  font-size: var(--text-1);
+  font-weight: var(--weight-6);
+}
+.desktop-setup__field input {
+  background: var(--surface-secondary);
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-2);
+  color: var(--text-primary);
+  font: inherit;
+  padding: var(--space-2) var(--space-3);
+}
+.desktop-setup__field input:focus {
+  border-color: var(--color-active);
+  outline: var(--border-2) solid color-mix(in srgb, var(--color-active) 25%, transparent);
+}
+.desktop-setup__adapter-list {
+  display: grid;
+  gap: var(--space-3);
+}
+.desktop-setup__adapter-list article {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-4);
+}
+.desktop-setup__adapter-list h3 { margin-top: 0; }
+.desktop-setup__status {
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  border-radius: var(--radius-round);
+  color: var(--color-success);
+  font-size: var(--text-0);
+  font-weight: var(--weight-7);
+  padding: var(--space-1) var(--space-2);
+  white-space: nowrap;
+}
+.desktop-setup__ready-mark {
+  align-items: center;
+  background: var(--color-success);
+  border-radius: var(--radius-round);
+  color: white;
+  display: flex;
+  font-size: var(--text-4);
+  height: 3rem;
+  justify-content: center;
+  margin-bottom: var(--space-4);
+  width: 3rem;
+}
+.desktop-setup__checklist {
+  display: grid;
+  gap: var(--space-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.desktop-setup__checklist li {
+  background: color-mix(in srgb, var(--color-success) 8%, transparent);
+  border-radius: var(--radius-2);
+  color: var(--text-primary);
+  padding: var(--space-3);
+}
+.desktop-setup__actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--space-5);
+}
+.desktop-setup__button {
+  background: var(--color-active);
+  border: var(--border-1) solid var(--color-active);
+  border-radius: var(--radius-2);
+  color: white;
+  font-weight: var(--weight-6);
+  padding: var(--space-2) var(--space-4);
+  text-decoration: none;
+}
+.desktop-setup__button--secondary {
+  background: transparent;
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+.desktop-setup__button:hover { filter: brightness(var(--hover-brightness)); }
+.desktop-setup__button:disabled {
+  background: var(--surface-secondary);
+  border-color: var(--border-color);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: .65;
+}
+.desktop-setup__button:disabled:hover { filter: none; }
+
+@media (max-width: 640px) {
+  .desktop-setup { margin: var(--space-4) auto; }
+  .desktop-setup__progress { grid-template-columns: 1fr 1fr; }
+  .desktop-setup__panel { padding: var(--space-4); }
+  .desktop-setup__form-grid { grid-template-columns: 1fr; }
+  .desktop-setup__summary div {
+    gap: var(--space-1);
+    grid-template-columns: 1fr;
+  }
+  .desktop-setup__adapter-list article {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+}