import { THEME_COLOR_ROLES, getThemeColorVariable, type ThemeColorRole } from "../../themePalette"; export type ThemePaintKind = "background" | "border" | "foreground"; export type ThemePaintSnapshot = Readonly<Record<ThemePaintKind, string>>;export type ThemeElementInspection = Readonly<{  element: Element;  role: ThemeColorRole;}>; const THEME_PAINT_KIND_ORDER: ReadonlyArray<ThemePaintKind> = [  "background",  "border",  "foreground",]; const THEME_INSPECTOR_MATCH_ATTRIBUTE = "data-theme-inspector-match"; const THEME_TOKEN_PROBE_ATTRIBUTE = "data-theme-token-probe";const THEME_TOKEN_PROBE_COLOR = "#01fea7";const THEME_TOKEN_ALTERNATE_PROBE_COLOR = "#fe01a7";const THEME_SPOTLIGHT_ID = "theme-inspector-spotlight";const THEME_SPOTLIGHT_MASK_ID = "theme-inspector-spotlight-mask";const THEME_SPOTLIGHT_GLOW_ID = "theme-inspector-spotlight-glow";const THEME_HOVER_ID = "theme-inspector-hover";const SVG_NAMESPACE = "http://www.w3.org/2000/svg"; const THEME_UTILITY_ROLES: Readonly<Partial<Record<string, ThemeColorRole>>> = {  background: "canvas",  foreground: "text",  card: "surface",  "card-foreground": "text",  popover: "surfaceOverlay",  "popover-foreground": "text",  "surface-raised": "surfaceRaised",  primary: "messageAction",  "primary-foreground": "messageActionForeground",  secondary: "secondary",  "secondary-foreground": "secondaryForeground",  muted: "muted",  "muted-foreground": "mutedForeground",  placeholder: "placeholder",  "secondary-label": "secondaryLabel",  "icon-muted": "iconMuted",  accent: "accentSurface",  "accent-foreground": "accentSurfaceForeground",  destructive: "error",  "destructive-foreground": "errorForeground",  error: "error",  "error-foreground": "errorForeground",  "error-surface": "errorSurface",  warning: "warning",  "warning-foreground": "warningForeground",  "warning-surface": "warningSurface",  update: "update",  "update-foreground": "updateForeground",  "update-surface": "updateSurface",  message: "messageSurface",  "message-foreground": "messageForeground",  "message-action": "messageAction",  "message-action-foreground": "messageActionForeground",  "message-action-hover": "messageActionHover",  sidebar: "sidebar",  "sidebar-foreground": "sidebarForeground",  "sidebar-muted-foreground": "sidebarMutedForeground",  "sidebar-control-surface": "sidebarControlSurface",  "sidebar-row-hover": "sidebarRowHover",  "sidebar-row-active": "sidebarRowActive",  "sidebar-row-selected": "sidebarRowSelected",  "sidebar-border": "sidebarBorder",  border: "border",  input: "input",  ring: "focus",}; const THEME_UTILITY_PREFIXES: Readonly<Record<ThemePaintKind, ReadonlyArray<string>>> = {  background: ["bg-"],  border: ["border-", "outline-", "ring-"],  foreground: ["text-", "caret-", "fill-", "stroke-"],}; function clearThemeInspectorAttribute(attribute: string): void {  document    .querySelectorAll(`[${attribute}]`)    .forEach((element) => element.removeAttribute(attribute));} export function clearThemeInspectorHighlights(): void {  clearThemeInspectorAttribute(THEME_INSPECTOR_MATCH_ATTRIBUTE);  document.getElementById(THEME_SPOTLIGHT_ID)?.remove();} export function clearThemeInspectorHover(): void {  document.getElementById(THEME_HOVER_ID)?.remove();} function svgElement<Name extends keyof SVGElementTagNameMap>(  name: Name,): SVGElementTagNameMap[Name] {  return document.createElementNS(SVG_NAMESPACE, name);} function spotlightRect(element: Element): {  x: number;  y: number;  width: number;  height: number;  radius: number;} | null {  const bounds = element.getBoundingClientRect();  if (    bounds.width <= 0 ||    bounds.height <= 0 ||    bounds.right < 0 ||    bounds.bottom < 0 ||    bounds.left > window.innerWidth ||    bounds.top > window.innerHeight  ) {    return null;  }   const padding = 5;  // Keep the true bounds when an element is partially offscreen. Clamping its  // rectangle to the viewport would draw a fake glow edge along the crop.  const x = bounds.left - padding;  const y = bounds.top - padding;  const elementRadius =    Number.parseFloat(window.getComputedStyle(element).borderTopLeftRadius) || 0;  return {    x,    y,    width: bounds.width + padding * 2,    height: bounds.height + padding * 2,    radius: Math.min(18, Math.max(7, elementRadius + padding)),  };} export function showThemeInspectorHover(inspection: ThemeElementInspection, label: string): void {  const rectangle = spotlightRect(inspection.element);  if (!rectangle) {    clearThemeInspectorHover();    return;  }   let hover = document.getElementById(THEME_HOVER_ID);  if (!hover) {    hover = document.createElement("div");    hover.id = THEME_HOVER_ID;    hover.setAttribute("aria-hidden", "true");    const tokenLabel = document.createElement("span");    tokenLabel.dataset.themeInspectorHoverLabel = "";    hover.append(tokenLabel);    document.body.append(hover);  }   hover.style.left = `${rectangle.x}px`;  hover.style.top = `${rectangle.y}px`;  hover.style.width = `${rectangle.width}px`;  hover.style.height = `${rectangle.height}px`;  hover.style.borderRadius = `${rectangle.radius}px`;  hover.dataset.placement = rectangle.y < 32 ? "below" : "above";  const tokenLabel = hover.querySelector<HTMLElement>("[data-theme-inspector-hover-label]");  if (tokenLabel) tokenLabel.textContent = label;} function renderThemeInspectorSpotlight(elements: ReadonlyArray<Element>): void {  const rectangles = new Map<string, NonNullable<ReturnType<typeof spotlightRect>>>();  for (const element of elements) {    const rectangle = spotlightRect(element);    if (!rectangle) continue;    const key = [rectangle.x, rectangle.y, rectangle.width, rectangle.height]      .map((value) => Math.round(value))      .join(":");    rectangles.set(key, rectangle);  }   if (rectangles.size === 0) {    document.getElementById(THEME_SPOTLIGHT_ID)?.remove();    return;  }   let spotlight = document.getElementById(THEME_SPOTLIGHT_ID) as SVGSVGElement | null;  if (!spotlight) {    spotlight = svgElement("svg");    spotlight.id = THEME_SPOTLIGHT_ID;    spotlight.setAttribute("aria-hidden", "true");    spotlight.setAttribute("focusable", "false");    document.body.append(spotlight);  }  spotlight.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);   const definitions = svgElement("defs");  const mask = svgElement("mask");  mask.id = THEME_SPOTLIGHT_MASK_ID;  mask.setAttribute("maskUnits", "userSpaceOnUse");  const maskSurface = svgElement("rect");  maskSurface.setAttribute("width", String(window.innerWidth));  maskSurface.setAttribute("height", String(window.innerHeight));  maskSurface.setAttribute("fill", "white");  mask.append(maskSurface);   const glowFilter = svgElement("filter");  glowFilter.id = THEME_SPOTLIGHT_GLOW_ID;  glowFilter.setAttribute("x", "-50%");  glowFilter.setAttribute("y", "-50%");  glowFilter.setAttribute("width", "200%");  glowFilter.setAttribute("height", "200%");  const blur = svgElement("feGaussianBlur");  blur.setAttribute("stdDeviation", "5");  blur.setAttribute("result", "blur");  const merge = svgElement("feMerge");  const blurredGlow = svgElement("feMergeNode");  blurredGlow.setAttribute("in", "blur");  const crispGlow = svgElement("feMergeNode");  crispGlow.setAttribute("in", "SourceGraphic");  merge.append(blurredGlow, crispGlow);  glowFilter.append(blur, merge);  definitions.append(mask, glowFilter);   const glowGroup = svgElement("g");  for (const rectangle of rectangles.values()) {    const hole = svgElement("rect");    hole.setAttribute("x", String(rectangle.x));    hole.setAttribute("y", String(rectangle.y));    hole.setAttribute("width", String(rectangle.width));    hole.setAttribute("height", String(rectangle.height));    hole.setAttribute("rx", String(rectangle.radius));    hole.setAttribute("fill", "black");    mask.append(hole);     const glow = hole.cloneNode(false) as SVGRectElement;    glow.removeAttribute("fill");    glow.setAttribute("class", "theme-inspector-spotlight-glow");    glow.setAttribute("filter", `url(#${THEME_SPOTLIGHT_GLOW_ID})`);    glowGroup.append(glow);  }   const dimmer = svgElement("rect");  dimmer.setAttribute("class", "theme-inspector-spotlight-dimmer");  dimmer.setAttribute("width", String(window.innerWidth));  dimmer.setAttribute("height", String(window.innerHeight));  dimmer.setAttribute("mask", `url(#${THEME_SPOTLIGHT_MASK_ID})`);  spotlight.replaceChildren(definitions, dimmer, glowGroup);} export function refreshThemeInspectorSpotlight(): void {  renderThemeInspectorSpotlight([    ...document.querySelectorAll(`[${THEME_INSPECTOR_MATCH_ATTRIBUTE}]`),  ]);} function elementHasVisibleText(element: Element): boolean {  if (element.matches("input, textarea, select, option")) return true;  return Array.from(element.childNodes).some(    (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()),  );} function getThemePaintSnapshot(  element: Element,  { forHitTest = false }: { forHitTest?: boolean } = {},): ThemePaintSnapshot | null {  const style = window.getComputedStyle(element);  if (style.display === "none" || style.visibility === "hidden" || Number(style.opacity) === 0) {    return null;  }   const borderPaints: Array<string> = [];  for (const [color, borderStyle, width] of [    [style.borderTopColor, style.borderTopStyle, style.borderTopWidth],    [style.borderRightColor, style.borderRightStyle, style.borderRightWidth],    [style.borderBottomColor, style.borderBottomStyle, style.borderBottomWidth],    [style.borderLeftColor, style.borderLeftStyle, style.borderLeftWidth],  ] as const) {    if (borderStyle !== "none" && Number.parseFloat(width) > 0) borderPaints.push(color);  }  if (style.outlineStyle !== "none" && Number.parseFloat(style.outlineWidth) > 0) {    borderPaints.push(style.outlineColor);  }  if (style.borderImageSource !== "none") borderPaints.push(style.borderImageSource);  if (style.boxShadow !== "none") borderPaints.push(style.boxShadow);   const foregroundPaints: Array<string> = [];  if (forHitTest || elementHasVisibleText(element)) foregroundPaints.push(style.color);  if (element instanceof SVGElement) foregroundPaints.push(style.fill, style.stroke);  if (element.matches("input, textarea")) foregroundPaints.push(style.caretColor);  if (style.textDecorationLine !== "none") foregroundPaints.push(style.textDecorationColor);  if (style.textShadow !== "none") foregroundPaints.push(style.textShadow);   return {    background: [style.backgroundColor, style.backgroundImage].join("\n"),    border: borderPaints.join("\n"),    foreground: foregroundPaints.join("\n"),  };} export function changedThemePaintKinds(  before: ThemePaintSnapshot,  after: ThemePaintSnapshot,): ReadonlyArray<ThemePaintKind> {  return THEME_PAINT_KIND_ORDER.filter((kind) => before[kind] !== after[kind]);} function withThemeTokenProbeSession<Result>(run: () => Result): Result {  const root = document.documentElement;  const wasAlreadyProbing = root.hasAttribute(THEME_TOKEN_PROBE_ATTRIBUTE);  if (!wasAlreadyProbing) root.setAttribute(THEME_TOKEN_PROBE_ATTRIBUTE, "");  try {    return run();  } finally {    // Flush every restored token while transitions are still suppressed. The    // browser never gets a paint opportunity between the probe and restore.    void window.getComputedStyle(root).color;    if (!wasAlreadyProbing) root.removeAttribute(THEME_TOKEN_PROBE_ATTRIBUTE);  }} function applyThemeTokenProbe(role: ThemeColorRole): () => void {  const root = document.documentElement;  const variable = getThemeColorVariable(role);  const originalValue = root.style.getPropertyValue(variable);  const originalPriority = root.style.getPropertyPriority(variable);  const resolvedValue = originalValue.trim().toLowerCase();  const probeColor =    resolvedValue === THEME_TOKEN_PROBE_COLOR      ? THEME_TOKEN_ALTERNATE_PROBE_COLOR      : THEME_TOKEN_PROBE_COLOR;  root.style.setProperty(variable, probeColor, "important");   return () => {    if (originalValue) {      root.style.setProperty(variable, originalValue, originalPriority);    } else {      root.style.removeProperty(variable);    }  };} function applyThemeTokenProbes(roles: ReadonlyArray<ThemeColorRole>): () => void {  const restores = roles.map(applyThemeTokenProbe);  return () => {    for (const restore of restores.toReversed()) restore();  };} function themeInspectorCandidates(): ReadonlyArray<Element> {  return [document.body, ...document.body.querySelectorAll("*")].filter(    (element) =>      !element.closest("[data-theme-editor-panel]") &&      !element.closest(`#${THEME_SPOTLIGHT_ID}, #${THEME_HOVER_ID}`),  );} export function themeRoleFromUtilityClass(  className: string,  kind: ThemePaintKind,): ThemeColorRole | null {  // Stateful variants such as hover: and disabled: may not be contributing to  // the current paint. The computed-style probe below handles those exactly.  if (className.includes(":")) return null;  for (const prefix of THEME_UTILITY_PREFIXES[kind]) {    if (!className.startsWith(prefix)) continue;    const colorName = className.slice(prefix.length).split("/", 1)[0] ?? "";    return THEME_UTILITY_ROLES[colorName] ?? null;  }  return null;} function themeRoleFromUtilities(element: Element): ThemeColorRole | null {  for (const kind of THEME_PAINT_KIND_ORDER) {    for (const className of element.classList) {      const role = themeRoleFromUtilityClass(className, kind);      if (role) return role;    }  }  return null;} function themeInspectionCandidates(initialElement: Element): ReadonlyArray<Element> {  const candidates: Array<Element> = [];  let element: Element | null = initialElement;  while (element && element !== document.documentElement) {    if (!element.closest("[data-theme-editor-panel]")) candidates.push(element);    element = element.parentElement;  }  return candidates;} export function inspectThemeRoleFromUtilitiesAtElement(  initialElement: Element,): ThemeElementInspection | null {  if (initialElement.closest("[data-theme-editor-panel]")) return null;  for (const candidate of themeInspectionCandidates(initialElement)) {    const role = themeRoleFromUtilities(candidate);    if (role) return { element: candidate, role };  }  return null;} /** * Finds actual dependency on a theme token instead of comparing final colors. * A token is synchronously replaced with a sentinel, computed paint is read, * and the original value is restored before the browser can render a frame. */export function highlightThemeRoleUsage(roles: ReadonlyArray<ThemeColorRole>): number {  const startedAt = performance.now();  clearThemeInspectorAttribute(THEME_INSPECTOR_MATCH_ATTRIBUTE);  const candidates = themeInspectorCandidates();  const probeStartedAt = performance.now();  const matches = withThemeTokenProbeSession(() => {    const baseline = new Map<Element, ThemePaintSnapshot>();    for (const element of candidates) {      const snapshot = getThemePaintSnapshot(element);      if (snapshot) baseline.set(element, snapshot);    }     const restore = applyThemeTokenProbes(roles);    const changed = new Set<Element>();    try {      for (const [element, before] of baseline) {        const after = getThemePaintSnapshot(element);        if (after && changedThemePaintKinds(before, after).length > 0) changed.add(element);      }    } finally {      restore();    }    return changed;  });  const probeDuration = performance.now() - probeStartedAt;   const highlightedElements = new Set<Element>();  for (const element of matches) {    highlightedElements.add(      element instanceof SVGElement ? (element.closest("svg") ?? element) : element,    );  }  for (const element of highlightedElements) {    element.setAttribute(THEME_INSPECTOR_MATCH_ATTRIBUTE, "");  }  renderThemeInspectorSpotlight([...highlightedElements]);  if (import.meta.env.DEV) {    const spotlight = document.getElementById(THEME_SPOTLIGHT_ID);    if (spotlight) {      spotlight.dataset.themeInspectorCandidates = String(candidates.length);      spotlight.dataset.themeInspectorProbeMs = probeDuration.toFixed(2);      spotlight.dataset.themeInspectorTotalMs = (performance.now() - startedAt).toFixed(2);    }  }  return highlightedElements.size;} /** Resolves the nearest painted token at a touched element. */export function inspectThemeRoleAtElement(initialElement: Element): ThemeElementInspection | null {  if (initialElement.closest("[data-theme-editor-panel]")) return null;   const candidates = themeInspectionCandidates(initialElement);   // Most app paint comes from Tailwind's semantic color utilities. Those class  // names express the token dependency directly and avoid dozens of forced  // style recalculations on every pointer-down. Custom CSS still falls through  // to the exact computed-style probe.  const utilityInspection = inspectThemeRoleFromUtilitiesAtElement(initialElement);  if (utilityInspection) return utilityInspection;   const rolesByElement = withThemeTokenProbeSession(() => {    const baseline = new Map<Element, ThemePaintSnapshot>();    const roles = new Map<Element, Partial<Record<ThemePaintKind, ThemeColorRole>>>();    for (const candidate of candidates) {      const snapshot = getThemePaintSnapshot(candidate, { forHitTest: true });      if (snapshot) baseline.set(candidate, snapshot);    }     for (const role of THEME_COLOR_ROLES) {      const restore = applyThemeTokenProbe(role);      try {        for (const [candidate, before] of baseline) {          const after = getThemePaintSnapshot(candidate, { forHitTest: true });          if (!after) continue;          const candidateRoles = roles.get(candidate) ?? {};          for (const kind of changedThemePaintKinds(before, after)) {            candidateRoles[kind] ??= role;          }          roles.set(candidate, candidateRoles);        }      } finally {        restore();      }    }    return roles;  });   for (const candidate of candidates) {    const roles = rolesByElement.get(candidate);    if (!roles) continue;    for (const kind of THEME_PAINT_KIND_ORDER) {      const role = roles[kind];      if (role) return { element: candidate, role };    }  }  return null;

Lines 1–500 of 501. Load more