@backmatter/studio 0.0.8 → 0.0.10

package/src/pages/ui-kit/type.tsx

@@ -0,0 +1,55 @@
+// packages/studio/src/pages/ui-kit/type.tsx
+import { Text } from "../../ui/Text";
+import { Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "type")!;
+
+export function TypeTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Specimen label="display">
+        <Text size="display" weight="semibold">
+          Display
+        </Text>
+      </Specimen>
+      <Specimen label="xl">
+        <Text size="xl" weight="semibold">
+          Title
+        </Text>
+      </Specimen>
+      <Specimen label="lg">
+        <Text size="lg" weight="medium">
+          Heading
+        </Text>
+      </Specimen>
+      <Specimen label="md">
+        <Text>Body</Text>
+      </Specimen>
+      <Specimen label="sm">
+        <Text size="sm">Small</Text>
+      </Specimen>
+      <Specimen label="xs">
+        <Text size="xs" weight="semibold">
+          Overline
+        </Text>
+      </Specimen>
+      <Specimen label="muted">
+        <Text tone="muted" size="sm">
+          Muted
+        </Text>
+      </Specimen>
+      <Specimen label="danger">
+        <Text tone="danger">Danger</Text>
+      </Specimen>
+      <Specimen label="success">
+        <Text tone="success">Success</Text>
+      </Specimen>
+      <Specimen label="mono">
+        <Text mono size="sm">
+          content/blog/hello.mdx
+        </Text>
+      </Specimen>
+    </Topic>
+  );
+}

package/src/preview-frame-radius.ts

@@ -0,0 +1,51 @@
+// packages/studio/src/preview-frame-radius.ts
+// Heuristic bottom corner radius for the on-site preview ring (no web API for real window shape).
+
+/** Chromium on macOS 26+ (Tahoe) — see chromium/brave window corner updates. */
+export const PREVIEW_FRAME_RADIUS_MAC_CHROMIUM_TAHOE = 20;
+/** Chromium on macOS with rounded desktop windows (approx. Sequoia era). */
+export const PREVIEW_FRAME_RADIUS_MAC_CHROMIUM = 16;
+/** Safari / Firefox on macOS. */
+export const PREVIEW_FRAME_RADIUS_MAC = 12;
+export const PREVIEW_FRAME_RADIUS_WINDOWS = 8;
+export const PREVIEW_FRAME_RADIUS_DEFAULT = 12;
+
+/** Pull macOS major from Chromium `platformVersion` (e.g. "26.1.0" → 26). */
+export function macPlatformMajor(platformVersion?: string): number | null {
+  if (!platformVersion) return null;
+  const major = Number.parseInt(platformVersion.split(".")[0] ?? "", 10);
+  return Number.isFinite(major) ? major : null;
+}
+
+export function isMacUserAgent(userAgent: string): boolean {
+  return /Macintosh|Mac OS X/.test(userAgent);
+}
+
+/** Chromium desktop builds on macOS (Chrome, Brave, Edge, Opera). */
+export function isMacChromiumUserAgent(userAgent: string): boolean {
+  if (!isMacUserAgent(userAgent)) return false;
+  if (/Firefox\//.test(userAgent)) return false;
+  return /Chrome\/|Chromium\/|Edg\/|OPR\/|Brave\//.test(userAgent);
+}
+
+/**
+ * Guess preview ring bottom radius (px). `platformVersion` comes from
+ * `navigator.userAgentData.getHighEntropyValues(['platformVersion'])` when available.
+ */
+export function previewFrameRadiusFromUserAgent(
+  userAgent: string,
+  platformVersion?: string,
+): number {
+  if (/Windows/.test(userAgent)) return PREVIEW_FRAME_RADIUS_WINDOWS;
+  if (!isMacUserAgent(userAgent)) return PREVIEW_FRAME_RADIUS_DEFAULT;
+
+  const macMajor = macPlatformMajor(platformVersion);
+  if (isMacChromiumUserAgent(userAgent)) {
+    if (macMajor !== null && macMajor >= 26) return PREVIEW_FRAME_RADIUS_MAC_CHROMIUM_TAHOE;
+    if (macMajor !== null && macMajor >= 15) return PREVIEW_FRAME_RADIUS_MAC_CHROMIUM;
+    // UA-only: still assume modern Chromium on Mac (Brave/Chrome rarely expose OS in UA).
+    return PREVIEW_FRAME_RADIUS_MAC_CHROMIUM;
+  }
+
+  return PREVIEW_FRAME_RADIUS_MAC;
+}

package/src/preview-frame.tsx

@@ -1,38 +1,107 @@
 // packages/studio/src/preview-frame.tsx
-// Full-viewport ring and a top-right preview label while the site session is active.
+// Full-viewport violet frame while preview is on. No corner label.
+import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import {
+  DEVBAR_EASE_IN,
+  DEVBAR_EASE_OUT,
+  DEVBAR_FRAME_ENTER_MS,
+  DEVBAR_FRAME_EXIT_MS,
+  prefersReducedMotion,
+} from "./devbar-state";
+import { PREVIEW_FRAME_RADIUS_DEFAULT, previewFrameRadiusFromUserAgent } from "./preview-frame-radius";
+
 export const PREVIEW_FRAME_CLASS = "backmatter-preview-frame";
 
-/** Shared with the on-site dev bar while preview is active. */
-export const PREVIEW_CHROME_BORDER = "#d97706";
+type NavigatorWithUaData = Navigator & {
+  userAgentData?: {
+    getHighEntropyValues: (
+      hints: readonly string[],
+    ) => Promise<{ platformVersion?: string }>;
+  };
+};
 
-function EyeIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
-      <path
-        d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z"
-        stroke="currentColor"
-        strokeWidth="1.25"
-        strokeLinejoin="round"
-      />
-      <circle cx="8" cy="8" r="1.75" stroke="currentColor" strokeWidth="1.25" />
-    </svg>
-  );
+/** Chromium `platformVersion` when Client Hints are available (not in all TS `Navigator` libs). */
+function readNavigatorPlatformVersion(): Promise<string | undefined> {
+  if (typeof navigator === "undefined") return Promise.resolve(undefined);
+  const uad = (navigator as NavigatorWithUaData).userAgentData;
+  if (!uad?.getHighEntropyValues) return Promise.resolve(undefined);
+  return uad.getHighEntropyValues(["platformVersion"]).then((hints) => hints.platformVersion);
+}
+
+/** Bottom window corner radius when the host does not set `devBar.previewFrameRadius`. */
+export function guessPreviewFrameRadius(): number {
+  if (typeof navigator === "undefined") return PREVIEW_FRAME_RADIUS_DEFAULT;
+  return previewFrameRadiusFromUserAgent(navigator.userAgent);
 }
 
-export function PreviewFrame() {
+/** Host config, then `--bm-preview-frame-radius` on `<html>`, then platform guess. */
+export function resolvePreviewFrameRadius(override?: number): number {
+  if (override !== undefined && Number.isFinite(override) && override >= 0) return override;
+  if (typeof document !== "undefined") {
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("--bm-preview-frame-radius").trim();
+    if (raw) {
+      const parsed = Number.parseFloat(raw);
+      if (Number.isFinite(parsed) && parsed >= 0) return parsed;
+    }
+  }
+  return guessPreviewFrameRadius();
+}
+
+/** Violet used by the frame and the preview toolbar. */
+export const PREVIEW_CHROME_BORDER = "oklch(0.56 0.21 295)";
+
+export function PreviewFrame({
+  active,
+  radius,
+}: {
+  active: boolean;
+  /** Bottom window corner radius (px). Top stays square under the browser chrome. */
+  radius?: number;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const was = useRef<boolean | null>(null);
+  const [corner, setCorner] = useState(() => resolvePreviewFrameRadius(radius));
+
+  useLayoutEffect(() => {
+    if (radius !== undefined) {
+      setCorner(resolvePreviewFrameRadius(radius));
+      return;
+    }
+    const ua = navigator.userAgent;
+    setCorner(previewFrameRadiusFromUserAgent(ua));
+
+    void readNavigatorPlatformVersion().then((platformVersion) => {
+      if (platformVersion === undefined) return;
+      setCorner(previewFrameRadiusFromUserAgent(ua, platformVersion));
+    });
+  }, [radius]);
+
+  useLayoutEffect(() => {
+    const frame = ref.current;
+    const previous = was.current;
+    was.current = active;
+    if (!frame || previous === null || previous || !active || prefersReducedMotion()) return;
+    frame.animate(
+      [
+        { borderWidth: "3px" },
+        { borderWidth: "7px", offset: 0.5 },
+        { borderWidth: "3px" },
+      ],
+      { duration: 700, delay: 180, easing: DEVBAR_EASE_OUT },
+    );
+  }, [active]);
+
   return (
     <>
       <style>{FRAME_CSS}</style>
       <div
+        ref={ref}
         className={PREVIEW_FRAME_CLASS}
         data-backmatter-preview-frame=""
+        data-active={active ? "true" : "false"}
+        style={{ "--bm-preview-frame-radius": `${corner}px` } as CSSProperties}
         aria-hidden
-      >
-        <div className={`${PREVIEW_FRAME_CLASS}-badge`}>
-          <EyeIcon />
-          <span>Preview</span>
-        </div>
-      </div>
+      />
     </>
   );
 }
@@ -42,37 +111,27 @@ const FRAME_CSS = `
   position: fixed;
   inset: 0;
   z-index: 2147482999;
+  box-sizing: border-box;
   pointer-events: none;
-  box-shadow: inset 0 0 0 2px ${PREVIEW_CHROME_BORDER};
-  overflow: visible;
+  border: 3px solid ${PREVIEW_CHROME_BORDER};
+  border-radius: 0 0 var(--bm-preview-frame-radius, 12px) var(--bm-preview-frame-radius, 12px);
+  background: transparent;
+  clip-path: circle(0% at 100% 100%);
+  transition: clip-path ${DEVBAR_FRAME_EXIT_MS}ms ${DEVBAR_EASE_IN};
 }
-.${PREVIEW_FRAME_CLASS}-badge {
-  position: absolute;
-  top: env(safe-area-inset-top, 0px);
-  right: env(safe-area-inset-right, 0px);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: 2px solid ${PREVIEW_CHROME_BORDER};
-  border-top: 0;
-  border-radius: 0 0 14px 14px;
-  background: #fff7ed;
-  color: #9a3412;
-  font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  white-space: nowrap;
-  -webkit-font-smoothing: antialiased;
+.${PREVIEW_FRAME_CLASS}[data-active="true"] {
+  /* 150% is shorter than the viewport diagonal — the ring never reached the top. */
+  clip-path: circle(150vmax at 100% 100%);
+  transition: clip-path ${DEVBAR_FRAME_ENTER_MS}ms ${DEVBAR_EASE_OUT} 80ms;
 }
-@keyframes backmatter-preview-frame-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@media (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: reduce) {
   .${PREVIEW_FRAME_CLASS} {
-    animation: backmatter-preview-frame-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+    transition: none;
+    clip-path: none;
+    opacity: 0;
+  }
+  .${PREVIEW_FRAME_CLASS}[data-active="true"] {
+    opacity: 1;
   }
-}
-@media (prefers-reduced-motion: reduce) {
-  .${PREVIEW_FRAME_CLASS} { animation: none; }
 }
 `;

package/src/shell-resets.css

@@ -0,0 +1,155 @@
+/* packages/studio/src/shell-resets.css
+   Scoped element resets for studio chrome on host pages and in the dashboard.
+   The on-site dev bar lives in a shadow root and uses BAR_CSS in site-bar.tsx. */
+
+:is(
+    .backmatter-studio,
+    .backmatter-devbar-overlay,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  ),
+:is(
+    .backmatter-studio,
+    .backmatter-devbar-overlay,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  :is(*, *::before, *::after) {
+  box-sizing: border-box;
+}
+
+html:has(.backmatter-studio),
+html:has(.backmatter-studio) body {
+  margin: 0;
+  min-height: 100dvh;
+}
+
+html:has(.backmatter-studio) {
+  background: #f7f7f8;
+  color-scheme: light;
+}
+
+html[data-theme="dark"]:has(.backmatter-studio) {
+  background: #18181b;
+  color-scheme: dark;
+}
+
+html:has(.backmatter-studio) body {
+  -webkit-font-smoothing: antialiased;
+  font-family:
+    "Geist Sans",
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+:is(
+    .backmatter-studio,
+    .backmatter-devbar-overlay,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  :is(button, input, textarea, select) {
+  /* Don't use `font: inherit` — it overrides StyleX sizes in @layer. */
+  font-family: inherit;
+}
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  :is(button, [role="button"]) {
+  cursor: default;
+}
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  :is(button:disabled, button[aria-disabled="true"]) {
+  cursor: not-allowed;
+}
+
+[data-drag-handle] {
+  cursor: grab;
+}
+
+[data-drag-handle][data-dragging] {
+  cursor: grabbing;
+}
+
+@layer reset {
+  :is(
+      .backmatter-studio,
+      [data-backmatter-panel],
+      [data-base-ui-portal],
+      [data-selection-bar]
+    )
+    a {
+    color: inherit;
+  }
+}
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  a {
+  text-decoration: none;
+  cursor: default;
+}
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  a[href^="http"],
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  a[href^="//"],
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  a[target="_blank"] {
+  cursor: pointer;
+}
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  :focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 2px;
+}
+
+html[data-theme="dark"]:has(.backmatter-studio)
+  :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
+  :focus-visible {
+  outline-color: #fafafa;
+}
+
+[data-no-ring]:focus-visible {
+  outline: none;
+}