@hyperframes/studio 0.8.66 → 0.8.67

package/src/components/dock/dock.css

@@ -1,28 +1,197 @@
 @import "dockview-react/dist/styles/dockview.css";
 
 .hf-dock {
-  --dv-group-view-background-color: var(--color-panel-bg);
-  --dv-tabs-and-actions-container-background-color: var(--color-panel-surface);
-  --dv-activegroup-visiblepanel-tab-background-color: var(--color-panel-bg);
-  --dv-activegroup-hiddenpanel-tab-background-color: var(--color-panel-surface);
-  --dv-inactivegroup-visiblepanel-tab-background-color: var(--color-panel-bg);
-  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--color-panel-surface);
-  --dv-activegroup-visiblepanel-tab-color: var(--color-panel-text-1);
-  --dv-activegroup-hiddenpanel-tab-color: var(--color-panel-text-3);
-  --dv-inactivegroup-visiblepanel-tab-color: var(--color-panel-text-2);
-  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-panel-text-4);
-  --dv-tab-divider-color: var(--color-panel-border);
-  --dv-separator-border: var(--color-panel-border);
-  --dv-paneview-header-border-color: var(--color-panel-border);
-  --dv-sash-color: var(--color-panel-hover);
+  --dv-group-view-background-color: var(--panel-card-bg);
+  --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);
+  --dv-tabs-and-actions-container-height: 36px;
+  /* The fill paints the shown tab, so every tab state is transparent. */
+  --dv-activegroup-visiblepanel-tab-background-color: transparent;
+  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
+  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;
+  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
+  --dv-activegroup-visiblepanel-tab-color: var(--color-text-1);
+  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-2);
+  --dv-inactivegroup-visiblepanel-tab-color: var(--color-text-1);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-2);
+  --dv-tab-divider-color: transparent;
+  --dv-tab-margin: 0;
+  --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: transparent;
+  --dv-sash-color: transparent;
   --dv-active-sash-color: var(--color-panel-accent);
   --dv-drag-over-background-color: color-mix(in srgb, var(--color-panel-accent) 12%, transparent);
   --dv-drag-over-border-color: var(--color-panel-accent);
-  --dv-tab-font-size: 11px;
-  --dv-tabs-and-actions-container-font-size: 11px;
+  --dv-tab-font-size: 12.5px;
+  --dv-tabs-and-actions-container-font-size: 12.5px;
+  background-color: var(--panel-shell-bg);
 }
 
 .hf-dock .dv-sash:focus-visible {
   background-color: var(--dv-active-sash-color);
   outline: none;
 }
+
+.hf-dock .dv-dockview {
+  background-color: var(--panel-shell-bg);
+}
+
+/* Cards on the shell: 3px around each group's view makes a 6px gutter. The card owns the only border. */
+.hf-dock .dv-view:has(> .dv-groupview) {
+  box-sizing: border-box;
+  padding: 3px;
+}
+
+.hf-dock .dv-groupview {
+  border: 1px solid var(--panel-card-border);
+  border-radius: 10px;
+}
+
+.hf-dock .dv-tabs-and-actions-container {
+  align-items: flex-end;
+  padding: 6px 0 0 4px;
+}
+
+.hf-dock .dv-scrollable {
+  height: 30px;
+  min-width: 0;
+}
+
+/* dockview's own scrollbar lane; the strip scrolls by wheel and keeps the shown tab in view. */
+.hf-dock .dv-scrollbar {
+  display: none;
+}
+
+.hf-dock .dv-tabs-container {
+  --hf-fade-start: 0px;
+  --hf-fade-end: 0px;
+}
+
+/* A mask adds a compositor render pass; only a strip that is actually clipped needs one. */
+.hf-dock .dv-tabs-container[data-clipped] {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--hf-fade-start),
+    black calc(100% - var(--hf-fade-end)),
+    transparent
+  );
+}
+
+.hf-dock .dv-tabs-container[data-clipped~="start"] {
+  --hf-fade-start: 12px;
+}
+
+.hf-dock .dv-tabs-container[data-clipped~="end"] {
+  --hf-fade-end: 12px;
+}
+
+.hf-dock .dv-tab {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 6px;
+  border-radius: 6px 6px 0 0;
+  white-space: nowrap;
+}
+
+/* dockview's own state rule paints tabs from these variables, so hover sets them. */
+.hf-dock .dv-tab.dv-inactive-tab:hover {
+  --dv-activegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);
+  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);
+  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-1);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-1);
+}
+
+.hf-dock .dv-tab:focus-visible {
+  outline: 1.5px solid var(--color-accent);
+  outline-offset: -1.5px;
+}
+
+.hf-dock .dv-tab:focus-visible::after,
+.hf-dock .dv-tab:has(:focus-visible)::after {
+  outline: none !important;
+}
+
+.hf-dock-tab-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 30px;
+  border-radius: 6px 6px 0 0;
+  background-color: var(--panel-card-bg);
+  pointer-events: none;
+}
+
+.hf-dock-tab-fill[data-ready] {
+  transition:
+    transform 140ms ease-out,
+    width 140ms ease-out;
+}
+
+/* Fills dockview's tab part, so the label and icon centre in the tab's full height. */
+.hf-dock-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+}
+
+.hf-dock .dv-inactive-tab .hf-dock-tab-icon,
+.hf-dock .dv-inactive-tab .hf-dock-tab-close {
+  display: none;
+}
+
+.hf-dock-tab-icon {
+  flex: none;
+  animation: hf-dock-tab-icon-in 80ms ease-out;
+}
+
+@keyframes hf-dock-tab-icon-in {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+}
+
+/* Takes its space whenever the tab is shown, so hover never moves the label. */
+.hf-dock-tab-close {
+  display: flex;
+  opacity: 0;
+}
+
+.dv-tab:hover .hf-dock-tab-close,
+.dv-tab:focus-visible .hf-dock-tab-close {
+  opacity: 1;
+}
+
+/* Sized by the actions it draws, so a strip without them gives its tabs the whole width. */
+.hf-dock .dv-right-actions-container {
+  flex: none;
+  align-self: flex-start;
+}
+
+.hf-dock-strip-actions {
+  display: flex;
+  margin-right: 4px;
+  opacity: 0;
+}
+
+.dv-groupview:hover .hf-dock-strip-actions {
+  opacity: 0.5;
+}
+
+.hf-dock-strip-actions:hover,
+.hf-dock-strip-actions:focus-within {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-dock-tab-fill[data-ready] {
+    transition: none;
+  }
+
+  .hf-dock-tab-icon {
+    animation: none;
+  }
+}

package/src/components/dock/dockTabFill.ts

@@ -0,0 +1,124 @@
+import type { DockviewApi } from "dockview-react";
+
+const TAB_FILL_CLASS = "hf-dock-tab-fill";
+
+/** The strip's one fill, created on first use. Dockview inserts tabs before tabs, so it stays first. */
+function fillOf(list: HTMLElement): HTMLElement {
+  const existing = list.querySelector<HTMLElement>(`:scope > .${TAB_FILL_CLASS}`);
+  if (existing) return existing;
+  const fill = document.createElement("span");
+  fill.className = TAB_FILL_CLASS;
+  fill.setAttribute("aria-hidden", "true");
+  list.prepend(fill);
+  // Placed once without motion; only later moves slide.
+  requestAnimationFrame(() => fill.setAttribute("data-ready", ""));
+  return fill;
+}
+
+/** A strip's width and where its shown tab sits, as of the last pass. */
+type StripShape = { width: number; tab: HTMLElement | null; left: number; size: number };
+
+/**
+ * True when the strip narrowed or its shown tab moved or resized since it was last visible. dockview
+ * reveals a tab only when it is activated, and the user's own scrolling changes none of these.
+ */
+function reshaped(before: StripShape | undefined, now: StripShape) {
+  if (!before || now.width === 0) return false;
+  if (now.width < before.width) return true;
+  return now.tab !== before.tab || now.left !== before.left || now.size !== before.size;
+}
+
+/** The scroll that shows the whole shown tab, e.g. after the strip narrows because its actions appeared. */
+function revealedScroll(shape: StripShape, scrollLeft: number) {
+  if (shape.left < scrollLeft) return shape.left;
+  // Offset sizes are rounded while the tab's edge is fractional; a pixel over is clamped at the end.
+  return Math.max(scrollLeft, shape.left + shape.size + 1 - shape.width);
+}
+
+/** Reads where the shown tab sits; the write happens after every strip is read, so layout runs once. */
+function measureFill(list: HTMLElement, shapes: WeakMap<HTMLElement, StripShape>): () => void {
+  const fill = fillOf(list);
+  const tab = list.querySelector<HTMLElement>(":scope > .dv-active-tab");
+  const shape = {
+    width: list.clientWidth,
+    tab,
+    left: tab?.offsetLeft ?? 0,
+    size: tab?.offsetWidth ?? 0,
+  };
+  const reveal = tab !== null && reshaped(shapes.get(list), shape);
+  // A hidden strip (another group maximised) keeps its scroll, so it is compared with its last visible shape.
+  if (shape.width > 0) shapes.set(list, shape);
+  const scrollLeft = list.scrollLeft;
+  const target = reveal ? revealedScroll(shape, scrollLeft) : scrollLeft;
+  return () => {
+    fill.hidden = !tab;
+    if (!tab) return;
+    fill.style.width = `${shape.size}px`;
+    fill.style.transform = `translateX(${shape.left}px)`;
+    if (target !== scrollLeft) list.scrollLeft = target;
+  };
+}
+
+/** Marks which edges of a scrolled strip are clipped, for the CSS edge fade. */
+function markClippedEdges(list: HTMLElement) {
+  const edges = [];
+  if (list.scrollLeft > 0) edges.push("start");
+  if (list.scrollLeft + list.clientWidth < list.scrollWidth - 1) edges.push("end");
+  const value = edges.join(" ");
+  if (value) list.setAttribute("data-clipped", value);
+  else list.removeAttribute("data-clipped");
+}
+
+/**
+ * Slides one fill per tab strip under its shown tab, keeps that tab in view, and keeps the
+ * clipped-edge marks current.
+ * Returns a disposer.
+ */
+export function installTabFill(api: DockviewApi, root: HTMLElement): () => void {
+  const lists = () => root.querySelectorAll<HTMLElement>(".dv-tabs-container");
+  // Tab widths also change with no dockview event: a renamed title, a late web font.
+  const resizeObserver = new ResizeObserver(() => placeAll());
+  const observed = new Set<Element>();
+  function observe(elements: Iterable<Element>) {
+    for (const element of observed) {
+      if (element.isConnected) continue;
+      resizeObserver.unobserve(element);
+      observed.delete(element);
+    }
+    for (const element of elements) {
+      if (observed.has(element)) continue;
+      resizeObserver.observe(element);
+      observed.add(element);
+    }
+  }
+  const shapes = new WeakMap<HTMLElement, StripShape>();
+  function placeAll() {
+    const strips = [...lists()];
+    const writes = strips.map((list) => measureFill(list, shapes));
+    for (const write of writes) write();
+    for (const list of strips) markClippedEdges(list);
+    observe(strips.flatMap((list) => [list, ...list.querySelectorAll(":scope > .dv-tab")]));
+  }
+  const onScroll = (event: Event) => {
+    const list = event.target;
+    if (list instanceof HTMLElement && list.classList.contains("dv-tabs-container")) {
+      markClippedEdges(list);
+    }
+  };
+  const subscriptions = [
+    api.onDidActivePanelChange(placeAll),
+    api.onDidAddPanel(placeAll),
+    api.onDidRemovePanel(placeAll),
+    api.onDidMovePanel(placeAll),
+    api.onDidLayoutChange(placeAll),
+    api.onDidLayoutFromJSON(placeAll),
+  ];
+  // Scroll does not bubble; a capturing listener still sees every strip's.
+  root.addEventListener("scroll", onScroll, true);
+  placeAll();
+  return () => {
+    root.removeEventListener("scroll", onScroll, true);
+    for (const subscription of subscriptions) subscription.dispose();
+    resizeObserver.disconnect();
+  };
+}

package/src/components/dock/dockTabs.contract.test.ts

@@ -0,0 +1,80 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const dockCss = readFileSync(path.join(import.meta.dirname, "dock.css"), "utf8").replace(
+  /@import[^;]*;/,
+  "",
+);
+
+/** Each top-level rule's selector and body, with the reduced-motion block kept whole. */
+function rules(css: string): { selector: string; body: string }[] {
+  const found: { selector: string; body: string }[] = [];
+  let depth = 0;
+  let start = 0;
+  let selector = "";
+  for (let index = 0; index < css.length; index++) {
+    if (css[index] === "{") {
+      if (depth === 0) {
+        selector = css
+          .slice(start, index)
+          .replace(/\/\*[\s\S]*?\*\//g, "")
+          .trim();
+        start = index + 1;
+      }
+      depth++;
+    } else if (css[index] === "}") {
+      depth--;
+      if (depth === 0) {
+        found.push({ selector, body: css.slice(start, index) });
+        start = index + 1;
+      }
+    }
+  }
+  return found;
+}
+
+const bodyOf = (selector: string) =>
+  rules(dockCss).find((rule) => rule.selector === selector)?.body;
+
+describe("dock panel strip contract", () => {
+  it("draws one border per surface: the card's, and no divider, separator or tab outline", () => {
+    const bordered = rules(dockCss)
+      .filter((rule) => /(^|[\s;{])border(-(top|right|bottom|left))?\s*:/.test(rule.body))
+      .map((rule) => rule.selector);
+    expect(bordered).toEqual([".hf-dock .dv-groupview"]);
+    const dock = bodyOf(".hf-dock");
+    expect(dock).toContain("--dv-tab-divider-color: transparent");
+    expect(dock).toContain("--dv-separator-border: transparent");
+  });
+
+  it("slides only transform and width, 140ms ease-out, and reveals the icon in 80ms", () => {
+    expect(bodyOf(".hf-dock-tab-fill[data-ready]")?.replace(/\s+/g, " ").trim()).toBe(
+      "transition: transform 140ms ease-out, width 140ms ease-out;",
+    );
+    expect(bodyOf(".hf-dock-tab-icon")).toContain("animation: hf-dock-tab-icon-in 80ms ease-out");
+    const animated = rules(dockCss).filter(
+      (rule) => !rule.selector.startsWith("@") && /transition|animation/.test(rule.body),
+    );
+    expect(animated.map((rule) => rule.selector)).toEqual([
+      ".hf-dock-tab-fill[data-ready]",
+      ".hf-dock-tab-icon",
+    ]);
+  });
+
+  it("turns the slide and the icon reveal off under reduced motion", () => {
+    const reduced = bodyOf("@media (prefers-reduced-motion: reduce)")?.replace(/\s+/g, " ");
+    expect(reduced).toContain(".hf-dock-tab-fill[data-ready] { transition: none; }");
+    expect(reduced).toContain(".hf-dock-tab-icon { animation: none; }");
+  });
+
+  it("centres the tab's icon and label in the tab's full height", () => {
+    const tab = bodyOf(".hf-dock-tab");
+    expect(tab).toContain("height: 100%");
+    expect(tab).toContain("align-items: center");
+  });
+
+  it("takes every colour from a token", () => {
+    expect(dockCss).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(|oklch\(/i);
+  });
+});

package/src/components/nle/PreviewPane.tsx

@@ -115,10 +115,10 @@ export function PreviewPane({
   return (
     <div
       ref={containerRef}
-      // Panel chrome (rounded border) is dropped in fullscreen so the preview
-      // fills the screen edge-to-edge.
+      // A recessed well inset in its dock card; dropped in fullscreen so the
+      // preview fills the screen edge-to-edge.
       className={`flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${
-        isFullscreen ? "" : "rounded-lg border border-neutral-800/50"
+        isFullscreen ? "" : "m-3 rounded-md border border-neutral-800/50"
       }`}
       data-studio-fullscreen-target=""
     >

package/src/components/nle/TimelinePane.tsx

@@ -85,7 +85,7 @@ export function TimelinePane({
       aria-disabled={timelineDisabled || undefined}
     >
       <div
-        className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
+        className="flex flex-col flex-1 min-h-0 overflow-hidden"
         onDoubleClick={(e) => {
           if ((e.target as HTMLElement).closest("[data-clip]")) return;
           if (timelineDisabled) return;

package/src/components/ui/Menu.tsx

@@ -220,6 +220,22 @@ export function MenuRadioItem({ className, children, ...props }: MenuRadioItemPr
   );
 }
 
+/** An on/off row; the tick renders only while `checked`. */
+export function MenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: StyledProps<typeof BaseMenu.CheckboxItem>) {
+  return (
+    <BaseMenu.CheckboxItem className={cn(itemBase, className)} {...props}>
+      <span className="truncate">{children}</span>
+      <span className="flex size-3 shrink-0 items-center justify-center text-accent">
+        <BaseMenu.CheckboxItemIndicator>✓</BaseMenu.CheckboxItemIndicator>
+      </span>
+    </BaseMenu.CheckboxItem>
+  );
+}
+
 /** A hairline between two groups of items. */
 export function MenuSeparator({ className, ...props }: StyledProps<typeof BaseMenu.Separator>) {
   return <BaseMenu.Separator className={cn("my-1 h-px bg-hairline", className)} {...props} />;

package/src/components/ui/index.ts

@@ -11,6 +11,7 @@ export { Tooltip } from "./Tooltip";
 export {
   ContextMenu,
   Menu,
+  MenuCheckboxItem,
   MenuItem,
   MenuRadioGroup,
   MenuRadioItem,

package/src/styles/theme.css

@@ -273,6 +273,14 @@
   --color-panel-media: var(--color-media);
   --color-panel-container: var(--color-container);
 
+  /* Dock panels are cards on the shell. The card owns the only border; its tab
+   * strip sits below the card body and the shown tab is a fill in the body colour. */
+  --panel-shell-bg: var(--color-bg-1);
+  --panel-card-bg: var(--color-surface);
+  --panel-card-border: #303034;
+  --panel-strip-bg: var(--color-bg-0);
+  --panel-tab-bg-hover: #202023;
+
   /* Names Studio's markup invented that no config ever defined, so the classes
    * compiled to nothing. Aliased to the token that was meant, rather than
    * given values of their own, so there is still one source per decision.