tandem-editor 0.11.2 → 0.13.0

package/dist/client/index.html

@@ -34,6 +34,13 @@
         font-display: swap;
         src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
       }
+      @font-face {
+        font-family: "Hanuman";
+        font-style: normal;
+        font-weight: 400 700;
+        font-display: swap;
+        src: url("/fonts/hanuman-latin.woff2") format("woff2");
+      }
       @font-face {
         font-family: "JetBrains Mono";
         font-style: normal;
@@ -41,10 +48,24 @@
         font-display: swap;
         src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
       }
+      @font-face {
+        font-family: "Sono";
+        font-style: normal;
+        font-weight: 200 800;
+        font-display: swap;
+        src: url("/fonts/sono-latin.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "SN Pro";
+        font-style: normal;
+        font-weight: 400 700;
+        font-display: swap;
+        src: url("/fonts/sn-pro-latin.woff2") format("woff2");
+      }
       :root {
-        --tandem-font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        --tandem-font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
-        --tandem-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+        --tandem-font-sans: "SN Pro", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        --tandem-font-serif: "Hanuman", "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
+        --tandem-font-mono: "Sono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
         --tandem-bg: oklch(0.985 0.004 80);
         --tandem-fg: oklch(0.22 0.012 280);
         --tandem-surface: oklch(1 0 0);
@@ -91,7 +112,8 @@
         --tandem-suggestion-bg: color-mix(in srgb, var(--tandem-suggestion) 10%, var(--tandem-surface));
         --tandem-suggestion-border: color-mix(in srgb, var(--tandem-suggestion) 40%, var(--tandem-border));
         --tandem-accent-border: oklch(0.84 0.10 var(--tandem-accent-h));
-        --tandem-editor-font-family: var(--tandem-font-serif);
+        --tandem-selection-blurred-bg: color-mix(in srgb, var(--tandem-accent) 22%, transparent);
+        --tandem-editor-font-family: var(--tandem-font-sans);
         --tandem-editor-font-size: 17px;
         --tandem-scrollbar-track: oklch(0.96 0.006 80);
         --tandem-scrollbar-thumb: oklch(0.82 0.005 280);
@@ -131,6 +153,13 @@
         --tandem-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);
         --tandem-shadow-3: 0 20px 60px rgba(0, 0, 0, 0.2);
         --tandem-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.18);
+        /* Directional rail shadows — cast inward toward the editor only. The
+           rails sit flush to the window edge; an isotropic shadow would be
+           clipped on the outer side. Light theme. Dark-theme override below. */
+        --tandem-rail-shadow-left: 4px 0 16px -8px rgba(0, 0, 0, 0.18),
+          1px 0 1px rgba(0, 0, 0, 0.03);
+        --tandem-rail-shadow-right: -4px 0 16px -8px rgba(0, 0, 0, 0.18),
+          -1px 0 1px rgba(0, 0, 0, 0.03);
         --tandem-z-base: 1;
         --tandem-z-dropdown: 10;
         --tandem-z-sticky: 100;
@@ -138,20 +167,140 @@
         --tandem-z-modal: 1000;
         --tandem-z-toast: 1100;
         --tandem-z-tooltip: 10000;
+        /* v7 floating chrome clearance/position vars — consumed by W2-W6
+           rails, fmtbar, status pill. W4a maximalist lifted DocumentTabs
+           into the floating TitleBar (44px tall, no in-flow tabs row), so
+           these drop to 52px per the calm-v7.css target. The fmtbar pill is
+           fixed-positioned at top: 52px, height 36px → bottom at viewport
+           y=88. Editor-scroll lives below the titlebar in the flex column,
+           so its top edge is at viewport y=44; an editor padding-top of at
+           least 52px (max(--tandem-space-7, 52px)) lands content at y≥96,
+           clearing the fmtbar with ≥8px breathing. Rails use
+           rail-top-clearance as margin-top inside the editor row → rail top
+           also at y=96, in line with the editor content. */
+        --tandem-fmtbar-top: 52px;
+        --tandem-rail-top-clearance: 52px;
+        --tandem-status-clearance: 36px;
+        /* Bottom inset that any "hugs-content" rail (outline) reserves
+           below itself so the floating status pill (W5) renders into
+           clear space. Sum of pill chrome (status-clearance) + a comfy
+           24px margin. Consumed by PanelSlot's outline branch in W6. */
+        --tandem-status-clearance-total: calc(var(--tandem-status-clearance) + var(--tandem-space-5, 24px));
+        /* Light-mode floating-pill stack (matches v7 calm-v7.css). Warm/dark
+           override --c7-pill-shadow inside their own theme blocks. */
+        --c7-pill-shadow:
+          0 1px 1px rgba(0, 0, 0, 0.04),
+          0 6px 14px -6px rgba(0, 0, 0, 0.10),
+          0 22px 38px -22px rgba(0, 0, 0, 0.16);
+      }
+
+      /* Shared white-mode floating-pill recipe. Applied to every floating
+         chrome surface introduced by Waves 3-6: fmtbar, titlebar clusters,
+         tab pills, +/add pill, mode segment, status pill, mini-toolbar,
+         wincontrols. Surfaces only need .tandem-floating-pill + a sensible
+         border-radius (pill or 14px). Surface-specific overrides (padding,
+         max-width, drag-region) layer on top. */
+      .tandem-floating-pill {
+        background: var(--tandem-surface);
+        border: 1px solid var(--tandem-border);
+        border-radius: var(--tandem-r-pill);
+        box-shadow: var(--c7-pill-shadow);
+        backdrop-filter: saturate(140%) blur(8px);
+        -webkit-backdrop-filter: saturate(140%) blur(8px);
+      }
+      [data-theme="dark"] .tandem-floating-pill {
+        --c7-pill-shadow:
+          0 1px 1px rgba(0, 0, 0, 0.30),
+          0 6px 14px -6px rgba(0, 0, 0, 0.40),
+          0 22px 38px -22px rgba(0, 0, 0, 0.50);
+      }
+
+      /* `filter: opacity()` is used instead of plain `opacity:` so the fade
+         composes with cards that already carry an inline opacity (e.g.
+         accepted cards at 0.6) rather than being clamped by it. Highlights
+         are intentionally excluded — they're user-owned color flags. */
+      [data-tandem-mode="solo"] [data-annotation-type="comment"],
+      [data-tandem-mode="solo"] [data-annotation-type="note"],
+      [data-tandem-mode="solo"] [data-testid="margin-column-left"] .margin-bubble,
+      [data-tandem-mode="solo"] [data-testid="margin-column-right"] .margin-bubble {
+        filter: opacity(0.45);
+        transition: filter 200ms ease;
+      }
+
+      /* Fade the in-editor underline decorations to match the side-panel card
+         fade above — keeps the visual weight of comments/notes consistent
+         between the editor and the panel in solo mode. */
+      [data-tandem-mode="solo"] .tandem-comment,
+      [data-tandem-mode="solo"] .tandem-note {
+        opacity: 0.45;
+        transition: opacity 200ms ease;
+      }
+
+      /* Slash command menu — v7 floating-card variant.
+         Inherits floating-pill bg/border/shadow then overrides border-radius
+         to a card shape (menus aren't pill-shaped) and stacks an item list
+         with a keyboard-hint footer. */
+      .tandem-slash-menu {
+        border-radius: var(--tandem-r-4);
+        min-width: 200px;
+        padding: var(--tandem-space-1);
+        z-index: var(--tandem-z-popover, 1100);
+      }
+      .tandem-slash-menu__item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: var(--tandem-space-1) var(--tandem-space-3);
+        border: 1px solid transparent;
+        border-radius: var(--tandem-r-2);
+        background: transparent;
+        color: var(--tandem-fg);
+        font: inherit;
+        font-size: var(--tandem-text-sm);
+        text-align: left;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .tandem-slash-menu__item:hover {
+        background: color-mix(in srgb, var(--tandem-fg) 5%, transparent);
+      }
+      .tandem-slash-menu__item[aria-selected="true"] {
+        background: var(--tandem-accent-bg);
+        color: var(--tandem-accent-fg-strong);
+        border-color: var(--tandem-accent-border);
+      }
+      .tandem-slash-menu__hint {
+        display: flex;
+        gap: var(--tandem-space-3);
+        padding: var(--tandem-space-1) var(--tandem-space-3);
+        margin-top: var(--tandem-space-1);
+        border-top: 1px solid var(--tandem-border);
+        font-size: var(--tandem-text-2xs);
+        color: var(--tandem-fg-faint);
+      }
+      .tandem-slash-menu__hint kbd {
+        font-family: var(--tandem-font-mono);
+        font-size: var(--tandem-text-2xs);
+        padding: 0 4px;
+        border: 1px solid var(--tandem-border);
+        border-radius: var(--tandem-r-1);
+        background: var(--tandem-surface-muted);
+        color: var(--tandem-fg-subtle);
       }
 
       [data-theme="dark"] {
-        --tandem-bg: oklch(0.18 0.012 270);
-        --tandem-fg: oklch(0.94 0.005 80);
-        --tandem-surface: oklch(0.22 0.012 270);
-        --tandem-surface-muted: oklch(0.20 0.012 270);
-        --tandem-surface-sunk: oklch(0.16 0.012 270);
-        --tandem-border: oklch(0.30 0.012 270);
-        --tandem-border-strong: oklch(0.38 0.014 270);
-        --tandem-fg-muted: oklch(0.72 0.008 80);
-        /* Lightened from 0.55 → 0.70 to meet WCAG AA 4.5:1 on --tandem-surface-muted (0.20) */
-        --tandem-fg-subtle: oklch(0.70 0.008 80);
-        --tandem-fg-faint: oklch(0.58 0.010 270);
+        /* Tracks the calm-v7 dark canon at hue 280°. */
+        --tandem-bg: oklch(0.22 0.012 280);
+        --tandem-fg: oklch(0.94 0.006 280);
+        --tandem-surface: oklch(0.27 0.012 280);
+        --tandem-surface-muted: oklch(0.25 0.012 280);
+        --tandem-surface-sunk: oklch(0.20 0.012 280);
+        --tandem-border: oklch(0.34 0.010 280);
+        --tandem-border-strong: oklch(0.42 0.012 280);
+        --tandem-fg-muted: oklch(0.74 0.008 280);
+        /* 0.70 keeps WCAG AA 4.5:1 against --tandem-surface-muted (0.25). */
+        --tandem-fg-subtle: oklch(0.70 0.008 280);
+        --tandem-fg-faint: oklch(0.58 0.008 280);
         --tandem-accent-h: 275deg;
         --tandem-accent: oklch(0.72 0.14 var(--tandem-accent-h));
         --tandem-accent-fg: oklch(0.15 0.01 var(--tandem-accent-h));
@@ -187,6 +336,7 @@
         --tandem-suggestion-bg: #2e1065;
         --tandem-suggestion-border: #4c1d95;
         --tandem-accent-border: oklch(0.45 0.14 var(--tandem-accent-h));
+        --tandem-selection-blurred-bg: color-mix(in srgb, var(--tandem-accent) 32%, transparent);
         --tandem-scrollbar-track: oklch(0.16 0.012 270);
         --tandem-scrollbar-thumb: oklch(0.38 0.014 270);
         --tandem-highlight-yellow: rgba(255, 220, 0, 0.38);
@@ -196,6 +346,45 @@
         --tandem-page-bg: #2a2a2a;
         --tandem-page-paper: #1a1a1a;
         --tandem-page-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+        --tandem-rail-shadow-left: 4px 0 18px -6px rgba(0, 0, 0, 0.55),
+          1px 0 1px rgba(0, 0, 0, 0.25);
+        --tandem-rail-shadow-right: -4px 0 18px -6px rgba(0, 0, 0, 0.55),
+          -1px 0 1px rgba(0, 0, 0, 0.25);
+      }
+
+      /* Warm canvas theme — v7 floating chrome. OKLCH values come straight
+         from calm-v7.css. Foundational tokens only: surface family + border
+         + scrollbars + page metaphor + the shared pill-shadow used by every
+         floating-pill surface (titlebar clusters, fmtbar, tabs, status,
+         rails, wincontrols). Component-level adoption happens in W3-W6. */
+      [data-theme="warm"] {
+        --tandem-bg: oklch(0.945 0.012 70);
+        --tandem-fg: oklch(0.22 0.012 280);
+        --tandem-surface: oklch(0.975 0.005 75);
+        --tandem-surface-muted: oklch(0.960 0.010 75);
+        --tandem-surface-sunk: oklch(0.920 0.014 65);
+        --tandem-border: oklch(0.91 0.006 75);
+        --tandem-border-strong: oklch(0.84 0.008 75);
+        --tandem-fg-muted: oklch(0.48 0.008 280);
+        --tandem-fg-subtle: oklch(0.54 0.008 280);
+        --tandem-fg-faint: oklch(0.64 0.005 280);
+        --tandem-scrollbar-track: oklch(0.94 0.012 70);
+        --tandem-scrollbar-thumb: oklch(0.78 0.010 75);
+        --tandem-page-bg: oklch(0.925 0.012 70);
+        --tandem-page-paper: oklch(0.985 0.005 75);
+        --tandem-page-shadow: 0 2px 8px oklch(0 0 0 / 0.12);
+        /* Floating-pill shadow stack — consumed by the shared
+           .tandem-floating-pill class introduced in W3. Three light/dark
+           variants of the same shape are exposed so each surface can pick
+           the right contrast against its canvas. */
+        --c7-pill-shadow:
+          0 1px 1px oklch(0 0 0 / 0.03),
+          0 4px 10px -4px oklch(0 0 0 / 0.10),
+          0 16px 30px -18px oklch(0 0 0 / 0.18);
+        --c7-pill-shadow-white:
+          0 1px 1px oklch(0 0 0 / 0.04),
+          0 6px 14px -6px oklch(0 0 0 / 0.10),
+          0 22px 38px -22px oklch(0 0 0 / 0.16);
       }
 
       /* density spacing scale — cozy is the default (matches :root values) */
@@ -289,8 +478,8 @@
         scrollbar-color: var(--tandem-scrollbar-thumb) var(--tandem-scrollbar-track);
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-CfT503n4.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DeJe09pn.css">
+    <script type="module" crossorigin src="/assets/index-g-KwmRn9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D8uS4cj7.css">
   </head>
   <body>
     <div id="root"></div>