@fungi.computer/caps 0.7.1 → 0.9.0

package/src/styles.css

@@ -6,6 +6,7 @@
 @import "@fungi.computer/stipe/styles.css";
 @import "./status-tray.css";
 @import "./app-status-bar.css";
+@import "./first-run.css";
 
 @plugin "@tailwindcss/typography";
 
@@ -42,6 +43,134 @@
   z-index: var(--stipe-layer-toast);
 }
 
+/* Unlayered on purpose: Sonner injects an unlayered sheet at runtime, which
+   would outrank anything inside a cascade layer. */
+/* Sonner paints from --normal-* and per-type variables; point them at the
+   Stipe tokens so latte, mocha and any data-theme switch are followed. */
+.caps-toaster[data-sonner-toaster][data-sonner-theme] {
+  font-family: inherit;
+  --border-radius: var(--radius-box);
+  --normal-bg: var(--stipe-surface-raised);
+  --normal-bg-hover: var(--color-base-200);
+  --normal-border: var(--stipe-hairline-quiet);
+  --normal-border-hover: var(--stipe-hairline);
+  --normal-text: var(--color-base-content);
+  --success-bg: color-mix(
+    in oklab,
+    var(--color-success) 10%,
+    var(--stipe-surface-raised)
+  );
+  --success-border: color-mix(in oklab, var(--color-success) 35%, transparent);
+  --success-text: var(--color-base-content);
+  --info-bg: color-mix(
+    in oklab,
+    var(--color-info) 10%,
+    var(--stipe-surface-raised)
+  );
+  --info-border: color-mix(in oklab, var(--color-info) 35%, transparent);
+  --info-text: var(--color-base-content);
+  --warning-bg: color-mix(
+    in oklab,
+    var(--color-warning) 12%,
+    var(--stipe-surface-raised)
+  );
+  --warning-border: color-mix(in oklab, var(--color-warning) 40%, transparent);
+  --warning-text: var(--color-base-content);
+  --error-bg: color-mix(
+    in oklab,
+    var(--color-error) 10%,
+    var(--stipe-surface-raised)
+  );
+  --error-border: color-mix(in oklab, var(--color-error) 40%, transparent);
+  --error-text: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  font-size: var(--text-sm);
+  line-height: 1.35;
+  box-shadow: 0 0.25rem 0.75rem
+    color-mix(
+      in oklab,
+      var(--color-base-content) calc(var(--depth) * 14%),
+      transparent
+    );
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] {
+  align-items: flex-start;
+  font-family: inherit;
+}
+/* The icon sits on the title line, not centred on a two-line block. */
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-icon] {
+  align-items: center;
+  height: calc(var(--text-sm) * 1.35);
+  margin: 0;
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-description] {
+  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
+}
+/* One close position: inline at the end, top-aligned with the first line. */
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button] {
+  position: static;
+  order: 99;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  transform: none;
+  flex: none;
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-icon] {
+  color: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="success"]
+  [data-icon] {
+  color: var(--color-success);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="error"]
+  [data-icon] {
+  color: var(--color-error);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="warning"]
+  [data-icon] {
+  color: var(--color-warning);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="info"]
+  [data-icon] {
+  color: var(--color-info);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button] {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-base-content);
+  background: var(--stipe-surface-raised);
+  border: var(--border) solid var(--stipe-hairline);
+  transition-duration: var(--stipe-motion-fast);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button]:hover {
+  background: var(--color-base-200);
+  border-color: var(--stipe-hairline);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button]:focus-visible {
+  outline: 2px solid var(--caps-focus-ring);
+  outline-offset: 1px;
+  box-shadow: none;
+}
+
 @layer caps-dropdown {
   .caps-dropdown-popup {
     max-height: var(--available-height);
@@ -121,7 +250,7 @@
     --tw-prose-bold: var(--color-base-content);
     --tw-prose-counters: var(--stipe-fg-muted);
     --tw-prose-bullets: var(--stipe-fg-muted);
-    --tw-prose-hr: var(--stipe-hairline);
+    --tw-prose-hr: var(--stipe-hairline-quiet);
     --tw-prose-quotes: var(--color-base-content);
     --tw-prose-quote-borders: var(--stipe-linework);
     --tw-prose-captions: var(--stipe-fg-muted);
@@ -130,7 +259,7 @@
     --tw-prose-pre-code: var(--color-base-content);
     --tw-prose-pre-bg: var(--color-base-200);
     --tw-prose-th-borders: var(--stipe-linework);
-    --tw-prose-td-borders: var(--stipe-hairline);
+    --tw-prose-td-borders: var(--stipe-hairline-quiet);
     font-family: var(--font-sans);
     line-height: var(--caps-prose-leading, 1.75);
   }
@@ -171,6 +300,14 @@
     outline: none;
     box-shadow: none;
   }
+  /* A busy ghost is pending, not disabled: it keeps its ink. */
+  .caps-button.btn-ghost[aria-busy="true"]:is(
+      :disabled,
+      [aria-disabled="true"]
+    ) {
+    --btn-fg: var(--color-base-content);
+    color: var(--color-base-content);
+  }
 }
 
 @layer components {
@@ -223,7 +360,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-sm);
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
     padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
       var(--spacing-md);
   }
@@ -397,6 +534,11 @@
     color: var(--marginalia-ink);
     font-size: 0.875em;
   }
+  @media (pointer: coarse) {
+    .caps-keycap[data-touch="hide"] {
+      display: none;
+    }
+  }
   .caps-keycap {
     display: inline-grid;
     min-width: var(--caps-keycap-legend-min-size, 2rem);
@@ -1555,6 +1697,22 @@
   .caps-shortcuts dd {
     margin: 0;
   }
+  /* A default dialog keeps a 16px gutter on each side (more where the device
+     has a safe-area inset) and never outgrows the screen vertically. */
+  .caps-dialog-popup-default {
+    width: min(
+      var(--container-lg),
+      calc(
+        100% - max(1rem, env(safe-area-inset-left)) -
+          max(1rem, env(safe-area-inset-right))
+      )
+    );
+    max-width: none;
+    max-height: calc(
+      100dvh - max(1rem, env(safe-area-inset-top)) -
+        max(1rem, env(safe-area-inset-bottom))
+    );
+  }
   dialog.caps-surface {
     color: inherit;
   }
@@ -2306,15 +2464,14 @@
       color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
     border-radius: var(--radius-box);
     background: var(--color-base-100);
-    overflow-x: auto;
+    container-type: inline-size;
   }
   .caps-permission-grid-caption {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2xs);
     padding: var(--spacing-sm) var(--spacing-md);
-    border-bottom: var(--border) solid
-      color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid-title {
     font-family: var(--font-mono);
@@ -2330,8 +2487,18 @@
   .caps-permission-grid table {
     width: 100%;
     border-collapse: collapse;
+    table-layout: fixed;
     font-size: 0.875rem;
   }
+  .caps-permission-grid-col-state {
+    width: 5rem;
+  }
+  .caps-permission-grid-col-scope {
+    width: 28%;
+  }
+  .caps-permission-grid-col-control {
+    width: 5.5rem;
+  }
   .caps-permission-grid thead th {
     padding: var(--spacing-xs) var(--spacing-md);
     font-family: var(--font-mono);
@@ -2341,8 +2508,7 @@
     text-align: start;
     text-transform: uppercase;
     opacity: 0.7;
-    border-bottom: var(--border) solid
-      color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid tbody td,
   .caps-permission-grid tbody th {
@@ -2350,14 +2516,13 @@
     text-align: start;
     vertical-align: middle;
     font-weight: 400;
-    border-bottom: var(--border) dashed
-      color-mix(in oklch, var(--color-base-content) 14%, var(--color-base-100));
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid tbody tr:last-child > * {
     border-bottom: 0;
   }
   .caps-permission-grid-index {
-    width: 1%;
+    width: 5.5rem;
     white-space: nowrap;
     font-family: var(--font-mono);
     font-size: 0.75rem;
@@ -2366,7 +2531,12 @@
   .caps-permission-grid-index > span {
     display: block;
   }
+  .caps-permission-grid-index {
+    overflow: hidden;
+  }
   .caps-permission-grid-group {
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-size: 0.625rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -2414,6 +2584,41 @@
     font-size: 0.75rem;
     opacity: 0.8;
   }
+  /* On a narrow grid (a phone, or a narrow window) the index column and extra
+     padding go, so the switch column is never pushed off the sheet. */
+  @container (width <= 30rem) {
+    .caps-permission-grid-index {
+      display: none;
+    }
+    .caps-permission-grid-col-state {
+      width: 3.25rem;
+    }
+    .caps-permission-grid-col-scope {
+      width: 5.5rem;
+    }
+    .caps-permission-grid-col-control {
+      width: 3.75rem;
+    }
+    .caps-permission-grid thead th,
+    .caps-permission-grid tbody td,
+    .caps-permission-grid tbody th {
+      padding-inline: var(--spacing-xs);
+    }
+    .caps-permission-grid-capability {
+      gap: var(--spacing-xs);
+    }
+    .caps-permission-grid-mark {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .caps-permission-grid-state {
+      font-size: 0.625rem;
+      letter-spacing: 0.02em;
+    }
+    .caps-permission-grid-scope {
+      font-size: 0.6875rem;
+    }
+  }
   .caps-alert {
     display: flex;
     align-items: flex-start;
@@ -3107,7 +3312,7 @@
   }
   .result-state {
     display: grid;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
     justify-items: start;
     padding: var(--spacing-xl);
     border: var(--border) solid var(--color-base-300);
@@ -3125,9 +3330,106 @@
     background: var(--color-base-200);
     color: var(--color-base-content);
   }
-  .result-state h2 {
+  .result-state > * {
+    margin: 0;
+  }
+  .result-state :is(h2, h3, h4) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
     font-size: var(--text-xl);
-    font-weight: 700;
+    font-weight: 600;
+  }
+  .result-state[data-tone="failed"] .result-state-visual {
+    color: var(--color-error);
+  }
+  .result-state[data-tone="done"] .result-state-visual {
+    color: var(--color-success);
+  }
+  .result-state[data-tone="failed"] {
+    border-color: color-mix(
+      in oklab,
+      var(--color-error) 45%,
+      var(--color-base-300)
+    );
+  }
+  .result-state[data-tone="done"] {
+    border-color: color-mix(
+      in oklab,
+      var(--color-success) 45%,
+      var(--color-base-300)
+    );
+  }
+  .result-state-visual {
+    display: grid;
+    place-items: center;
+    max-width: 100%;
+    color: var(--color-primary);
+  }
+  .result-state-steps {
+    display: grid;
+    gap: var(--spacing-xs);
+    margin: 0;
+    padding-inline-start: var(--spacing-lg);
+    font-size: var(--text-sm);
+    list-style: decimal;
+  }
+  .result-state-visual > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .caps-loading-state[data-framed="false"] {
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+  .caps-loading-state-copy {
+    display: grid;
+    flex: 0 1 auto;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  /* One fixed slot per size, so copy aligns down a column of states. */
+  .caps-loading-state > .caps-loader {
+    width: 4rem;
+  }
+  .caps-loading-state[data-size="sm"] > .caps-loader {
+    width: 2rem;
+  }
+  .caps-loading-state[data-size="lg"] > .caps-loader {
+    width: 7rem;
+  }
+  /* With an App icon the state stacks: icon, then loader, then copy. */
+  .caps-loading-state[data-icon] {
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    text-align: center;
+  }
+  .caps-loading-state[data-icon] > .caps-loader {
+    width: auto;
+  }
+  .caps-loading-state-icon {
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+  }
+  .caps-loading-state-icon > svg {
+    width: 100%;
+    height: 100%;
+  }
+  .caps-loading-state-retry {
+    flex: none;
+  }
+  .caps-loading-state-detail {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-sm);
+  }
+  .caps-loading-state[data-size="lg"] {
+    min-height: 6rem;
   }
   .result-state-actions {
     display: flex;
@@ -3738,7 +4040,7 @@
   }
   .caps-pricing-card-banded .caps-pricing-card-description {
     padding-bottom: var(--spacing-md);
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
     color: var(--color-base-content);
     font-size: var(--text-base);
   }
@@ -4035,7 +4337,7 @@
     border-top: calc(var(--border) * 2) solid var(--color-base-content);
   }
   .caps-spec-faq-item {
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-spec-faq-question {
     display: grid;
@@ -5687,6 +5989,33 @@
     opacity: 1;
   }
 
+  /* Pending is not disabled: a busy button keeps its full face, shows its
+     loader and only refuses clicks. */
+  .caps-button[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) {
+    cursor: progress;
+  }
+  /* Three orbiting beads at one text height: dots that read as motion. */
+  .caps-button > .caps-loader {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-inline-end: calc(var(--spacing-xs) * -0.5);
+  }
+  .caps-button-filled[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) {
+    opacity: 1;
+    background-color: var(--btn-bg);
+    color: var(--btn-fg);
+    border-color: var(--caps-button-filled-edge);
+    box-shadow: var(--caps-button-filled-drop);
+  }
+  .caps-button.btn-outline[aria-busy="true"]:is(
+      :disabled,
+      [aria-disabled="true"]
+    ) {
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
+    outline: none;
+  }
+
   /* Finishes are inherited values; roles and native states stay on the button. */
   .caps-button-filled,
   .caps-button.btn-outline {
@@ -7828,7 +8157,7 @@
   .empty-state-bubble .empty-state-title {
     margin: 0;
     font-size: var(--text-lg);
-    font-weight: 800;
+    font-weight: 600;
     line-height: 1.25;
     text-wrap: balance;
   }
@@ -7851,11 +8180,40 @@
   .empty-state-panel .empty-state-actions {
     justify-content: center;
   }
+  .empty-state-panel > .empty-state-visual {
+    min-height: 0;
+    margin-block-end: 0;
+  }
+  .empty-state-suggestions .caps-button {
+    min-height: 2rem;
+    height: 2rem;
+    font-size: var(--text-xs);
+  }
+  /* A chip that cannot be chosen is muted and flat: no plate, no rim. */
+  .empty-state-suggestions
+    .caps-button:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
+    opacity: 0.5;
+    outline: none;
+    box-shadow: none;
+  }
+  .empty-state-primary {
+    display: grid;
+    justify-items: start;
+    gap: var(--spacing-2xs);
+    margin-block-start: var(--spacing-sm);
+  }
+  .empty-state-panel .empty-state-primary {
+    justify-items: center;
+  }
+  .empty-state-reason {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-sm);
+  }
   .empty-state-suggestions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-xs);
-    margin: var(--spacing-xs) 0 0;
+    gap: var(--spacing-sm);
+    margin: var(--spacing-sm) 0 0;
     padding: 0;
     list-style: none;
   }
@@ -8083,7 +8441,7 @@
     margin: 0;
     color: var(--color-base-content);
     font-size: var(--text-sm);
-    font-weight: 700;
+    font-weight: 600;
   }
   .empty-state-hint p {
     max-width: 30rem;
@@ -8109,7 +8467,7 @@
     margin: 0;
     color: var(--color-base-content);
     font-size: var(--text-sm);
-    font-weight: 700;
+    font-weight: 600;
     line-height: 1.5;
   }
   .empty-state-quiet > p {
@@ -8839,6 +9197,21 @@
     min-width: var(--caps-keycap-label-min-width, auto);
     line-height: var(--caps-keycap-label-line-height, inherit);
   }
+  /* An inline shortcut caption: reads as text, never as another button. */
+  .caps-keycap[data-size="hint"] {
+    display: inline-block;
+    min-width: 0;
+    min-height: 0;
+    margin-inline: var(--spacing-2xs);
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--radius-selector);
+    border-color: var(--stipe-hairline-quiet);
+    background: transparent;
+    box-shadow: none;
+    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+    font-size: var(--text-xs);
+    line-height: 1.25;
+  }
   .caps-keycap-button .caps-keycap {
     flex: var(--caps-keycap-shortcut-flex, 0 1 auto);
     min-width: var(