arrives with all four */ .re-diagram-ctrls{position:absolute;top:var(--re-space-3);right:var(--re-space-3);z-index:2;display:flex;gap:var(--re-space-1)} /* The controls float OVER the canvas, so they need a ground of their own — a transparent button with the graph running under it reads as part of the graph. --popover, not --card: the relationship inverts between themes and --card only gets one of them right. Measured — canvas (--surface) is 98% in light and 23% in dark; --card is 100% and 22.5%, so it is a step brighter in light and a step DARKER in dark. --popover is 100% and 25%: one step out of the page in both, which is what "floating above content" means. */ .re-diagram-ctrls > .re-btn{background:var(--popover)} /* re-btn-outline's hover is a TRANSPARENT tint, which is right on a page and wrong here: it replaces the ground the rule above just gave the button, so hovering put the graph back underneath. Mix the tint INTO --popover instead of over nothing — the button stays opaque and still reads as hovered. */ /* Mixing --primary in tinted these purple, which reads as a selected state rather than a hover — a control over a diagram is chrome, and chrome hovers NEUTRAL. --foreground into --popover is the DS's own neutral hover (re-row-menu, re-prompt-action): a few tones darker in light, a few lighter in dark, and it stays opaque either way. */ .re-diagram-ctrls > .re-btn:hover:not(:disabled){ background:color-mix(in oklch,var(--foreground) 8%,var(--popover))} /* fullscreen — the frame fills the SCREEN, minus one uniform gap. It used to be `min(1400px, 92vw)` by `min(900px, 88vh)`, and on any display wider than 1522px the two absolute caps won: measured at 1920x1080, a 1400x900 frame inside a 1920x1080 screen — 66% of the pixels, with the rest of the screen dimmed and unused. A diagram is the one thing in the DS with no natural size of its own, so "fullscreen" should mean the screen; capping it in px picked a canvas for the reader. One gap on all four sides, so the frame carries the viewport's proportions instead of a chosen ratio, and the backdrop's own padding steps aside so the gap has a single owner. dvh, not vh: on a phone the browser chrome makes vh taller than what you can see. */ .re-modal-backdrop > .re-diagram-full{ --re-diagram-full-gap:24px; width:calc(100vw - 2 * var(--re-diagram-full-gap)); height:calc(100dvh - 2 * var(--re-diagram-full-gap)); --re-diagram-h:auto;aspect-ratio:auto;min-height:0; box-shadow:var(--shadow-lg);border-color:var(--border-elevated)} .re-modal-backdrop:has(> .re-diagram-full){padding:0} /* an empty frame still has to say so, like every other container in the DS */ .re-diagram-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:calc(0.8125rem * var(--font-scale));color:var(--muted-foreground)} /* ── re-diagram-window — the frame plus the chrome a real map needs ────────────── re-diagram is a canvas. A map that a reader has to *work* is a canvas plus four things, and a consumer built all four by hand (measured on ai-environment-map): a filter bar, the controls moved into that bar, a reading note under the canvas, and a colour key. Worse, it forked reDiagramFull into mapDiagramFull for one reason — going fullscreen has to take the WINDOW, not the canvas. A canvas that leaves its filters and its key behind on the way to fullscreen is less usable large than it was small. Structure — the window is a flex column and the canvas is the only part that grows: re-diagram-window ├─ re-diagram-bar filters (an re-fn) + re-diagram-ctrls, pushed right ├─ re-diagram the canvas; loses its own border and radius here ├─ re-diagram-note "how to read this" — part of the diagram, not of the page └─ re-diagram-legend the colour key; re-c-{role} on each dot Every part is optional and order is not enforced: a window with only a bar is valid, and the note can sit above the legend or replace it. */ .re-diagram-window{display:flex;flex-direction:column;min-width:0; border:1px solid var(--border);border-radius:var(--radius-surface);background:var(--card); box-shadow:var(--shadow-sm);overflow:hidden} /* The canvas gives up its frame to the window and becomes the part that grows. Nothing else in the window may grow — a note that stretches leaves the canvas short. */ /* At rest the canvas takes its ratio height — `flex:1` with `min-height:0` let it shrink below the ratio, which is the squeeze itself. In fullscreen it becomes the growing part, and there the flex row owns the height so the ratio steps aside. */ .re-diagram-window > .re-diagram{border:0;border-radius:0;flex:none} .re-diagram-window.re-diagram-full > .re-diagram{flex:1 1 0;min-height:0; height:auto;aspect-ratio:auto} .re-diagram-window > .re-diagram-bar, .re-diagram-window > .re-diagram-note, .re-diagram-window > .re-diagram-legend{flex:none} /* ONE row, never wrapping. With flex-wrap the controls dropped to a second line the moment the filters filled the row, and margin-left:auto then pushed them right across an empty gap — measured at a 618px window: a 2-row bar, 130px tall, most of it blank. A toolbar that grows a row when you add a filter is a toolbar that moves the canvas. So the filters get a scrolling slot and the controls stay pinned. */ .re-diagram-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--re-space-2); padding:var(--re-space-2) var(--re-box-inset);border-bottom:1px solid var(--border)} /* The filter slot: whatever strip you put first grows and scrolls instead of pushing the controls off. re-chip-strip is the DS's own answer for this and needs no extra class here. */ .re-diagram-bar > .re-chip-strip, .re-diagram-bar > .re-filter-bar{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap; /* No scrollbar gutter: a classic scrollbar takes layout space, so the bar was 62px tall when the filters overflowed and 53px when they did not — measured at 1200 / 760 / 500px. A toolbar that changes height as you add a filter moves the canvas under the reader, which is the thing this one row exists to prevent. The chips are swipeable and the last one is cut off at the edge, so nothing is hidden by hiding the bar. */ scrollbar-width:none; /* Fade the trailing edge, because the strip's own edge is a HARD CUT: at rest the last chip was sliced through its border a few px from the reset button, which reads as a rendering fault rather than "there is more this way". The mask is self-correcting — with nothing to scroll the last chip sits left of the fade and nothing looks faded; it only bites when content actually reaches the edge, which is exactly when it should. */ mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent); padding-right:6px} .re-diagram-bar > .re-chip-strip::-webkit-scrollbar, .re-diagram-bar > .re-filter-bar::-webkit-scrollbar{display:none} /* In a bar the cluster is a bar item, not an overlay — and the canvas's own copy steps aside so the two cannot both be on screen. */ .re-diagram-bar > .re-diagram-ctrls{position:static;margin-left:auto;flex:none} .re-diagram-window:has(> .re-diagram-bar > .re-diagram-ctrls) > .re-diagram > .re-diagram-ctrls{display:none} .re-diagram-note{padding:var(--re-space-3) var(--re-box-inset);border-top:1px solid var(--border); display:flex;flex-direction:column;gap:var(--re-space-1)} /* the note's heading aligns with the note's own text — the box already supplies the inset */ .re-diagram-note > .re-section-label{--re-label-gutter:0px;margin:0} .re-diagram-note > p{margin:0;font-size:calc(0.8125rem * var(--font-scale));line-height:1.6; color:var(--text-strong-muted)} .re-diagram-legend{display:flex;flex-wrap:wrap;gap:var(--re-space-1) var(--re-space-4); padding:var(--re-space-2) var(--re-box-inset);border-top:1px solid var(--border); font-size:calc(0.6875rem * var(--font-scale));color:var(--muted-foreground)} .re-diagram-legend > * {display:inline-flex;align-items:center;gap:var(--re-space-1)} /* the dot reads the role tokens, so a key entry is `re-c-success` rather than an inline hex */ .re-diagram-legend-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0; background:var(--_solid,var(--muted-foreground))} /* ── re-section-block — the heading and the thing it heads, as ONE unit ────────── A label belongs to its box the way an

belongs to the paragraph under it, and that distance is the DS's to set — not the consumer's column gap. Without a wrapper the two are just siblings in someone's flex column, so `head, list, head, list` all sit at the same distance and the heading reads as floating between two boxes rather than sitting on one. The block owns the INTERNAL rhythm; separating one block from the next stays the parent's job, because that is what a gap column is for. / .re-section-block{--re-section-gap:calc(10px var(--density-mult,1)); display:flex;flex-direction:column;gap:var(--re-section-gap)} /* v14 §V14-3 — a hint that is a DIRECT child of the block is that section's description, so it takes the same gutter as the heading. The role comes from the container, not from a new class: `re-hint` is not always a section description (it also sits under a form field, where a gutter indent would be wrong), so putting padding on `.re-hint` itself would have been the wrong fix — and a consumer measured exactly that objection before we got here. The icon moves INTO the gutter rather than pushing the text along, same as the label. That is what the measurement actually found: without an icon the text sat 19px left of the heading, and WITH one it sat 3px right of it — 15px icon + 7px gap = 22px against a 19px gutter. So the icon'd case was never aligned either; it was close enough that nobody saw it. An alignment that comes out right because of a neighbouring component's width is not written down. / .re-section-block > .re-hint{position:relative;padding-inline:var(--re-label-gutter);gap:0} / One `gap` was doing two jobs: separating the section's PARTS (label · box · explanation) and separating LINES inside the explanation. Equal, the grouping information is gone — a reader cannot tell from the spacing whether two sentences belong to the same thing. Reported with the measurement: box→hint 10px, hint→hint 10px, identical (labs §V29-1). Written as the DIFFERENCE between two named gaps rather than a bare negative number, because the difference IS the information: a line gap smaller than the part gap. Change either token and the relationship holds. / .re-section-block > .re-hint + .re-hint{margin-top:calc(var(--re-hint-gap) - var(--re-section-gap))} .re-section-block > .re-hint > svg{position:absolute;left:0;top:2px} .re-section-block > .re-section-head,.re-section-block > .re-section-label{margin:0} / ── re-section-flush — the heading has no box to align to ─────────────────────── re-section-label indents by --re-label-gutter because it heads THE BOX beneath it, so its text lands on that box's text inset. When what it heads is NOT a box — a chip strip, a row of people, a bare group of buttons — there is no text inset to meet, and the indent reads as exactly the error it exists to prevent: a heading floating right of everything under it. One token, so the label, its subline and the block's description all follow. Put it on the block, or on a standalone label. This is the small sibling of re-section-bleed: that one moves the BOX out to the heading, this one gives up the indent because there is no box. Both end with one text column. / .re-section-flush{--re-label-gutter:0px} .re-section-label svg{width:var(--re-label-icon);height:var(--re-label-icon)} / ── re-section-bleed — the section becomes ONE text column ────────────────────── The default is two columns and that is correct: a page title heads the PAGE so it sits at the container edge, while an re-section-label heads THE BOX under it so it sits at that box's text inset. Correct, and it still reads as an indent error when the two are stacked -- h1 at the edge, label 18px in, box edge further out again. This modifier collapses them. The heading keeps the container edge; the box is pulled outward by its own inset so the box's TEXT lands on that same edge. Nothing moves relative to the reader's eye except the box's frame, which is the one thing that was never in the text column to begin with. iOS and macOS Settings are built this way. It is a CHOICE, not a fix. Use it when a section is a page of stacked boxes and the heading column is what the reader tracks; keep the default when the boxes are cards in a grid, where a frame that overhangs its neighbours reads as a mistake. --_bleed is declared HERE, on the component, not on :root. That is deliberate and it is what keeps the knob working: a custom property is substituted at the element that declares it, so a :root-only --_bleed would resolve against :root's radius and inherit that number into a subtree with its own data-radius. Declared on the block, it resolves against whatever knob block the section is actually sitting in -- with no per-knob restatement to keep in sync. The pull is --re-label-gutter, not --re-box-inset: that token is already defined as the inset PLUS the box's 1px border, which is exactly the difference between where the box's frame starts and where its text does. Measured with --re-box-inset the three texts landed within 1px of each other at every setting -- the border, every time. The min() is the structural guarantee: the box can reach the page gutter's edge and can never go past it into horizontal scroll. Reaching it is by design -- on a phone a bled list runs to the screen margin, which is the platform convention. --re-gutter takes --re-label-gutter as its floor, so the cap does not bite at any density or radius; it is insurance, not the everyday path. / .re-section-bleed{margin-inline:calc(-1 var(--_re-bleed));--_re-bleed:min(var(--re-label-gutter),var(--re-gutter))} /* the heading parts step back IN, and drop the box gutter -- they are the text column now, so they have nothing left to indent against / .re-section-bleed > .re-section-head, .re-section-bleed > .re-section-label, .re-section-bleed > .re-hint{margin-inline:var(--_re-bleed);--re-label-gutter:0px} / ══ Navbar nav styles — alternatives to the default button-fill item ══ Put a style modifier on re-navbar-nav; it recolors every item inside. default (button): filled hover/active · -text: color-only · -tabs: underline. / .re-navbar-nav-text .re-navbar-item, .re-navbar-nav-tabs .re-navbar-item{background:none} .re-navbar-nav-text .re-navbar-item:hover, .re-navbar-nav-tabs .re-navbar-item:hover{background:none;color:var(--foreground)} .re-navbar-nav-text .re-navbar-item.active,.re-navbar-nav-text .re-navbar-item[aria-current="page"], .re-navbar-nav-tabs .re-navbar-item.active,.re-navbar-nav-tabs .re-navbar-item[aria-current="page"]{background:none;color:var(--primary)} / active on hover → a softer shade of the active colour / .re-navbar-nav-text .re-navbar-item.active:hover, .re-navbar-nav-tabs .re-navbar-item.active:hover{color:color-mix(in srgb,var(--primary) 62%,var(--muted-foreground))} / tabs: active gets a 2px underline in the text colour, flush to the navbar's edge / .re-navbar-nav-tabs{align-self:stretch} .re-navbar-nav-tabs .re-navbar-item{height:100%;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-2px} .re-navbar-nav-tabs .re-navbar-item.active,.re-navbar-nav-tabs .re-navbar-item[aria-current="page"]{border-bottom-color:var(--primary)} / Navbar dropdown — item with a submenu; caret rotates, opens on hover. / .re-navbar-dropdown{position:relative;display:inline-flex} .re-navbar-caret{width:14px;height:14px;transition:transform .15s} .re-navbar-dropdown:hover .re-navbar-caret,.re-navbar-dropdown:focus-within .re-navbar-caret{transform:rotate(180deg)} .re-navbar-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:184px;z-index:200;padding:6px; background:var(--card);border:1px solid var(--border-elevated);border-radius:var(--radius-md);box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s,transform .12s,visibility .12s} .re-navbar-dropdown:hover .re-navbar-menu,.re-navbar-dropdown:focus-within .re-navbar-menu, .re-navbar-menu.open{opacity:1;visibility:visible;transform:translateY(0)} / v2 A4 — .open state for touch (no hover; iOS gives buttons no focus → :focus-within dead). JS toggles .open, mirroring re-dropdown / .re-navbar-menu-end{left:auto;right:0} / right-aligned menu (e.g. a profile avatar) / .re-navbar-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:var(--radius-inset); font-family:inherit;font-size:calc(0.875rem var(--font-scale));color:var(--_text,var(--foreground));text-decoration:none;background:none;border:none;cursor:pointer;text-align:left;white-space:nowrap} .re-navbar-menu-item svg{width:var(--re-icon);height:var(--re-icon);flex-shrink:0} .re-navbar-menu-item:hover{background:color-mix(in srgb,currentColor 8%,transparent)} .re-navbar-menu-item.active{color:var(--primary)} .re-navbar-menu-sep{height:1px;background:var(--border);margin:6px 0} /* ══════════════════════════════════════════════════════════════════ AI / chat family (from the _labs §2.3 + itops §B1 gap reports). ══════════════════════════════════════════════════════════════════ / / ── re-prompt-bar — AI prompt / chat input ─────────────────────── Left icon (mic/sparkle) · middle input or teaser text · round send. Teaser mode: re-prompt-text + re-prompt-caret. re-c-{role} recolors send. / / ── v6 V6-10 — elevation & border language ──────────────────────────────────────────── One rule decides which border a surface reads: • it sits INSIDE a box (row divider, table rule, section edge) → --border • it OVERLAYS content and carries --shadow-md/lg → --border-elevated The second group is: prompt bar, tab-bar island, dropdown menu, navbar menu, popover, modal, toast, search modal. They now share one edge tone, so a screen speaks one language instead of each component having been written on its own day. / / v6 V6-10 — a floating input needs to separate from whatever scrolls under it, so it reads --border-elevated and --shadow-md. --shadow-sm is 8% alpha: enough on a desktop, invisible at phone scale where --card and --background are both near-white. / / The bar owns its type, not each slot. It used to be written twice — on .re-prompt-input AND on .re-prompt-text, which are alternatives to each other — and -sm overrode only the first, so an animated-text bar stayed 15px inside a small bar. Declaring it here also gives .re-prompt-icon a text to follow: it was reading 16px off the page root. / .re-prompt-bar{font-size:calc(0.9375rem var(--font-scale)); display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px; background:var(--card);border:1px solid var(--border); /* same reasoning as re-pull-badge: --shadow-md already separates it /border-radius:var(--radius-full);box-shadow:var(--shadow-md);transition:border-color .12s,box-shadow .12s} .re-prompt-bar:focus-within{border-color:var(--_solid,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--_solid,var(--primary)) 14%,transparent)} .re-prompt-icon{flex-shrink:0;display:inline-flex;color:var(--muted-foreground)} .re-prompt-icon svg{width:var(--re-icon);height:var(--re-icon)} .re-prompt-input{flex:1;min-width:0;height:calc(var(--control-h-md) - 10px);border:none;background:none;outline:none;font-family:inherit;font-size:inherit;color:var(--foreground)} .re-prompt-input::placeholder{color:var(--muted-foreground)} .re-prompt-text{flex:1;min-width:0;color:var(--muted-foreground);white-space:nowrap;overflow:hidden} .re-prompt-caret{display:inline-block;width:2px;height:1.05em;vertical-align:text-bottom;background:var(--primary);margin-left:1px;animation:re-blink 1.05s step-end infinite} @keyframes re-blink{50%{opacity:0}} .re-prompt-send,.re-prompt-voice{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md); border-radius:50%;border:none;background:var(--_solid,var(--primary));color:var(--_fg,var(--primary-foreground));cursor:pointer;transition:opacity .12s} .re-prompt-send:hover,.re-prompt-voice:hover{opacity:.9} / The three round buttons in the bar are --control-h-md across; their glyph is a fraction of that, so it follows density with the button instead of standing still at 18px. / .re-prompt-send,.re-prompt-voice,.re-prompt-action{--re-prompt-btn-icon:calc(var(--control-h-md) .43)} .re-prompt-send svg,.re-prompt-voice svg{width:var(--re-prompt-btn-icon);height:var(--re-prompt-btn-icon)} /* v5 V5-1 — secondary action (mic, attach, model picker): same round footprint as -send but borderless and unfilled, so send stays the single primary. Scales with the bar's size. / .re-prompt-action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:var(--control-h-md);height:var(--control-h-md);padding:0;border:none;border-radius:50%; background:none;color:var(--muted-foreground);font-family:inherit;cursor:pointer;transition:background .12s,color .12s} .re-prompt-action svg{width:var(--re-prompt-btn-icon);height:var(--re-prompt-btn-icon)} .re-prompt-action:hover:not(:disabled){background:color-mix(in oklch,var(--foreground) 6%,transparent);color:var(--foreground)} .re-prompt-action:disabled{opacity:.4;cursor:not-allowed} .re-prompt-bar-sm{font-size:calc(0.875rem var(--font-scale));padding:4px 4px 4px 12px} .re-prompt-bar-sm .re-prompt-send,.re-prompt-bar-sm .re-prompt-voice,.re-prompt-bar-sm .re-prompt-action{width:var(--control-h-sm);height:var(--control-h-sm)} .re-prompt-bar-sm .re-prompt-input{height:calc(var(--control-h-sm) - 8px)} .re-prompt-bar-lg{padding:7px 7px 7px 18px} .re-prompt-bar-lg .re-prompt-send,.re-prompt-bar-lg .re-prompt-voice,.re-prompt-bar-lg .re-prompt-action{width:var(--control-h-lg);height:var(--control-h-lg)} /* A LEADING round action (attach / model picker, ChatGPT's "+") replaces the text inset, so drop the extra left padding at every size. / / The + menu belongs to the BAR, not just to its button: the default offset is measured from the trigger, which lands the menu on the shell's bottom edge. Clear the bar's own padding and border so a real gap remains at every size. / .re-prompt-bar .re-dropdown-menu{top:calc(100% + 12px)} .re-prompt-bar-sm .re-dropdown-menu{top:calc(100% + 11px)} .re-prompt-bar-lg .re-dropdown-menu{top:calc(100% + 14px)} .re-prompt-bar:has(> :is(.re-prompt-action,.re-dropdown):first-child){padding-left:5px} .re-prompt-bar-sm:has(> :is(.re-prompt-action,.re-dropdown):first-child){padding-left:4px} .re-prompt-bar-lg:has(> :is(.re-prompt-action,.re-dropdown):first-child){padding-left:7px} / VOICE ⇄ SEND — the SOLID trailing slot shows one button: voice mode (re-prompt-voice, audio-lines) while the field is empty, send once there is text. A dictation mic, if any, is a separate borderless re-prompt-action and stays put through both states. CSS-only (:has() + :placeholder-shown), so the input must carry a placeholder. / .re-prompt-bar:has(.re-prompt-voice):has(.re-prompt-input:placeholder-shown) .re-prompt-send{display:none} .re-prompt-bar:has(.re-prompt-voice):has(.re-prompt-input:not(:placeholder-shown)) .re-prompt-voice{display:none} / ── re-bubble — chat bubble + typing indicator ───────────────────── / .re-bubble{max-width:78%;width:fit-content;padding:8px 12px;border-radius:calc(var(--radius-surface) - 2px);background:var(--muted);color:var(--foreground);font-size:calc(0.875rem var(--font-scale));line-height:1.45} .re-bubble-mark{font-size:calc(0.6875rem * var(--font-scale));font-weight:600;color:var(--muted-foreground);margin:0 0 3px 4px} /* ══ Provenance — how a surface says "a machine made this" (labs §V32-1) ═══════════════ One question asked in four places: a card heading, above a chat bubble, at the head of a list row, and inline while a tool is still running. Four local classes existed across the product family, all answering it differently, and the cost was already visible — a sibling product put `sparkles` on a RULE-BASED explanation because there was no mark for the other thing. So this is one surface with three parts, not four components. ⚠ It is NOT re-bubble-mark and NOT re-badge, and the distinction is the design: re-bubble-mark is a TEXT label answering "who said this" — a name. re-ai-mark is an ICON seal answering "what made this" — a provenance. re-badge is a STATE ("3 open"); re-ai-status is a PROCESS, and it has a live indicator in it, which a badge has no room for. The two marks can appear on the same bubble, and that is why the seal could not be folded into the label: one says Dana, the other says the model. / / ── The seal ── the same mark in all three places, so provenance reads the same everywhere. Sized from the type it sits with (em), not a pixel, so it follows density and any local font-size without a second number. / .re-ai-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:1.7em;height:1.7em;border-radius:50%; background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary)} .re-ai-mark > svg{width:60%;height:60%} / On a bubble it sits ABOVE the bubble, on the label's line — the bubble itself is the message and must not carry chrome inside it. / .re-bubble-mark > .re-ai-mark{margin-right:5px;vertical-align:-0.4em} / ── The process line ── a tool is running and the interface is not stuck. Lives IN the flow, not in a corner: it is part of the transcript, and it is replaced by the result rather than dismissed. re-spinner is the DS's; only the row was missing. / .re-ai-status{display:flex;align-items:center;gap:var(--re-space-2); padding:var(--re-space-2) var(--re-box-inset); border-radius:var(--radius-inset);background:var(--surface); font-size:calc(0.8125rem var(--font-scale));color:var(--muted-foreground)} .re-ai-status-name{font-weight:600;color:var(--foreground)} /* Finished. The slot stays — the line must not jump when the tool resolves — but it is FILLED, not emptied: an invisible spinner holding its width reads as an unexplained indent, which is what a review saw. A check says the same thing the empty space was trying to say. Drawn from the spinner's own box rather than asking for different markup, so the consumer swaps one class on the row and nothing else. / .re-ai-status-done{color:var(--muted-foreground)} .re-ai-status-done > .re-spinner{animation:none;border-color:transparent;position:relative} .re-ai-status-done > .re-spinner::after{content:"";position:absolute; left:50%;top:45%;width:32%;height:62%; border:2px solid var(--success);border-top:0;border-left:0; transform:translate(-50%,-50%) rotate(45deg)} / ── The derived row ── "this row's content was inferred, you did not write it". A TINT, not an inset shadow: the DS says provenance with the seal and grouping with a ground, and an inset shadow would be a third vocabulary for the same idea. The seal goes in re-row-lead, so the row does not need a second signal of its own — the tint groups, the seal names. / .re-row-ai{background:color-mix(in oklab,var(--primary) 4%,transparent)} .re-row-ai:hover{background:color-mix(in oklab,var(--primary) 7%,transparent)} .re-bubble-time{display:block;font-size:calc(0.625rem var(--font-scale));color:var(--muted-foreground);margin-top:3px} .re-bubble-out{margin-left:auto;background:var(--primary);color:var(--primary-foreground)} .re-bubble-out .re-bubble-time{color:color-mix(in srgb,var(--primary-foreground) 72%,transparent)} /* Typing indicator — dots are direct children (re-dots is taken by the dot-grid effect). / .re-typing{display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:11px 14px;border-radius:calc(var(--radius-surface) - 2px);background:var(--muted)} .re-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted-foreground);animation:re-typing-bounce 1.2s infinite} .re-typing span:nth-child(2){animation-delay:.15s} .re-typing span:nth-child(3){animation-delay:.3s} @keyframes re-typing-bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} / ── re-timeline + re-slot — hour timeline ────────────────────────── / .re-timeline{display:flex;flex-direction:column} / A run of slots that belongs together, with a rule between one run and the next. It exists because of what a consumer built for all-day events and it is the better answer to that problem than the band the DS shipped: re-cal-allday was a SECOND, differently shaped thing above the rail, and this is the same row shape with the time column saying something other than a time. One structure instead of two — the same move as re-row-eyebrow, where the fix was not a new container but letting the existing row say the extra thing. The rail needs nothing: it trims itself with .re-slot:first-child / :last-child, and those are relative to the GROUP, so each run gets its own line with a dot per row and the line stops at the run's ends. Two all-day events therefore extend the rail exactly like two timed ones do. The separator is between SIBLINGS, so the first group never carries a top rule and nobody has to remember which one is first. (kullanıcı, 2026-09-08 — `calendar`'ın tüm gün turu) / / Equal space on both sides of the rule has to mean equal OPTICAL space, and 20px each way did not give that: measured 32 above, 21 below. The 12px difference is re-slot-content's own `padding-bottom:12px` — the gap it keeps between consecutive rows — which on the LAST row of a group lands on top of the separator's margin instead of between two rows. The group's spacing is that gap there, so the row touching the rule gives it up. ⚠ min-height was my first guess and it was wrong: the row measured 54.8px, i.e. above the 46px floor, so the floor was not adding anything. Measured before believing it. / .re-timeline-group > .re-slot:last-child > .re-slot-content{padding-bottom:0} .re-timeline-group + .re-timeline-group{margin-top:var(--re-space-4);padding-top:var(--re-space-4);border-top:1px solid var(--border)} / v5 V5-2 — an hour timeline is semantically a list, so it is often an
/
. Kill the UA markers and the 40px indent that would push the rail out of the content column. / / v5 §V5-2 — the UA's list defaults, reset on the timeline AND on the group, because a group is the natural
once the rows are split into runs. Missing it, a consumer writes `style="margin:0;padding:0"` inline — which then beats the group's own separator spacing and silently flattens the gap under the rule to 1px. That is not hypothetical: this file's own demo did it, and the asymmetry was reported from the docs page. `margin-block` only for the group, so the separator's own margin-top survives. (labs v8 §V8-1 is the same lesson one component over: re-checklist and the 40px UA indent.) / ol.re-timeline,ul.re-timeline{list-style:none;margin:0;padding:0} ol.re-timeline-group,ul.re-timeline-group{list-style:none;margin-bottom:0;padding:0} / The time rail is derived from the SAME expression its text is, not from a constant. It was `52px` while `.re-slot-time` is `calc(0.75rem * var(--font-scale))`, so the column stood still while the label grew — and the label ran out of column at exactly the density `calendar` ships as its default. Measured, intrinsic label width against the 52px column: compact 47.9 / 52 (+4.1) standard 50.4 / 52 (+1.6) comfortable 53.4 / 52 (-1.4) <- overflows ⚠ `ch` cannot be used here, and the reason is the same trap this file keeps hitting: a length on `.re-slot` resolves against `.re-slot`'s OWN font, which is the inherited body face at body size — not the 0.75rem mono the rail is set in. So the width is written in `rem`, which depends on nothing local, times the same --font-scale the type reads. 8 characters, and 0.6em per character is MEASURED, not assumed: with the DS's --font-mono (JetBrains Mono) 1ch came to exactly 0.600em at all three densities, `09:30` measured exactly 5ch and `Tüm gün` exactly 7ch. 8 gives the longest label the DS promises a full character of room instead of the 1.6px it had. --re-slot-time-w is the knob: a consumer whose labels are longer (`Ganztägig` is 9) raises it, and one who overrides --font-mono with a wider face does too. (labs §V25-1) / .re-slot{--re-slot-time-w:calc(8 0.6 * (0.75rem * var(--font-scale)));display:grid;grid-template-columns:var(--re-slot-time-w) 20px 1fr;gap:10px;min-height:46px} /* The time label and its dot have to sit on ONE line, and that only works if the geometry is knowable: with line-height:normal the text box height came from the font, so the two nudges had to agree by luck and the label ended up 2px below the dot (measured: text centre 30, dot centre 28). An explicit line-height makes both derivable — text centre is padding-top + 16/2 = 10px, dot centre is margin-top + 10/2 = 10px. / .re-slot-time{font-size:calc(0.75rem var(--font-scale));font-family:var(--font-mono);color:var(--muted-foreground);text-align:right; line-height:16px;padding-top:2px} .re-slot-rail{position:relative;display:flex;justify-content:center} .re-slot-rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--border)} .re-slot:first-child .re-slot-rail::before{top:7px} .re-slot:last-child .re-slot-rail::before{bottom:auto;height:7px} .re-slot-dot{position:relative;z-index:1;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--card);border:2px solid var(--border)} /* 5 + 10/2 = 10px, the same centre as the time label above / .re-slot-content{padding-bottom:12px;min-width:0} .re-slot.now .re-slot-dot{background:var(--primary);border-color:var(--primary)} .re-slot.now .re-slot-time{color:var(--primary);font-weight:600} .re-slot.past{opacity:.5} / ── re-day — week-strip day box ──────────────────────────────────── / .re-day{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:46px;padding:7px 4px; background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s} .re-day:hover{background:color-mix(in srgb,var(--foreground) 5%,transparent)} .re-day-name{font-size:calc(0.625rem var(--font-scale));font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground)} .re-day-num{font-size:calc(0.9375rem * var(--font-scale));font-weight:600;color:var(--foreground)} .re-day-dots{display:flex;gap:2px;height:4px;margin-top:1px} .re-day-dots i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--primary) 45%,transparent)} .re-day.today .re-day-num{color:var(--primary)} .re-day.warn .re-day-num{color:var(--warning)} .re-day.active{background:var(--primary);border-color:var(--primary)} .re-day.active .re-day-name,.re-day.active .re-day-num{color:var(--primary-foreground)} .re-day.active .re-day-dots i{background:color-mix(in srgb,var(--primary-foreground) 60%,transparent)} /* ── re-source — small per-channel source badge ───────────────────── / / v7 — all three carry line-height:1 (re-chip already did). Without it the height comes from whatever line-height they INHERIT, so the same badge measured 26px inside a card and 29.6px inside a re-field-value (line-height 1.6) — one component, two heights, depending where you dropped it. v7 — metrics deliberately IDENTICAL to re-badge and re-tag: same padding, font size and border box, so the three line up when they share a row on a card (they were 17px against 25px, which read as a mistake). What separates them is shape and weight, not size: re-source is fully round and 600, re-tag is a rounded square and 500 — a source outranks a label. The default tint stays neutral; re-c-{role} tints it per provider when a consumer wants that. --_src-gap exists so the identity separator can cancel it out below. / .re-source{--_src-gap:5px; display:inline-flex;align-items:center;gap:var(--_src-gap); padding:var(--re-space-1) var(--re-space-2);border-radius:var(--radius-full); border:1px solid var(--_edge,transparent); background:var(--_tint,color-mix(in srgb,var(--muted-foreground) 14%,transparent));color:var(--_text,var(--foreground)); font-size:calc(0.6875rem var(--font-scale));font-weight:600;line-height:1;white-space:nowrap} /* ── re-attn — attention row (left-accent list item) ──────────────── / .re-attn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-left:3px solid var(--_solid,var(--warning)); background:var(--card);font-size:calc(0.875rem var(--font-scale));line-height:1.4;color:var(--foreground)} .re-attn svg{width:var(--re-icon);height:var(--re-icon);flex-shrink:0;color:var(--_solid,var(--warning))} .re-attn-body{flex:1;min-width:0} /* ══════════════════════════════════════════════════════════════════ Domain components (from the _labs §2.3 gap report) — money, charts, selection tiles, wizard, weather, entry gate, thumbnail. ══════════════════════════════════════════════════════════════════ / / ── re-money / re-amount — tabular money ─────────────────────────── / .re-money{font-variant-numeric:tabular-nums;font-weight:600;color:var(--foreground);white-space:nowrap} .re-money-pos{color:var(--success)} .re-money-neg{color:var(--danger)} .re-money-lg{font-size:calc(1.375rem var(--font-scale))} .re-amount{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;white-space:nowrap} .re-amount-currency{font-size:calc(1rem * var(--font-scale));font-weight:500;color:var(--muted-foreground)} .re-amount-value{font-size:calc(2.25rem * var(--font-scale));font-weight:700;line-height:1;color:var(--foreground)} /* v2 A13 — re-money-input: the input counterpart of re-amount (big-figure entry with a focus ring and a trailing currency). re-amount is display-only; this holds an . / .re-money-input{display:flex;align-items:baseline;gap:6px;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-surface);transition:border-color .12s,box-shadow .12s} .re-money-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)} .re-money-input input{flex:1;min-width:0;width:100%;border:none;background:none;outline:none;font-family:inherit;font-size:calc(1.5rem var(--font-scale));font-weight:700;color:var(--foreground);font-variant-numeric:tabular-nums} .re-money-input input::placeholder{color:var(--muted-foreground);font-weight:600} .re-money-input-suffix{flex-shrink:0;font-size:calc(1rem * var(--font-scale));font-weight:500;color:var(--muted-foreground)} /* v5 V5-3 — re-card-stack: the content-card counterpart of re-sheet-body's rhythm. re-card is only a surface (bg + border + radius + shadow); re-card-body's padding is a ROW padding (asymmetric --pad-y/--pad-x, no gap). A section box wants symmetric padding AND a gap between its children. Use together:
. / .re-card-stack{display:flex;flex-direction:column;gap:var(--re-space-3);padding:var(--re-space-4)} / ── re-bar-signed — balance bar filling both ways from centre ────── / .re-bar-signed{position:relative;height:8px;background:var(--muted);border-radius:999px;overflow:hidden} .re-bar-signed-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border);z-index:1} .re-bar-signed-fill{position:absolute;top:0;bottom:0;background:var(--muted-foreground)} .re-bar-signed-fill.pos{left:50%;background:var(--success)} .re-bar-signed-fill.neg{right:50%;background:var(--danger)} / ── re-transfer — "A → B · 1.200,00 ₺ · [Paid]" settle-up row ─────── / .re-transfer{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--card);border:1px solid var(--border-surface);border-radius:var(--radius-md)} .re-transfer-names{display:inline-flex;align-items:center;gap:6px;font-size:calc(0.875rem var(--font-scale));font-weight:600;color:var(--foreground);min-width:0} .re-transfer-arrow{color:var(--muted-foreground);flex-shrink:0} .re-transfer-arrow svg{width:var(--re-icon);height:var(--re-icon);display:block} .re-transfer .re-money{margin-left:auto} .re-transfer.mine{border-color:color-mix(in srgb,var(--primary) 32%,transparent);background:color-mix(in srgb,var(--primary) 5%,transparent)} /* ── re-ring — progress ring + a centred label ────────────────────── / .re-ring{position:relative;display:inline-flex} .re-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-size:calc(0.6875rem var(--font-scale));font-weight:700;color:var(--foreground);font-variant-numeric:tabular-nums} /* v2 A15 — defined base so a small ring (≈46px) doesn't inherit 14px and overflow; span scales via .6em; tabular so 8%→100% doesn't jump. Bigger rings override font-size. / .re-ring-label span{font-size:.6em;font-weight:500;color:var(--muted-foreground)} / ── re-tile — big touch selection card ───────────────────────────── / .re-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 16px; background:var(--card);border:1px solid var(--border);border-radius:var(--radius-surface);cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s} .re-tile:hover{border-color:color-mix(in oklch,var(--brand) 30%,transparent)} .re-tile-icon{font-size:1rem;--re-icon-ratio:1.4; / the subject glyph of a selection card, bigger than its title. font-size is written HERE on purpose: the slot has no text of its own, so `em` would otherwise resolve against whatever the page root happens to be. / display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)} .re-tile-icon svg{width:var(--re-icon);height:var(--re-icon)} .re-tile-title{font-size:calc(0.9375rem var(--font-scale));font-weight:600;color:var(--foreground)} .re-tile-sub{font-size:calc(0.8125rem * var(--font-scale));color:var(--muted-foreground)} .re-tile-check{--re-tile-check-h:20px;--re-tile-check-icon:calc(var(--re-tile-check-h) * .6); position:absolute;top:10px;right:10px;display:none;align-items:center;justify-content:center;width:var(--re-tile-check-h);height:var(--re-tile-check-h);border-radius:50%;background:var(--primary);color:var(--primary-foreground)} .re-tile-check svg{width:var(--re-tile-check-icon);height:var(--re-tile-check-icon)} .re-tile.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)} .re-tile.on .re-tile-check{display:inline-flex} .re-tile-soon{opacity:.55;cursor:default} .re-tile-soon:hover{border-color:var(--border)} /* ── re-wizard — full-screen multi-step flow shell ────────────────── / .re-wizard{display:flex;flex-direction:column;height:100dvh;background:var(--background)} / v2 A16 — a full-screen flow starts at the very top of the screen (not under a navbar), so the head must clear the notch/dynamic-island itself. re-wizard-foot already clears the bottom inset; this mirrors it on top. min-height is preserved. / .re-wizard-head{flex-shrink:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--border)} .re-wizard-body{flex:1;overflow-y:auto;padding:20px 16px} / v2 A17 — a step heading level between re-ph-title (page) and re-section-title (too big here). / .re-wizard-title{font-size:calc(1.25rem var(--font-scale));font-weight:700;color:var(--foreground);margin:0} .re-wizard-lead{font-size:calc(0.8125rem * var(--font-scale));color:var(--muted-foreground);margin:4px 0 0} .re-wizard-w{width:100%;max-width:480px;margin:0 auto} .re-wizard-body > .re-wizard-w{display:flex;flex-direction:column;gap:20px} /* v2 A17 — step section rhythm (like re-sheet-body / re-empty-state) / .re-wizard-foot{flex-shrink:0;display:flex;align-items:center;gap:8px;min-height:64px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)} .re-wizard-foot > .re-wizard-w{display:flex;gap:8px} / v2 A17 — width-capped footer keeps its button row / .re-wizard-foot .re-btn{flex:1} / two-equal / full-width single / / ── re-weather — horizontal daily strip ──────────────────────────── / .re-weather{display:flex;gap:8px} .re-weather-day{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:66px;padding:10px 8px;background:var(--card);border:1px solid var(--border-surface);border-radius:var(--radius-md)} .re-weather-date{font-size:calc(0.625rem var(--font-scale));font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-foreground)} .re-weather-icon{font-size:1rem;--re-icon-ratio:1.4;display:inline-flex;color:var(--warning)} /* same case as re-tile-icon: a subject glyph in a textless slot / .re-weather-icon svg{width:var(--re-icon);height:var(--re-icon)} .re-weather-temp{font-size:calc(0.8125rem var(--font-scale));font-weight:600;color:var(--foreground);font-variant-numeric:tabular-nums} .re-weather-temp span{color:var(--muted-foreground);font-weight:400} .re-weather-rain{display:inline-flex;align-items:center;gap:2px;font-size:calc(0.625rem * var(--font-scale));color:var(--info);font-variant-numeric:tabular-nums} .re-weather-rain-off{color:var(--muted-foreground);opacity:.7} /* v2 A18 — low chance: present but recedes (vs --info emphasis) / .re-weather-badge{font-size:calc(0.625rem var(--font-scale));font-weight:600;color:var(--primary)} .re-weather-day.today{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:color-mix(in srgb,var(--primary) 6%,transparent)} /* v2 A18 — which day is "today" / / ── re-gate — entry / invite gate (centred column, full height) ──── / / v2 A7 — the gate opens WITHOUT the re-app shell (which owns scrolling), so it must honour the safe-area itself. v2 A8 — gap lets a brand/byline block sit above the card. ⚠ align-content:center is what MAKES that second sentence true, and for two years it was missing. `place-items` sets align-/justify-ITEMS — where an item sits inside its track — and says nothing about how the TRACKS are packed. With align-content at its initial `normal`, a grid stretches its auto rows, so the gap was never what separated the two children: each row absorbed half the free height and centred its own item inside it. Measured at 900px with a byline: card 172.8px ABOVE the screen's centre, byline 321.5px below the card instead of 15. One child measured 0.0 off-centre, which is why this survived — the promise only broke in the arrangement the canonical markup actually shows, and a screen with no byline proved the rule every time somebody checked. With align-content:center: gap exactly 15.0. The residual is a product fact, not a bug, and gate.mdx states it: with a byline present the thing centred is the STACK, so the card sits half the byline above centre (19.5px measured). A screen that wants the form dead centre does not carry a byline. / / The ground is part of this component: a sign-in screen is a page, and a page with no background of its own inherits whatever the host happens to have — every consumer picked a different one. --re-gate-bg is its own token because the two themes want opposite relationships to --surface: light wants to be lighter than it (98% read as grey behind a white card), dark wants exactly it. Defined per theme in base.css. / / ⚠ The gap reads --re-space-3, it is not a raw 16px, and that was a real defect twice over. A raw number does not follow data-density — at compact every other rhythm on the screen shrank and the gate's did not — and it is not expressible by any utility, because the scale is 5px-based (re-gap-3 = 15, re-gap-4 = 20; 16 is between them). A consumer who wraps the field and the button in a box to group them therefore CANNOT restore the card's own rhythm: two products independently reached for re-gap-2 and landed at 10px. The 1px this costs at standard is invisible; being off the scale was not. See the note under Composition below — the wrapper is still the wrong move, but now recovering from it is possible. / .re-gate{background:var(--re-gate-bg); min-height:100dvh;display:grid;place-items:center;align-content:center;gap:var(--re-space-3);padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom))} .re-gate-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--re-space-3)} / The providers are one row of equal columns, because they are alternatives to each other — three stacked full-width buttons read as three steps. auto-fit, so they stack on a screen too narrow to hold the longest name. The label is the brand and nothing else: "Continue with" repeated three times is the same three words read three times. / .re-gate-providers{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--re-space-2)} .re-gate-providers > .re-btn{padding-inline:var(--re-space-2);gap:var(--re-space-1);min-width:0} / ── re-gate-mark — the app's own mark, at the head of an identity-less flow ──────── Five consumers wrote this rule under their own prefix (pl- sp- id- tk- ct-) and all five are identical to the character, border included — so the values below are theirs, verbatim, and migrating is a rename with nothing to look at. It is NOT scoped to re-gate-card: the same mark heads an invite screen and an identity picker, both outside the card. Not to be confused with re-brandmark, below: that is a PROVIDER's logo inside a sign-in button, icon-sized and owned by Google/Apple/Microsoft. This is the product's own mark. The corner is 16px at the default radius step, as the copies had it, but it follows the knob: 4/3 of --radius-md (12 → 16), capped so a 54px tile never rounds into a circle at the upper steps — half its side is 27, and the cap stays well under it. The glyph is sized here, not at the call site. The copies relied on `icon(x, 26)` and one screen passed 24, so a single project drew two sizes of its own mark. 0.5 of the tile is the ratio re-avatar uses, and 0.5 of the 52px content box is 26 — the number most call sites had already chosen. A CSS width wins over the svg's width attribute, so the stray 24 becomes 26 on its own. / .re-gate-mark{width:54px;height:54px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; border-radius:min(calc(var(--radius-md) 4 / 3),1.25rem); background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand); border:1px solid color-mix(in oklch,var(--brand) 28%,transparent)} .re-gate-mark > svg{width:calc(var(--re-gate-mark-glyph,.5) * 100%);height:calc(var(--re-gate-mark-glyph,.5) * 100%);flex-shrink:0} /* A brand mark is not a DS icon — it is multi-colour, it belongs to whoever owns it, and the registry skips it by name (icon-inventory). It still takes the icon size, so it sits in a button the same way ours do. / .re-brandmark{width:var(--re-icon);height:var(--re-icon);flex-shrink:0} / ── re-thumb — small image preview (receipt / attachment) ────────── / .re-thumb{--re-thumb-h:44px;--re-thumb-icon:calc(var(--re-thumb-h) .41); display:inline-flex;align-items:center;justify-content:center;width:var(--re-thumb-h);height:var(--re-thumb-h);flex-shrink:0; border-radius:var(--radius-md);background:var(--muted);border:1px solid var(--border);color:var(--muted-foreground);overflow:hidden} .re-thumb img{width:100%;height:100%;object-fit:cover} .re-thumb svg{width:var(--re-thumb-icon);height:var(--re-thumb-icon)} .re-thumb-lg{--re-thumb-h:64px} /* one knob: the box AND its placeholder glyph follow (the glyph used to stay 18px in a 64px box) / / ══ re-pull-refresh — pull down to refresh DATA (v6 V6-11) ══════════════════════════ The browser's own pull gesture reloads the PAGE, which throws away state and scroll position; an app wants to refresh its data and keep both. So the host kills the native overscroll (`overscroll-behavior:none` on html/body — still the host's job: re-main carries overscroll-behavior-y:contain for its OWN chaining, but the document's bounce is outside the DS's reach) and drives this indicator instead. Parameters below are measured, not guessed (heyre, four labs projects wanted the same): scroll container .re-main · resistance 1:2 · threshold 64px · ceiling 96px transition 180ms ease-out, OFF while dragging (or the badge lags the finger) Four traps, all of them hit in practice: 1 NO CLIPPING. An early version grew a wrapper with overflow:hidden — the badge showed its clip box, and while parked offscreen its --shadow-lg (40px blur) bled into view as an unexplained glow at the top of the page. Park it with translateY + opacity:0. 2 The gesture must not START inside a horizontally scrollable strip (re-chip-strip, re-page-tabs, re-scroll-x): a diagonal swipe there both triggers a refresh and locks horizontal panning via preventDefault. Test BEHAVIOUR, not class names — overflow-x auto/scroll AND scrollWidth > clientWidth — and abort once movement is mostly sideways. 3 Only from the top: scrollTop must be 0, or a scroll that reaches the top mid-flick turns into a refresh nobody asked for. 4 Disabled while a sheet or modal is open — that panel scrolls on its own. Composes with Composes with .re-app{touch-action:manipulation}: that only removes double-tap zoom; panning and pinch still work. The gesture itself is a documented snippet (docs → Pull to refresh), the same way the sidebar and search behaviours are — @redevme/ui ships no JS. / .re-pull{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center; / 30, NOT 20: re-page-header is also 20 and comes LATER in the DOM, so at an equal z-index it paints on top — and its background is opaque, so it swallowed the indicator whole. The geometry was right the whole time (top:0 of re-pull-host); only the paint order was wrong, which is why it read as "the indicator doesn't start at the top". 30 is the app-shell overlay tier it shares with re-tabbar-float — they sit at opposite edges and never meet. / pointer-events:none; / the indicator is never a target — the finger belongs to the scroll area / transform:translateY(var(--_pull-y,0px));opacity:var(--_pull-o,0); transition:transform .18s ease-out,opacity .18s ease-out} .re-pull-dragging{transition:none} / while the finger is down the badge must track it exactly / .re-pull-badge{display:inline-flex;align-items:center;gap:var(--re-space-2); margin-top:var(--re-space-3);padding:calc(var(--re-space-1) + 2px) var(--re-space-4); background:var(--card);border:1px solid var(--border);border-radius:var(--radius-full); box-shadow:var(--shadow-lg); / --border, not --border-elevated: the shadow is what lifts this off the content, and the two together read as a heavy outline (light --border-elevated is 82% against --border 90%) / font-size:calc(0.75rem var(--font-scale));font-weight:600;color:var(--muted-foreground); white-space:nowrap} /* The rotation is a KNOB, not a hard-coded behaviour. Two consumers wanted two different idioms — flip once at the threshold, versus a spinner that tracks the pull degree by degree — and a CSS rule that fixes one turns the other into an override fight. So the DS owns the slot, the transition and the reduced-motion handling, and --re-pull-rotate owns the angle: leave it alone for the default flip, or drive it from the gesture (`el.style.setProperty ('--re-pull-rotate', deg + 'deg')`) for a follow-the-finger spinner. / .re-pull-icon{display:inline-flex;color:var(--brand); transform:rotate(var(--re-pull-rotate,0deg));transition:transform .18s ease-out} .re-pull-icon svg{width:var(--re-icon);height:var(--re-icon)} / NOT re-spinner: it carries its own `animation`, which collides with the rotation driven here, and switching that off is the partial override the knobs above exist to avoid. Put a plain glyph in the slot (lucide loader-circle for the busy state). / .re-pull-dragging .re-pull-icon{transition:none} / a per-pixel angle must not lag the finger / .re-pull-ready .re-pull-badge{color:var(--brand)} .re-pull-ready{--re-pull-rotate:180deg} / default idiom: "let go now" — the arrow flips at the threshold / / Busy spin: duration and PHASE are both knobs. A consumer whose icon tracked the pull is already at some angle when the finger lifts, and a fresh animation snaps back to 0deg — the spin has to pick up where the drag left off. A negative delay does exactly that, so --re-pull-spin-delay takes `-(angle mod 360)/360 * duration`. Without it the only way out is overriding the animation itself, which is the partial-override fight the rotate knob exists to avoid. / .re-pull-busy .re-pull-icon{animation:re-pull-spin var(--re-pull-spin-dur,.8s) linear infinite; animation-delay:var(--re-pull-spin-delay,0s)} / The `from` is EXPLICIT on purpose. With only a `to`, the implicit start is the element's current computed transform — i.e. --re-pull-rotate — so a consumer still writing that knob while busy (updating the status text, say) moved the animation's origin and the icon jumped back and forth visibly. Spelling out `from` makes the knob inert during the spin, so the phase is controlled solely by --re-pull-spin-delay. Enforced here rather than written up as a "don't touch it while busy" rule nobody would read. / @keyframes re-pull-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .re-pull{transition:none} .re-pull-busy .re-pull-icon{animation:none} } / The scroll container needs a positioned ancestor for the indicator to hang from. re-main is not positioned by default, so the host says so once. / .re-pull-host{position:relative} / ══ TASK FIELDS — board / roadmap / detail panel share these (v7 Faz 1) ══════════════ The field set behind every view: title · description · assignee · reporter · start · due · status. Deliberately small: six additions, and three of the needs turned out to be patterns over primitives that already exist rather than new components. / / ── re-field — READ-ONLY field layout (label + value) ─────────────────────────────── re-input-label is for forms; this is for showing a value. Stacks below 480px, where a 104px label column would leave nothing for the value. An empty value renders an em dash rather than collapsing the row, so a missing field still reads as a field. / .re-field-list{display:flex;flex-direction:column;gap:var(--re-space-3)} .re-field{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--re-space-3);align-items:baseline} .re-field-label{font-size:calc(0.6875rem var(--font-scale));font-weight:600;text-transform:uppercase; letter-spacing:.03em;color:var(--muted-foreground)} .re-field-value{min-width:0;font-size:calc(0.8125rem * var(--font-scale));line-height:1.6;color:var(--foreground)} .re-field-value:empty::before{content:"—";color:var(--muted-foreground)} .re-field-value > .re-field-multi{margin:0;white-space:pre-line} /* description: keep the author's line breaks / @media (max-width:480px){.re-field{grid-template-columns:minmax(0,1fr);gap:3px}} / ── re-source: the account half, and sync health ──────────────────────────────────── A source is a CONNECTION — (provider, account) — not a provider: the same person connects a personal and a work Google account, and both profiles can read "Ersin Yılmaz", so the account half is a name THEY chose and runs up to 40 characters. It gets its own truncating slot, capped in ch so the cap follows the font, and the pill never grows past a line. Sync health is a SEPARATE signal: being connected doesn't mean the last sync worked. A dot carries it, so "connected" (the pill exists) and "sync failing" (the dot) can't be mistaken for each other — and it costs no extra markup. / / The separator has to sit EQUIDISTANT from both names, and the pill's flex gap lands only on the left of this element — so it was 9px before the dot and 4px after. Cancel the gap here and let the dot's own margin do the spacing on both sides. / .re-source-account{margin-left:calc(-1 var(--_src-gap)); max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:500;color:var(--muted-foreground)} .re-source-account::before{content:"·";margin-inline:4px;opacity:.55} .re-source-warn::after,.re-source-error::after{content:"";width:6px;height:6px;flex-shrink:0; border-radius:50%;margin-left:1px} .re-source-warn::after{background:var(--warning)} .re-source-error::after{background:var(--danger)} /* ── re-daterange — start + due together ──────────────────────────────────────────── auto-fit rather than two fixed columns: side by side while there's room, stacked when there isn't, with no breakpoint to keep in step. The inputs are plain .re-input[type=date], which already carries the iOS fix from v6 §V6-7 — appearance:none and min-width:0 — so a range doesn't reintroduce that overflow. / .re-daterange{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--re-space-2); max-width:420px} / a date field stretched to 337px in a desktop column and looked broken; two fields plus the gap fit inside this and a consumer can override it / / ── status: one appearance everywhere, editable or not ────────────────────────────── Status is a re-badge, full stop — in a card, in a field list, in a detail panel. A native