@hypit/hypit 0.1.4 → 0.1.6

package/packages/studio/src/style.css

@@ -10,6 +10,9 @@
   --text: #e7e8eb;
   --text-2: #a4a7ae;
   --text-3: #6f737c;
+  --subtab-surface: #101114;
+  --subtab-active-surface: #24262a;
+  --subtab-active-text: #c9cbd0;
   /* Replace this ramp as one unit when Hypit's interaction identity changes. */
   --brand-200: #f8c1ce;
   --brand-400: #ed7898;
@@ -28,6 +31,8 @@
   --tone-orange-muted-rail: #e7834c;
   --tone-green: #38853e;
   --tone-green-rail: #75d079;
+  --tone-green-muted: #285c30;
+  --tone-green-muted-rail: #73a478;
   --tone-teal: #008889;
   --tone-teal-rail: #00d4d5;
   /* Semantic ruler: brightness separates content from its own band; hue marks state. */
@@ -35,6 +40,7 @@
   --semantic-word: #005551;
   /* Author intent uses a gold annotation hue; brand pink stays in the chrome. */
   --semantic-intent: #a28b2b;
+  --semantic-moment: var(--brand-500);
   /* Same perceived active level as a selected/covered semantic cell. */
   --semantic-current: #009f98;
   /* Ordered marker depth: one hue, decreasing lightness. */
@@ -44,10 +50,14 @@
   --intent-depth-3: #846d00;
   --tone-blue: #1777b8;
   --tone-blue-rail: #58c0ff;
+  --tone-blue-muted: #175079;
+  --tone-blue-muted-rail: #5795bf;
   --tone-violet: #6f63b8;
   --tone-violet-rail: #b3a6ff;
   --tone-magenta: #995398;
   --tone-magenta-rail: #ea93e8;
+  --tone-magenta-muted: #683b68;
+  --tone-magenta-muted-rail: #b57ab4;
   --tone-neutral: #6a737c;
   --tone-neutral-rail: #aeb9c4;
   --timeline-label-width: 188px;
@@ -132,6 +142,26 @@ button:focus-visible, textarea:focus-visible {
   white-space: nowrap;
 }
 .topbar-right { justify-self: end; display: flex; align-items: center; min-width: 0; }
+.view-tabs { display: flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 2px; margin-left: 16px; padding: 2px; border-radius: 5px; background: var(--subtab-surface); }
+.view-tabs button {
+  display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
+  border: 0; border-radius: 4px; color: var(--text-3); background: transparent;
+}
+.view-tabs button[aria-selected="true"] { color: var(--subtab-active-text); background: var(--subtab-active-surface); }
+.view-tabs button:focus-visible { outline: 1px solid #8a8f99; outline-offset: -1px; }
+.view-tabs .icon { width: 14px; height: 14px; }
+.parameter-select.language-select { width: auto; flex: 0 0 auto; margin-left: 10px; }
+.language-select .language-toggle {
+  display: grid; place-items: center; grid-template-columns: 1fr;
+  width: 28px; height: 28px; padding: 0;
+  color: var(--subtab-active-text); background: var(--subtab-surface);
+  border-color: var(--line);
+}
+.language-toggle .icon { width: 16px; height: 16px; }
+.language-select .parameter-select-menu { width: max-content; min-width: 150px; max-width: 240px; }
+.language-select .parameter-select-option { font-family: var(--font-ui); text-align: start; }
+.topbar { position: relative; z-index: 40; }
+
 .meta {
   color: var(--text-3);
   font: 500 11px/1 var(--font-ui);
@@ -159,6 +189,67 @@ button:focus-visible, textarea:focus-visible {
   grid-template-columns: var(--source-width) 8px minmax(320px, 1fr) 8px var(--workspace-width);
   overflow: hidden;
 }
+.comments-panel, .comments-handle { display: none; }
+.studio-shell[data-view="comments"] { grid-template-rows: minmax(0, 1fr); padding-bottom: 6px; }
+.studio-shell[data-view="comments"] > .handle,
+.studio-shell[data-view="comments"] > .timeline-panel { display: none; }
+.studio-shell[data-view="comments"] .upper-shell { grid-template-columns: minmax(240px, 1fr) 8px var(--comments-width, 360px); }
+.studio-shell[data-view="comments"] .source-panel,
+.studio-shell[data-view="comments"] .source-handle,
+.studio-shell[data-view="comments"] .workspace-panel,
+.studio-shell[data-view="comments"] .workspace-handle { display: none; }
+.studio-shell[data-view="comments"] .comments-handle { display: block; }
+.studio-shell[data-view="comments"] .comments-panel { display: flex; }
+.comments-panel { flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border: 1px solid #08090a; }
+.comments-heading { justify-content: space-between; flex: none; }
+.comments-heading [data-count] { color: var(--text-3); font-size: 11px; margin-left: 2px; }
+.comments-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 3px; background: transparent; color: var(--text-3); }
+.comments-icon:hover { background: var(--field); color: var(--text); }
+.comments-icon .icon { width: 15px; height: 15px; }
+.comments-icon.is-done { color: var(--ok); }
+.comments-panel button:disabled { opacity: .4; }
+.comments-filters { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
+.comments-filters button { border: 0; background: transparent; padding: 4px 11px; border-radius: 3px; color: var(--text-3); }
+.comments-filters button[aria-pressed="true"] { color: var(--text); background: #282a30; }
+.comments-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; user-select: text; }
+.comments-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; height: 100%; padding: 24px; text-align: center; color: var(--text-3); }
+.comments-empty > .icon { width: 28px; height: 28px; margin-bottom: 18px; opacity: .7; }
+.comments-empty strong { font-size: 13px; font-weight: 500; color: var(--text-2); }
+.comments-empty p { line-height: 1.7; max-width: 230px; margin: 8px 0; }
+.comment-card { padding: 12px 10px 14px; border-bottom: 1px solid var(--line); border-radius: 2px; }
+.comment-card.selected { background: #1e2025; }
+.comment-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.comment-location { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; }
+.comment-number { margin-right: 5px; color: var(--text-3); font: 500 11px var(--font-mono); }
+.comment-actions { display: flex; align-items: center; gap: 1px; }
+.comment-time { display: inline-flex; align-items: center; gap: 6px; min-height: 23px; padding: 2px 6px; background: var(--brand-soft); border: 0; border-radius: 3px; color: var(--brand-400); font: 500 11px/1.5 var(--font-mono); white-space: nowrap; }
+.comment-time .icon { width: 13px; height: 13px; }
+.comment-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; }
+.comment-card.resolved .comment-text { color: var(--text-3); }
+.comment-composer { flex: none; border-top: 1px solid var(--line); padding: 14px 14px 12px; background: #18191d; }
+.comment-anchor { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; min-height: 24px; }
+.comment-composer textarea, .comment-edit textarea { width: 100%; resize: none; background: #202227; color: var(--text); border: 1px solid #33363c; border-radius: 3px; padding: 10px 11px; font: 400 13px/1.7 var(--font-ui); display: block; min-height: 82px; user-select: text; }
+.comment-composer textarea::placeholder { color: var(--text-3); }
+.comments-panel textarea:focus { outline: none; box-shadow: none; }
+.comment-edit textarea:focus { background: #292c32; }
+.comments-panel textarea::selection { background: #dce1eb33; color: var(--text); }
+.comment-input { border: 1px solid #33363c; border-radius: 4px; background: #202227; transition: background 120ms ease; }
+.comment-input:focus-within { background: #292c32; }
+.comment-input textarea { border: 0; background: transparent; }
+.comment-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 9px 9px; }
+.comment-tools { display: flex; align-items: center; gap: 4px; }
+.comment-tools .comments-icon { width: 28px; height: 28px; padding: 5px; }
+.comment-tools .icon { width: 18px; height: 18px; }
+.comment-submit { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #e4e6eb; color: #202227; }
+.comment-submit .icon { display: block; width: 18px; height: 18px; }
+.comment-submit:hover:not(:disabled) { background: #fff; }
+.comment-submit:disabled { opacity: 1; background: #35383f; color: #858b95; }
+.comment-submit:focus-visible { outline: 1px solid #aeb3bc; outline-offset: 3px; }
+.comments-error { color: var(--brand-200); font-size: 12px; line-height: 1.6; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.comment-edit { margin-top: 10px; }
+.comment-edit-actions { display: flex; justify-content: end; gap: 6px; margin-top: 8px; }
+.comment-edit-actions button { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--field); color: var(--text-2); }
+.comment-edit-actions button[type="submit"] { color: var(--text); }
 .source-panel, .preview-panel, .workspace-panel, .timeline-panel {
   min-width: 0;
   min-height: 0;
@@ -602,7 +693,7 @@ button:focus-visible, textarea:focus-visible {
   margin: 10px 12px 4px;
   padding: 2px;
   border-radius: 5px;
-  background: #101114;
+  background: var(--subtab-surface);
   overflow: hidden;
 }
 .inspector-subtab {
@@ -626,7 +717,7 @@ button:focus-visible, textarea:focus-visible {
   line-height: 1;
   white-space: nowrap;
 }
-.inspector-subtab.active { background: #24262a; color: #c9cbd0; }
+.inspector-subtab.active { background: var(--subtab-active-surface); color: var(--subtab-active-text); }
 .inspector-empty { padding: 28px 14px; color: var(--text-3); font-size: 11px; text-align: center; }
 .property-group { min-width: 0; padding: 14px 14px 16px; border-bottom: 1px solid var(--line); }
 .property-group h3 { margin: 0 0 10px; color: #c4c6cc; font-size: 11px; font-weight: 500; }
@@ -689,6 +780,7 @@ button:focus-visible, textarea:focus-visible {
   caret-color: var(--interaction-accent);
   cursor: text !important;
 }
+.parameter-display { width: 100%; padding: 5px 7px; color: var(--text-2); font-size: 11px; line-height: 1.2; text-align: right; overflow-wrap: anywhere; user-select: text; font-variant-numeric: tabular-nums; }
 .parameter-value:focus { border-color: #6a6e77; outline: 0; background: #131417; }
 .control-boolean .parameter-right { justify-content: flex-end; }
 .control-boolean .parameter-value {
@@ -745,8 +837,8 @@ button:focus-visible, textarea:focus-visible {
 .parameter-color-value { width: min(100%, 102px); }
 .control-list,
 .control-record { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
-.control-list .parameter-right,
-.control-record .parameter-right { grid-column: 1 / -1; width: 100%; }
+.control-list > .parameter-right,
+.control-record > .parameter-right { grid-column: 1 / -1; width: 100%; }
 .parameter-structured { min-width: 0; width: 100%; }
 .parameter-structured-summary {
   min-height: 20px;
@@ -786,20 +878,6 @@ button:focus-visible, textarea:focus-visible {
 .parameter-list-actions button:not(:disabled):focus-visible { outline: 1px solid #62666f; }
 .parameter-list-actions .icon { width: 11px; height: 11px; }
 .parameter-record-fields { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
-.parameter-record-field {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 58px minmax(0, 1fr);
-  align-items: center;
-  gap: 7px;
-}
-.parameter-record-field > span:first-child {
-  overflow: hidden;
-  color: #6f737c;
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .parameter-structured-footer {
   min-height: 30px;
   display: flex;
@@ -818,10 +896,10 @@ button:focus-visible, textarea:focus-visible {
   font: 10px/1 var(--font-ui);
 }
 .parameter-structured-footer button:disabled { color: #454850; background: #16171a; }
-.parameter-structured-footer button.primary:not(:disabled) { border-color: #555962; background: #292b30; color: #e0e2e6; }
 .parameter-structured-add { display: inline-flex; align-items: center; gap: 4px; }
 .parameter-structured-add .icon { width: 11px; height: 11px; }
-.parameter-structured-decisions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.parameter-structured-notice { margin-top: 6px; color: var(--text-3); font: 10px/1.4 var(--font-ui); }
+.parameter-structured-notice[hidden] { display: none; }
 .parameter-select { position: relative; width: 100%; min-width: 0; }
 .parameter-select-trigger {
   width: 100%;
@@ -1016,10 +1094,13 @@ button:focus-visible, textarea:focus-visible {
   transform: translateY(-50%);
 }
 .track-tone-blue { --track: var(--tone-blue); --rail: var(--tone-blue-rail); }
+.track-tone-blue-muted { --track: var(--tone-blue-muted); --rail: var(--tone-blue-muted-rail); }
 .track-tone-green { --track: var(--tone-green); --rail: var(--tone-green-rail); }
+.track-tone-green-muted { --track: var(--tone-green-muted); --rail: var(--tone-green-muted-rail); }
 .track-tone-teal { --track: var(--tone-teal); --rail: var(--tone-teal-rail); }
 .track-tone-violet { --track: var(--tone-violet); --rail: var(--tone-violet-rail); }
 .track-tone-magenta { --track: var(--tone-magenta); --rail: var(--tone-magenta-rail); }
+.track-tone-magenta-muted { --track: var(--tone-magenta-muted); --rail: var(--tone-magenta-muted-rail); }
 .track-tone-orange { --track: var(--tone-orange); --rail: var(--tone-orange-rail); }
 .track-tone-orange-muted { --track: var(--tone-orange-muted); --rail: var(--tone-orange-muted-rail); }
 .track-tone-neutral { --track: var(--tone-neutral); --rail: var(--tone-neutral-rail); }
@@ -1083,8 +1164,10 @@ button:focus-visible, textarea:focus-visible {
   height: var(--semantic-band-height);
   overflow: hidden;
   background: var(--lane);
+  box-shadow: inset 0 -1px var(--line);
+  isolation: isolate;
 }
-.semantic-band-intent { border-bottom: 0; }
+.semantic-band:last-child { box-shadow: none; }
 .lane-attached {
   border-left: 0;
   background: var(--lane);
@@ -1104,12 +1187,12 @@ button:focus-visible, textarea:focus-visible {
   border: 0;
   border-radius: 0;
   background: var(--semantic-cell);
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #ffffff12;
   color: var(--text);
   text-align: left;
   cursor: default;
 }
-.semantic-cell:focus-visible { outline: 0; }
+.semantic-cell:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment {
   --semantic-cell: var(--semantic-segment);
 }
@@ -1120,11 +1203,9 @@ button:focus-visible, textarea:focus-visible {
   --semantic-cell: var(--semantic-intent);
   color: #fff;
 }
-.semantic-cell.selected,
-.semantic-cell.live { z-index: 4; filter: brightness(1.22); }
-.semantic-segment.selected { box-shadow: none; }
-.semantic-segment.live.selected { filter: brightness(1.22); }
-.semantic-moment.selected { z-index: 4; filter: brightness(1.22); }
+.semantic-cell.live { filter: brightness(1.12); }
+.semantic-cell.selected { z-index: 4; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
+.semantic-moment.selected { z-index: 5; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -1170,21 +1251,19 @@ button:focus-visible, textarea:focus-visible {
 .semantic-word .semantic-cell-content { padding: 0 5px; }
 .semantic-moment {
   position: absolute;
-  top: 4px;
-  width: 14px;
-  height: 14px;
-  transform: translateX(-7px) rotate(45deg);
+  top: calc((var(--semantic-band-height) - 9px) / 2);
+  z-index: 1;
+  width: 9px;
+  height: 9px;
+  transform: translateX(-50%) scaleX(.6) rotate(45deg);
   border-radius: 0;
   padding: 0;
-  border: 0;
-  background: var(--semantic-intent);
+  border: 1px solid var(--lane);
+  background: var(--semantic-moment);
 }
 .semantic-moment:focus-visible { outline: 0; }
-.track-label-semantic { position: sticky; top: var(--timeline-ruler-height); z-index: 8; border-bottom: 1px solid var(--line); background: #111216; }
-.track-label-semantic::before {
-  border-radius: 0;
-  background: #181a1f;
-}
+.track-label-semantic { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid var(--line); background: #111216; }
+.track-label-semantic::before { display: none; }
 .track-label-attached {
   /* The branch marker occupies the same 18px prefix as a root icon;
      attached and root labels therefore share one exact text column. */
@@ -1207,7 +1286,6 @@ button:focus-visible, textarea:focus-visible {
   display: block;
   padding: 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--track) 48%, var(--lane));
   border-radius: var(--timeline-item-radius);
   background: var(--item-body);
   box-shadow: none;
@@ -1215,8 +1293,7 @@ button:focus-visible, textarea:focus-visible {
   text-align: left;
   cursor: default;
 }
-/* The edge affordance is intentionally visual-only for now. Actual trim and
-   writeback remain disabled until their SVML mapping is implemented. */
+/* Only Companion-declared editable intervals enable edge gestures. */
 #app .clip::before,
 #app .clip::after {
   content: "";
@@ -1244,10 +1321,19 @@ button:focus-visible, textarea:focus-visible {
 }
 .clip.editing { box-shadow: 0 0 0 1px #fff; }
 .clip:focus-visible { outline: 0; }
+/* Draw above thumbnails and text without changing interval geometry. */
+.clip-boundary {
+  position: absolute;
+  z-index: 5;
+  inset: 0;
+  border: 1px solid #ffffff20;
+  border-radius: inherit;
+  pointer-events: none;
+}
 .clip-selection {
   position: absolute;
   z-index: 6;
-  inset: calc(-1 * var(--timeline-selection-stroke));
+  inset: 0;
   display: none;
   border: var(--timeline-selection-stroke) solid var(--timeline-selection-color);
   border-radius: var(--timeline-selection-radius);
@@ -1256,20 +1342,21 @@ button:focus-visible, textarea:focus-visible {
 .clip-selection::before, .clip-selection::after {
   content: "";
   position: absolute;
-  top: -1px;
-  bottom: -1px;
+  top: 0;
+  bottom: 0;
   width: var(--timeline-selection-edge);
   background: var(--timeline-selection-color);
 }
 .clip-selection::before {
-  left: calc(-1 * var(--timeline-selection-stroke));
+  left: 0;
   border-radius: var(--timeline-selection-radius) 0 0 var(--timeline-selection-radius);
 }
 .clip-selection::after {
-  right: calc(-1 * var(--timeline-selection-stroke));
+  right: 0;
   border-radius: 0 var(--timeline-selection-radius) var(--timeline-selection-radius) 0;
 }
 .clip.selected > .clip-selection { display: block; }
+.clip.selected > .clip-boundary { border-color: var(--timeline-selection-color); }
 .clip-head {
   position: absolute;
   z-index: 3;
@@ -1288,6 +1375,7 @@ button:focus-visible, textarea:focus-visible {
 }
 .clip-body {
   position: absolute;
+  z-index: 1;
   top: var(--timeline-item-header-height);
   right: 0;
   bottom: 0;
@@ -1346,10 +1434,13 @@ button:focus-visible, textarea:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 .clip-tone-blue { --track: var(--tone-blue); }
+.clip-tone-blue-muted { --track: var(--tone-blue-muted); }
 .clip-tone-green { --track: var(--tone-green); }
+.clip-tone-green-muted { --track: var(--tone-green-muted); }
 .clip-tone-teal { --track: var(--tone-teal); }
 .clip-tone-violet { --track: var(--tone-violet); }
 .clip-tone-magenta { --track: var(--tone-magenta); }
+.clip-tone-magenta-muted { --track: var(--tone-magenta-muted); }
 .clip-tone-orange { --track: var(--tone-orange); }
 .clip-tone-orange-muted { --track: var(--tone-orange-muted); }
 .clip-tone-neutral { --track: var(--tone-neutral); }
@@ -1481,8 +1572,8 @@ button:focus-visible, textarea:focus-visible {
 .failure:empty { display: none; }
 
 @media (max-width: 920px) {
-  .meta, .topbar-right { display: none; }
-  .topbar { grid-template-columns: 1fr minmax(120px, 1fr); }
+  .meta, .topbar-right .status { display: none; }
+  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
   .upper-shell { grid-template-columns: minmax(320px, var(--source-width)) 8px minmax(300px, 1fr); }
   .workspace-handle, .workspace-panel { display: none; }
 }
@@ -1503,14 +1594,96 @@ button:focus-visible, textarea:focus-visible {
 .stage-audio-wave { width: 85%; padding: 24px 12px; border-radius: 2px; color: #b5c2bb; background: #202824; text-align: center; }
 .stage-audio-wave img { display: block; width: 100%; height: 100px; }
 .stage-media-error { position: absolute; bottom: 12px; padding: 8px; background: #24262b; color: #cacdd4; font-size: 11px; }
-.stage-scrubber { flex: none; width: 100%; height: 10px; padding: 0; margin: -5px 0; z-index: 2; appearance: none; background: transparent; cursor: pointer; }
+.stage-progress { position: relative; flex: none; height: 0; z-index: 2; }
+.stage-progress[hidden], .scrub-preview[hidden] { display: none; }
+.stage-scrubber { position: absolute; inset: -5px 0 auto; width: 100%; height: 10px; padding: 0; margin: 0; appearance: none; background: transparent; cursor: pointer; }
 .stage-scrubber::-webkit-slider-runnable-track { height: 2px; background: #676c75; }
 .stage-scrubber::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border-radius: 50%; margin-top: -3px; background: #e1e4e9; }
 .stage-scrubber::-moz-range-track { height: 2px; background: #676c75; }
 .stage-scrubber::-moz-range-thumb { width: 8px; height: 8px; border: 0; background: #e1e4e9; }
+.stage-review .stage-scaler, .stage-review .stage-viewport { cursor: pointer; }
+.stage-review .stage-progress { height: 24px; margin: 0 20px; }
+.stage-review .stage-scrubber { top: 0; height: 24px; }
+.stage-review .stage-scrubber::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
+.stage-review .stage-scrubber::-moz-range-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-moz-range-thumb { width: 12px; height: 12px; }
+.scrub-preview { position: absolute; bottom: calc(100% + 8px); padding: 3px; border: 1px solid #4b4f56; border-radius: 4px; background: #1b1d21; box-shadow: 0 4px 16px #0006; pointer-events: none; }
+.scrub-preview-picture { position: relative; display: grid; place-items: center; overflow: hidden; background: #111215; }
+.scrub-preview-picture iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; pointer-events: none; }
+.scrub-preview-picture span { padding: 8px; color: var(--text-3); font: 10px var(--font-ui); text-align: center; }
+.scrub-preview-picture span[hidden] { display: none; }
+.scrub-preview-time { padding: 5px 3px 2px; color: #d5d8df; font: 10px var(--font-mono); text-align: center; }
 
 .preview-unavailable .artifact-type { position: static; width: auto; height: auto; clip-path: none; color: #9298a2; font-size: 10px; }
 
 .artifact-card.selected .artifact-preview { background: var(--artifact-selection); border-radius: 3px; }
 .artifact-card.selected .artifact-name-text { color: #f1f2f5; background: var(--artifact-selection); }
 .library-continuation { grid-column: 1 / -1; height: 28px; display: grid; place-items: center; color: #777e89; font-size: 10px; }
+
+.timeline-overlap-menu, .selection-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 160px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--line-strong);
+  border-radius: 5px;
+  background: var(--panel-raised);
+  box-shadow: 0 6px 20px #0006;
+}
+.timeline-overlap-menu button, .selection-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 9px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.timeline-overlap-menu button:hover,
+.timeline-overlap-menu button:focus-visible,
+.selection-menu button:hover,
+.selection-menu button:focus-visible { background: var(--field); outline: none; }
+
+/* Compact authored rules keep interval geometry without a thumbnail body. */
+.clip-chrome-compact > .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  border-radius: var(--timeline-item-radius);
+  background: var(--item-head);
+}
+.clip-chrome-compact > .clip-body,
+.clip-chrome-compact .clip-meta { display: none; }
+.clip-chrome-compact .clip-name { font-size: 11px; font-weight: 500; }
+
+/* Track-internal bands share one label and meet without child-track gutters. */
+.timeline-track-banded { padding: var(--timeline-item-inset-y) 0; }
+.timeline-track-banded > .track-band { border-bottom: 0; }
+.timeline-track-banded > .track-band > .clip {
+  height: 100%;
+  margin-top: 0;
+  border-radius: 0;
+}
+.timeline-track-banded > .track-band:first-child > .clip {
+  border-top-left-radius: var(--timeline-item-radius);
+  border-top-right-radius: var(--timeline-item-radius);
+}
+.timeline-track-banded > .track-band:last-child > .clip {
+  border-bottom-left-radius: var(--timeline-item-radius);
+  border-bottom-right-radius: var(--timeline-item-radius);
+}
+.track-band .clip-head, .track-band .clip-body { border-radius: inherit; }
+.track-band-label .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  background: var(--item-head);
+}
+.track-band-label .clip-body, .track-band-label .clip-meta { display: none; }

package/packages/studio/src/ui/artifact-name.ts

@@ -1,3 +1,5 @@
+import { uiAttr, uiText, userText } from "./i18n.js";
+
 /** Two-line label with an expanding editor; the caller owns persistence. */
 export function createArtifactName(options: {
   readonly name: string;
@@ -15,7 +17,7 @@ export function createArtifactName(options: {
   text.className = "artifact-name-text";
   text.textContent = name;
   label.append(text);
-  label.title = options.editable ? `${name}\nDouble-click or press F2 to rename` : `${name}\nNaming is available when this Build finishes`;
+  uiAttr(label, "title", options.editable ? "library.rename-hint" : "library.name-pending", { name });
   element.append(label);
   label.addEventListener("click", (event) => { event.stopPropagation(); options.select(); });
   let editing = false;
@@ -30,7 +32,7 @@ export function createArtifactName(options: {
     field.className = "artifact-name-editor";
     field.value = name;
     field.rows = 1;
-    field.setAttribute("aria-label", "Display name");
+    uiAttr(field, "aria-label", "library.display-name");
     const error = document.createElement("span");
     error.className = "artifact-name-error";
     error.setAttribute("role", "status");
@@ -53,17 +55,17 @@ export function createArtifactName(options: {
       if (!editing || saving) return;
       const value = field.value.trim();
       if (value === name) { close(); return; }
-      if (value.length === 0) { error.textContent = "Enter a name."; return; }
+      if (value.length === 0) { uiText(error, "library.enter-name"); return; }
       saving = true;
       field.readOnly = true;
-      error.textContent = "Saving…";
+      uiText(error, "common.saving");
       try {
         name = await options.save(value);
         text.textContent = name;
-        label.title = `${name}\nDouble-click or press F2 to rename`;
+        uiAttr(label, "title", "library.rename-hint", { name });
         close();
       } catch (cause) {
-        error.textContent = cause instanceof Error ? cause.message : String(cause);
+        userText(error, cause instanceof Error ? cause.message : String(cause));
       } finally {
         saving = false;
         field.readOnly = false;

package/packages/studio/src/ui/artifact-preview.ts

@@ -1,3 +1,4 @@
+import { uiAttr, uiText, userText } from "./i18n.js";
 import type { StudioArtifactView } from "../shared.js";
 import { audioPreview } from "./material-preview.js";
 
@@ -35,7 +36,7 @@ export function createArtifactPreview(changed: () => void) {
     error.setAttribute("role", "status");
     const failed = () => {
       if (generation !== current) return;
-      error.textContent = "This media could not be opened in the browser.";
+      uiText(error, "player.media-failed");
       error.hidden = false;
       changed();
     };
@@ -61,14 +62,14 @@ export function createArtifactPreview(changed: () => void) {
       if (audio) {
         const wave = document.createElement("div");
         wave.className = "stage-audio-wave";
-        wave.textContent = "Audio";
+        uiText(wave, "library.audio");
         element.append(wave);
         void audioPreview(url).then((waveform) => {
           if (generation !== current || waveform === undefined) return;
           const image = document.createElement("img");
           image.src = waveform;
-          image.alt = "Audio waveform";
-          wave.replaceChildren(image);
+          uiAttr(image, "alt", "player.audio-waveform");
+          userText(wave, ""); wave.replaceChildren(image);
         });
       }
     }

package/packages/studio/src/ui/code.ts

@@ -1,3 +1,4 @@
+import { t, userText, uiAttribute, uiText, uiAttr } from "./i18n.js";
 import type { Range, StudioSnapshot, StudioSourceView } from "../shared.js";
 import { icon, setIcon } from "./icons.js";
 import { intentTones } from "./markers.js";
@@ -77,10 +78,10 @@ export function createCodePane(): CodePane {
     <strong class="code-location" data-path></strong>
     <div class="code-actions">
       <span class="code-save-state" data-save-state></span>
-      <button type="button" class="icon-button code-wrap" data-wrap aria-label="Wrap lines" aria-pressed="false" title="Wrap lines">
+      <button type="button" class="icon-button code-wrap" data-wrap ${uiAttribute("aria-label", "source.wrap-lines")} aria-pressed="false" ${uiAttribute("title", "source.wrap-lines")}>
         ${icon("wrap")}
       </button>
-      <button type="button" class="icon-button code-mode" data-mode aria-label="Edit source" title="Edit source">
+      <button type="button" class="icon-button code-mode" data-mode ${uiAttribute("aria-label", "source.edit-source")} ${uiAttribute("title", "source.edit-source")}>
         <span data-mode-icon>${icon("edit")}</span>
       </button>
     </div>`;
@@ -88,7 +89,7 @@ export function createCodePane(): CodePane {
   element.className = "code";
   element.innerHTML = `
     <div class="code-scroll"><svg class="range-canvas" aria-hidden="true"></svg></div>
-    <textarea class="code-editor" data-editor spellcheck="false" aria-label="SVML source"></textarea>`;
+    <textarea class="code-editor" data-editor spellcheck="false" ${uiAttribute("aria-label", "source.svml-source")}></textarea>`;
   const path = toolbar.querySelector<HTMLElement>("[data-path]")!;
   const scroll = element.querySelector<HTMLElement>(".code-scroll")!;
   const canvas = element.querySelector<SVGSVGElement>(".range-canvas")!;
@@ -116,8 +117,8 @@ export function createCodePane(): CodePane {
     wrapped = value;
     element.classList.toggle("is-wrapped", wrapped);
     wrap.setAttribute("aria-pressed", String(wrapped));
-    wrap.setAttribute("aria-label", wrapped ? "Keep lines unwrapped" : "Wrap lines");
-    wrap.title = wrapped ? "Keep lines unwrapped" : "Wrap lines";
+    uiAttr(wrap, "aria-label", wrapped ? "source.keep-lines-unwrapped" : "source.wrap-lines");
+    uiAttr(wrap, "title", wrapped ? "source.keep-lines-unwrapped" : "source.wrap-lines");
     window.requestAnimationFrame(draw);
   };
 
@@ -125,8 +126,8 @@ export function createCodePane(): CodePane {
     editing = value;
     element.classList.toggle("is-editing", editing);
     setIcon(modeIcon, editing ? "eye" : "edit");
-    mode.setAttribute("aria-label", editing ? "Read source" : "Edit source");
-    mode.title = editing ? "Read source" : "Edit source";
+    uiAttr(mode, "aria-label", editing ? "source.read-source" : "source.edit-source");
+    uiAttr(mode, "title", editing ? "source.read-source" : "source.edit-source");
     if (editing) {
       editor.value = sourceText;
       editingRevision = snapshotRevision;
@@ -143,7 +144,7 @@ export function createCodePane(): CodePane {
     saveInFlight = true;
     let accepted = false;
     let acceptedRevision = savingRevision;
-    saveState.textContent = "Saving";
+    uiText(saveState, "common.saving");
     saveState.className = "code-save-state saving";
     try {
       const response = await fetch("/__studio/source", {
@@ -153,7 +154,7 @@ export function createCodePane(): CodePane {
       });
       if (!response.ok) {
         const reason = await response.text();
-        throw new Error(reason || `Save failed (${response.status})`);
+        throw new Error(reason || t("source.save-failed-status", { status: response.status }));
       }
       const result = await response.json() as { readonly revision?: unknown };
       if (typeof result.revision === "number") acceptedRevision = result.revision;
@@ -163,15 +164,15 @@ export function createCodePane(): CodePane {
         sourceText = savingText;
         dirty = false;
       }
-      saveState.textContent = "Saved";
+      uiText(saveState, "common.saved");
       saveState.className = "code-save-state saved";
       window.setTimeout(() => {
-        if (!dirty) saveState.textContent = "";
+        if (!dirty) userText(saveState, "");
       }, 1200);
     } catch (error) {
-      saveState.textContent = error instanceof Error && error.message.includes("changed")
-        ? "Changed outside Studio"
-        : "Save failed";
+      uiText(saveState, error instanceof Error && error.message.includes("changed")
+        ? "source.changed-outside-studio"
+        : "common.save-failed");
       saveState.className = "code-save-state error";
     } finally {
       saveInFlight = false;
@@ -189,7 +190,7 @@ export function createCodePane(): CodePane {
   wrap.addEventListener("click", () => setWrapped(!wrapped));
   editor.addEventListener("input", () => {
     dirty = true;
-    saveState.textContent = "Unsaved";
+    uiText(saveState, "source.unsaved");
     saveState.className = "code-save-state dirty";
     if (saveTimer !== undefined) window.clearTimeout(saveTimer);
     saveTimer = window.setTimeout(() => void save(), 480);
@@ -308,7 +309,7 @@ export function createCodePane(): CodePane {
           imports: [],
         };
       if (activeSource !== undefined && activeSource.path !== sourceFile.path && dirty) {
-        saveState.textContent = "Saving before switch";
+        uiText(saveState, "source.saving-before-switch");
         saveState.className = "code-save-state saving";
         void save();
         return false;