@hyperframes/studio 0.8.102 → 0.8.103

package/src/hooks/usePreviewInteraction.test.ts

@@ -267,3 +267,35 @@ describe("usePreviewInteraction", () => {
     cleanup();
   });
 });
+
+describe("a refused move's toast", () => {
+  it("gives the refusal's own reason first, else the selection's", () => {
+    const showToast = vi.fn();
+    let blocked!: (selection: DomEditSelection, reason?: string) => void;
+    function Harness() {
+      blocked = usePreviewInteraction({
+        captionEditMode: false,
+        compositionLoading: false,
+        previewIframeRef: { current: null },
+        showToast,
+        applyDomSelection: vi.fn(),
+        resolveDomSelectionFromPreviewPoint: vi.fn(async () => null),
+        resolveAllDomSelectionsFromPreviewPoint: vi.fn(async () => []),
+        updateDomEditHoverSelection: vi.fn(),
+        setActiveGroupElement: vi.fn(),
+      }).handleBlockedDomMove;
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Harness)));
+    const selection = makeSelection("Box", document.createElement("div"));
+    selection.capabilities.reasonIfDisabled = "Locked layer.";
+    blocked(selection, "Studio can't read it.");
+    blocked(selection);
+    act(() => root.unmount());
+    expect(showToast.mock.calls).toEqual([
+      ["Studio can't read it.", "info"],
+      ["Locked layer.", "info"],
+    ]);
+  });
+});

package/src/hooks/usePreviewInteraction.ts

@@ -260,9 +260,10 @@ export function usePreviewInteraction({
   }, [updateDomEditHoverSelection]);
 
   const handleBlockedDomMove = useCallback(
-    (selection: DomEditSelection) => {
+    (selection: DomEditSelection, reason?: string) => {
       showToast(
-        selection.capabilities.reasonIfDisabled ??
+        reason ??
+          selection.capabilities.reasonIfDisabled ??
           "This element can't be adjusted directly from the preview.",
         "info",
       );

package/src/player/components/TimelineClipFades.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { TimelineClipFades } from "./TimelineClipFades";
@@ -9,7 +9,10 @@ import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const mounted: Root[] = [];
+
 afterEach(() => {
+  act(() => mounted.splice(0).forEach((root) => root.unmount()));
   document.body.innerHTML = "";
 });
 
@@ -31,6 +34,7 @@ function render(
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
+  mounted.push(root);
   const onSetElementAttributeLive = vi.fn();
   const onSetElementAttributeQuiet = vi.fn().mockResolvedValue(undefined);
   const onRevertElementAttributeLive = vi.fn();
@@ -97,6 +101,14 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it("clips the ramps to the clip's rounded corners", () => {
+    const { host, root } = render(clip, { showHandles: false, provide: false });
+    const ramps = host.querySelector<SVGElement>('[data-testid="clip-fade-ramps"]');
+    expect(ramps?.style.overflow).toBe("hidden");
+    expect(ramps?.style.borderRadius).toBe("inherit");
+    act(() => root.unmount());
+  });
+
   it("renders nothing for a clip without fades when the handles are hidden", () => {
     const { host, root } = render(
       { ...clip, fadeIn: undefined, fadeOut: undefined },
@@ -113,7 +125,7 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
     if (!handle) throw new Error("expected a fade-in handle");
     armCapture(handle);
-    // The handle sits at the 1 s mark (x=100). Drag 150 px right → 2.5 s.
+    // 150 px of rightward travel adds 1.5 s to the 1 s fade-in, wherever the press lands.
     act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
     act(() => handle.dispatchEvent(pointer("pointermove", 200)));
     act(() => handle.dispatchEvent(pointer("pointermove", 250)));
@@ -134,7 +146,7 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
     if (!handle) throw new Error("expected a fade-out handle");
     armCapture(handle);
-    // Pressed at x=1000 with a 2 s fade-out. 300 px left → 5 s.
+    // 300 px of leftward travel adds 3 s to the 2 s fade-out, wherever the press lands.
     act(() => handle.dispatchEvent(pointer("pointerdown", 1000)));
     act(() => handle.dispatchEvent(pointer("pointermove", 700)));
     expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "5");
@@ -179,6 +191,30 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it("cancels a drag on Escape pressed while focus is elsewhere, and saves nothing", () => {
+    const { host, onSetElementAttributeQuiet, onRevertElementAttributeLive } = render(clip);
+    const elsewhere = document.createElement("button");
+    document.body.append(elsewhere);
+    elsewhere.focus();
+    const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    if (!handle) throw new Error("expected a fade-in handle");
+    armCapture(handle);
+    act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 300)));
+    expect(document.activeElement).toBe(elsewhere);
+    act(() => {
+      document.activeElement?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    act(() => handle.dispatchEvent(pointer("pointerup", 300)));
+    expect(onSetElementAttributeQuiet).not.toHaveBeenCalled();
+    expect(onRevertElementAttributeLive).toHaveBeenCalledWith(clip, "data-fade-in");
+    expect(host.querySelector('[data-testid="clip-fade-in"]')?.getAttribute("points")).toBe(
+      "0,0 100,0 0,100",
+    );
+  });
+
   it.each([
     ["above the window", 300, -40],
     ["on the window's right edge", window.innerWidth, 10],
@@ -200,6 +236,70 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it.each([
+    ["in", "Fade in 0.25 s"],
+    ["out", "Fade out 0.4 s"],
+  ])(
+    "gives the fade-%s handle a 24 px target and a tooltip naming its length",
+    async (edge, text) => {
+      const { host, root } = render({ ...clip, fadeIn: 0.25, fadeOut: 0.4 });
+      const handle = host.querySelector<HTMLElement>(`[data-testid="clip-fade-handle-${edge}"]`);
+      if (!handle) throw new Error(`expected a fade-${edge} handle`);
+      expect(parseFloat(handle.style.width)).toBeGreaterThanOrEqual(24);
+      expect(parseFloat(handle.style.height)).toBeGreaterThanOrEqual(24);
+      expect(handle.getAttribute("title")).toBe("");
+      act(() => handle.focus());
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(text);
+      act(() => root.unmount());
+    },
+  );
+
+  it.each([0.3, 3])("pins the handles to the top corners for a %s s fade-in", (fadeIn) => {
+    const { host } = render({ ...clip, fadeIn, fadeOut: 0.4 });
+    const inHandle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    expect(inHandle?.style.left).toBe("0px");
+    expect(fadeOut?.style.left).toBe(`${1000 - 24}px`);
+  });
+
+  it("lengthens a fade by the pointer's inward travel from wherever the press lands", () => {
+    const { host, onSetElementAttributeLive } = render(clip);
+    const fadeIn = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    if (!fadeIn || !fadeOut) throw new Error("expected both handles");
+    armCapture(fadeIn);
+    armCapture(fadeOut);
+    act(() => fadeIn.dispatchEvent(pointer("pointerdown", 12)));
+    act(() => fadeIn.dispatchEvent(pointer("pointermove", 162)));
+    expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-in", "2.5");
+    act(() => fadeIn.dispatchEvent(pointer("pointerup", 162)));
+    act(() => fadeOut.dispatchEvent(pointer("pointerdown", 988, 2)));
+    act(() => fadeOut.dispatchEvent(pointer("pointermove", 888, 2)));
+    expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "3");
+  });
+
+  it("paints the handles above the clip's waveform and thumbnail layers", () => {
+    const { host } = render(clip);
+    const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    expect(Number(handle?.style.zIndex)).toBeGreaterThan(10);
+  });
+
+  it("splits a clip narrower than two targets between the handles", () => {
+    const { host } = render({ ...clip, duration: 0.3, fadeIn: 0.1, fadeOut: 0.1 });
+    const fadeIn = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    expect([fadeIn?.style.left, fadeIn?.style.width]).toEqual(["0px", "15px"]);
+    expect([fadeOut?.style.left, fadeOut?.style.width]).toEqual(["15px", "15px"]);
+    const dot = fadeIn?.firstElementChild as HTMLElement;
+    expect(getComputedStyle(dot).width).toBe("10px");
+    // Layout is not real here; tests/e2e/fade-handles.mjs measures the box in Chrome.
+    expect(getComputedStyle(dot).flexShrink).toBe("0");
+    expect(getComputedStyle(dot).pointerEvents).toBe("none");
+  });
+
   it("does not let a press on the dot start the clip's own move gesture", () => {
     const outer = vi.fn();
     const { host, root } = render(clip, { onClipPointerDown: outer });

package/src/player/components/TimelineClipFades.tsx

@@ -1,11 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type PointerEvent,
-} from "react";
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent } from "react";
 import {
   HF_AUDIO_FADE_IN_ATTR,
   HF_AUDIO_FADE_OUT_ATTR,
@@ -13,13 +6,16 @@ import {
   formatFadeSeconds,
 } from "@hyperframes/core/audio-fade";
 import type { TimelineElement } from "../store/playerStore";
+import { Tooltip } from "../../components/ui";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { releasedOutsideWindow } from "./timelinePointerRelease";
 
 type FadeEdge = "in" | "out";
 
 const HANDLE_SIZE = 10;
-const HANDLE_HIT = 16;
+const HANDLE_HIT = 24;
+const HANDLE_Z_ABOVE_CLIP_CONTENT = 30;
+const SUPPRESS_CLIP_NATIVE_TITLE = "";
 /** Pixels of pointer travel before a press on the handle counts as a drag. */
 const DRAG_THRESHOLD_PX = 2;
 
@@ -147,31 +143,38 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
     );
   };
 
-  const onHandleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    const g = gesture.current;
-    if (e.key !== "Escape" || !g) return;
-    e.preventDefault();
-    gesture.current = null;
-    setDragging(null);
-    revertGesture(g);
-  };
+  useEffect(() => {
+    if (dragging === null) return;
+    const cancelOnWindowEscape = (e: KeyboardEvent) => {
+      const g = gesture.current;
+      if (e.key !== "Escape" || !g) return;
+      e.preventDefault();
+      e.stopPropagation();
+      gesture.current = null;
+      setDragging(null);
+      revertGesture(g);
+    };
+    window.addEventListener("keydown", cancelOnWindowEscape, { capture: true });
+    return () => window.removeEventListener("keydown", cancelOnWindowEscape, { capture: true });
+  });
 
   const showIn = fades.fadeIn > 0;
   const showOut = fades.fadeOut > 0;
   const handlesVisible = showHandles || dragging !== null;
   if (!showIn && !showOut && !handlesVisible) return null;
 
-  const handleStyle = (leftPx: number): CSSProperties => ({
+  const hitWidth = Math.min(HANDLE_HIT, widthPx / 2);
+  const handleStyle = (edge: FadeEdge): CSSProperties => ({
     position: "absolute",
     top: -(HANDLE_HIT - HANDLE_SIZE) / 2 + 1,
-    left: leftPx - HANDLE_HIT / 2,
-    width: HANDLE_HIT,
+    left: edge === "in" ? 0 : widthPx - hitWidth,
+    width: hitWidth,
     height: HANDLE_HIT,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "ew-resize",
-    zIndex: 6,
+    zIndex: HANDLE_Z_ABOVE_CLIP_CONTENT,
     opacity: handlesVisible ? 1 : 0,
     pointerEvents: handlesVisible && canEdit ? "auto" : "none",
     touchAction: "none",
@@ -191,7 +194,8 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
             height: "100%",
             pointerEvents: "none",
             zIndex: 5,
-            overflow: "visible",
+            overflow: "hidden",
+            borderRadius: "inherit",
           }}
           viewBox={`0 0 ${Math.max(widthPx, 1)} 100`}
           preserveAspectRatio="none"
@@ -245,25 +249,23 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
             direction="in"
             value={fades.fadeIn}
             max={Math.max(0, el.duration - fades.fadeOut)}
-            style={handleStyle(inPx)}
+            style={handleStyle("in")}
             dragging={dragging === "in"}
             onPointerDown={onHandlePointerDown("in")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
-            onKeyDown={onHandleKeyDown}
           />
           <FadeHandle
             direction="out"
             value={fades.fadeOut}
             max={Math.max(0, el.duration - fades.fadeIn)}
-            style={handleStyle(widthPx - outPx)}
+            style={handleStyle("out")}
             dragging={dragging === "out"}
             onPointerDown={onHandlePointerDown("out")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
-            onKeyDown={onHandleKeyDown}
           />
         </>
       )}
@@ -281,7 +283,6 @@ function FadeHandle({
   onPointerMove,
   onPointerUp,
   onPointerCancel,
-  onKeyDown,
 }: {
   direction: "in" | "out";
   value: number;
@@ -292,31 +293,31 @@ function FadeHandle({
   onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
   onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
   onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
-  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
 }) {
   const label = direction === "in" ? "Fade in" : "Fade out";
   return (
-    <div
-      role="slider"
-      tabIndex={-1}
-      aria-label={label}
-      aria-valuemin={0}
-      aria-valuemax={max}
-      aria-valuenow={value}
-      aria-valuetext={`${formatFadeSeconds(value)}s`}
-      data-testid={`clip-fade-handle-${direction}`}
-      title={`${label}: ${formatFadeSeconds(value)}s — drag to change`}
-      style={style}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerCancel}
-      onKeyDown={onKeyDown}
-      onClick={(e) => e.stopPropagation()}
-      onDoubleClick={(e) => e.stopPropagation()}
-    >
-      <FadeDot active={dragging} />
-    </div>
+    <Tooltip label={`${label} ${formatFadeSeconds(value)} s`}>
+      <div
+        role="slider"
+        tabIndex={-1}
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-valuetext={`${formatFadeSeconds(value)}s`}
+        data-testid={`clip-fade-handle-${direction}`}
+        title={SUPPRESS_CLIP_NATIVE_TITLE}
+        style={style}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerCancel}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        <FadeDot active={dragging} />
+      </div>
+    </Tooltip>
   );
 }
 
@@ -326,10 +327,12 @@ function FadeDot({ active }: { active: boolean }) {
       aria-hidden="true"
       style={{
         display: "block",
+        flexShrink: 0,
+        pointerEvents: "none",
         width: HANDLE_SIZE,
         height: HANDLE_SIZE,
         borderRadius: "50%",
-        background: active ? "var(--timeline-fade-dot-active)" : "var(--clip-handle)",
+        background: "var(--timeline-fade-dot)",
         boxShadow: "0 0 0 1.5px var(--timeline-fade-dot-ring)",
         transform: active ? "scale(1.15)" : undefined,
         transition: "transform 80ms ease-out",

package/src/styles/theme.css

@@ -114,7 +114,7 @@
   --timeline-handle: rgba(255, 255, 255, 0.55);
   /* Audio clip fades: the shaded wedge over the faded gain, and the corner dots. */
   --timeline-fade-shade: rgba(0, 0, 0, 0.38);
-  --timeline-fade-dot-active: rgba(255, 255, 255, 1);
+  --timeline-fade-dot: #fff;
   --timeline-fade-dot-ring: rgba(0, 0, 0, 0.55);
   --timeline-resize-seam: rgba(255, 255, 255, 0.12);
   --timeline-resize-active: rgba(255, 255, 255, 0.24);

package/src/utils/projectRouting.test.ts

@@ -18,6 +18,15 @@ describe("project routing utilities", () => {
     },
   );
 
+  it("opens a folder whose name has a colon, encoded once both ways", () => {
+    const id = "Customer story: Northwind";
+    expect(encodeProjectId(id)).toBe("Customer%20story%3A%20Northwind");
+    expect(buildProjectApiPath(id, "/preview")).toBe(
+      "/api/projects/Customer%20story%3A%20Northwind/preview",
+    );
+    expect(parseProjectIdFromHash(buildProjectHash(id))).toBe(id);
+  });
+
   it("decodes project ids from hash routes before building capture URLs", () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-05-01T12:00:00Z"));

package/src/utils/projectRouting.ts

@@ -5,13 +5,15 @@ export interface ProjectHashRoute {
   params: URLSearchParams;
 }
 
+const WINDOWS_DRIVE_PREFIX = /^[a-z]:/i;
+
 /** Project names are single path segments, including when received from a hash or server. */
 export function isValidProjectId(value: string): boolean {
   return (
     value.length > 0 &&
     value !== "." &&
     value !== ".." &&
-    !value.includes(":") &&
+    !WINDOWS_DRIVE_PREFIX.test(value) &&
     !value.includes("/") &&
     !value.includes("\\") &&
     !Array.from(value).some((char) => char.charCodeAt(0) < 32)

package/dist/chunk-S65AQH6M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/utils/sourceScopedSelectorIndex.ts","../src/utils/projectRouting.ts"],"sourcesContent":["/**\n * Occurrence index for a selector within its source document.\n *\n * The preview flattens multiple composition files into one DOM, so a raw\n * `querySelectorAll` index is not a stable source-file identity. Callers supply\n * their existing source resolver; this helper alone owns occurrence scoping.\n */\n\n/** Every element matching one selector, mapped to the source file it belongs to\n *  and its occurrence index within that file. One document query fills it. */\ntype SelectorOccurrences = Map<Element, { scope: string; index: number }>;\n\ninterface SelectorIndexPass {\n  doc: Document;\n  bySelector: Map<string, SelectorOccurrences>;\n}\n\nlet activePass: SelectorIndexPass | null = null;\n\n/**\n * Share one occurrence index per selector across every\n * `getSourceScopedSelectorIndex` call made synchronously inside `run`.\n *\n * Unshared, each call runs its own whole-document `querySelectorAll(selector)`\n * and resolves the source file of every match. A rebuild that walks n elements\n * sharing a selector therefore does n whole-document queries and n² resolver\n * calls — a composition of repeated cards or tiles is exactly that shape. One\n * index per selector makes the same pass linear.\n *\n * Correctness rests on the pass being ONE synchronous walk of a document that\n * does not change under it: nothing invalidates the index, so `run` must not\n * mutate `doc`, and every call inside it must resolve source files the same way\n * (the resolver may be a fresh closure per call, as long as it answers the\n * same). Outside a pass the index is per-call, exactly as before.\n */\nexport function withSelectorIndexPass<T>(doc: Document, run: () => T): T {\n  const previous = activePass;\n  activePass = { doc, bySelector: new Map() };\n  try {\n    return run();\n  } finally {\n    activePass = previous;\n  }\n}\n\nfunction buildOccurrences(\n  doc: Document,\n  selector: string,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): SelectorOccurrences {\n  const occurrences: SelectorOccurrences = new Map();\n  const counts = new Map<string, number>();\n  for (const candidate of doc.querySelectorAll(selector)) {\n    const scope = resolveSourceFile(candidate) ?? \"index.html\";\n    const index = counts.get(scope) ?? 0;\n    counts.set(scope, index + 1);\n    occurrences.set(candidate, { scope, index });\n  }\n  return occurrences;\n}\n\nexport function getSourceScopedSelectorIndex(\n  doc: Document,\n  el: Element,\n  selector: string | undefined,\n  sourceFile: string | undefined,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): number | undefined {\n  if (!selector || selector.startsWith(\"#\") || selector.startsWith(\"[data-composition-id=\")) {\n    return undefined;\n  }\n\n  try {\n    const pass = activePass?.doc === doc ? activePass : null;\n    let occurrences = pass?.bySelector.get(selector);\n    if (!occurrences) {\n      occurrences = buildOccurrences(doc, selector, resolveSourceFile);\n      pass?.bySelector.set(selector, occurrences);\n    }\n    // An element outside the requested scope is not in that scope's occurrence\n    // run at all, which is the `indexOf` miss the filtered form returned before.\n    const hit = occurrences.get(el);\n    return hit && hit.scope === (sourceFile ?? \"index.html\") ? hit.index : undefined;\n  } catch {\n    return undefined;\n  }\n}\n","const PROJECT_HASH_PREFIX = \"#project/\";\n\nexport interface ProjectHashRoute {\n  projectId: string;\n  params: URLSearchParams;\n}\n\n/** Project names are single path segments, including when received from a hash or server. */\nexport function isValidProjectId(value: string): boolean {\n  return (\n    value.length > 0 &&\n    value !== \".\" &&\n    value !== \"..\" &&\n    !value.includes(\":\") &&\n    !value.includes(\"/\") &&\n    !value.includes(\"\\\\\") &&\n    !Array.from(value).some((char) => char.charCodeAt(0) < 32)\n  );\n}\n\nfunction decodeHashProjectId(value: string): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction normalizeHashParams(\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): URLSearchParams {\n  if (!params) return new URLSearchParams();\n  if (params instanceof URLSearchParams) return params;\n\n  const next = new URLSearchParams();\n  for (const [key, value] of Object.entries(params)) {\n    if (!key || value == null || value === \"\") continue;\n    next.set(key, value);\n  }\n  return next;\n}\n\nexport function encodeProjectId(projectId: string): string {\n  if (!isValidProjectId(projectId)) throw new Error(\"Invalid project ID\");\n  return encodeURIComponent(projectId);\n}\n\nexport function buildProjectHash(\n  projectId: string,\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): string {\n  const search = normalizeHashParams(params).toString();\n  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : \"\"}`;\n}\n\nexport function parseProjectHashRoute(hash: string): ProjectHashRoute | null {\n  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;\n\n  const route = hash.slice(PROJECT_HASH_PREFIX.length);\n  const queryIndex = route.indexOf(\"?\");\n  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;\n  if (!encodedProjectId || encodedProjectId.includes(\"/\")) return null;\n\n  const projectId = decodeHashProjectId(encodedProjectId);\n  if (!isValidProjectId(projectId)) return null;\n\n  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : \"\";\n  return {\n    projectId,\n    params: new URLSearchParams(rawParams),\n  };\n}\n\nexport function parseProjectIdFromHash(hash: string): string | null {\n  return parseProjectHashRoute(hash)?.projectId ?? null;\n}\n\nexport function buildProjectApiPath(projectId: string, suffix = \"\"): string {\n  const normalizedSuffix = suffix && !suffix.startsWith(\"/\") ? `/${suffix}` : suffix;\n  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;\n}\n"],"mappings":"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","names":[]}