astro-dev-edit 0.11.0

package/src/client/css-inspect.ts

@@ -0,0 +1,345 @@
+/**
+ * The hover-pill CSS inspector's client core: read which CSS rules an element
+ * matches through a given class/ID, straight from the browser's CSSOM, and
+ * build the little rules card the pill shows on chip hover.
+ *
+ * All of this is client-only — `document.styleSheets` already knows the applied
+ * rules and their declarations. The one thing the CSSOM does NOT expose is a
+ * rule's source line, so the card's "open ↗" defers to the server
+ * (/inspect/open) to jump the editor there. See src/server/inspect-locate.ts.
+ */
+
+import { icon } from './icons.ts';
+import { FONT, Z, basename, isolateScroll, pillButton, styled } from './ui.ts';
+
+/** One applied rule, distilled for display. */
+export interface MatchedRule {
+  /** The comma-joined sub-selectors (of this rule) the element actually matched. */
+  selectorText: string;
+  /** The declaration block, one `prop: value;` per line. */
+  declarations: string;
+  /** Source file the rule came from (root-relative or absolute), or null when
+   *  it can't be resolved (inline <style>, cross-origin) — no open link then. */
+  sourceFile: string | null;
+}
+
+function escapeRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/** True when `sub` contains the class/id token as a whole selector token
+ *  (so `.foo` doesn't match `.foobar`). Works on Astro's scoped selectors too,
+ *  where the token still appears literally alongside `:where([data-astro-cid-…])`. */
+function referencesToken(sub: string, token: string, kind: 'class' | 'id'): boolean {
+  const prefix = kind === 'class' ? '\\.' : '#';
+  return new RegExp(prefix + escapeRegExp(token) + '(?![\\w-])').test(sub);
+}
+
+/** Split a selector list on top-level commas — commas inside `()` / `[]`
+ *  (e.g. `:is(.a, .b)`, attribute selectors) don't separate selectors. */
+function splitSelectorList(selectorText: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of selectorText) {
+    if (ch === '(' || ch === '[') depth++;
+    else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+    if (ch === ',' && depth === 0) {
+      out.push(cur);
+      cur = '';
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}
+
+/** Which sub-selectors a scan cares about: one token's (the chips card) or all
+ *  of them (the copy-context collector). Matching against `el` happens either
+ *  way — this only narrows what's worth testing. */
+type SelectorFilter = (sub: string) => boolean;
+
+/** Selectors made of nothing but `*` and combinators (`*`, `* > *`). They match
+ *  every element, so a whole-element scan would drag in every reset rule. */
+const UNIVERSAL_ONLY = /^[\s*>+~]*$/;
+
+/** The sub-selectors of `rule` that pass `accept` AND that `el` matches. */
+function matchingSubSelectors(rule: CSSStyleRule, el: Element, accept: SelectorFilter): string[] {
+  const matched: string[] = [];
+  for (const sub of splitSelectorList(rule.selectorText)) {
+    if (!accept(sub)) continue;
+    try {
+      if (el.matches(sub)) matched.push(sub.trim());
+    } catch {
+      // Invalid/unsupported sub-selector — skip it rather than fail the scan.
+    }
+  }
+  return matched;
+}
+
+/** Split a declaration block on top-level `;` — semicolons inside `()` (url,
+ *  var, data URIs) or quotes don't separate declarations. */
+function splitDeclarations(cssText: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let quote = '';
+  let cur = '';
+  for (const ch of cssText) {
+    if (quote) {
+      if (ch === quote) quote = '';
+      cur += ch;
+      continue;
+    }
+    if (ch === '"' || ch === "'") quote = ch;
+    else if (ch === '(') depth++;
+    else if (ch === ')') depth = Math.max(0, depth - 1);
+    if (ch === ';' && depth === 0) {
+      if (cur.trim()) out.push(cur.trim());
+      cur = '';
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+/** The rule's declarations as `prop: value;` lines, one per line. Uses cssText
+ *  (not item()/getPropertyValue) so shorthands driven by CSS variables — which
+ *  expand to empty longhands in the CSSOM — keep their authored value. */
+function formatDeclarations(rule: CSSStyleRule): string {
+  return splitDeclarations(rule.style.cssText)
+    .map((d) => `${d};`)
+    .join('\n');
+}
+
+/** Best-effort map a stylesheet to a source path the server can open. */
+function sheetSource(sheet: CSSStyleSheet): string | null {
+  // <link> / @import / Astro's `…/index.astro?astro&type=style` hrefs. The
+  // pathname is dev-server-root-relative; strip the leading slash so the server
+  // resolves it against the project root (an absolute "/src/…" would escape it).
+  if (sheet.href) {
+    try {
+      const u = new URL(sheet.href, location.href);
+      if (u.origin !== location.origin) return null; // external / CDN
+      return decodeURIComponent(u.pathname).replace(/^\/+/, '') || null;
+    } catch {
+      return null;
+    }
+  }
+  // Vite injects imported CSS as `<style data-vite-dev-id="/abs/path?…">`; that
+  // absolute path is passed through as-is (the server confines it to the root).
+  const viteId = (sheet.ownerNode as HTMLElement | null)?.dataset?.viteDevId;
+  if (viteId) return viteId.split('?')[0];
+  return null;
+}
+
+function walkRules(
+  rules: CSSRuleList,
+  el: Element,
+  accept: SelectorFilter,
+  source: string | null,
+  out: MatchedRule[],
+  seen: Set<string>,
+): void {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule) {
+      const matched = matchingSubSelectors(rule, el, accept);
+      if (matched.length === 0) continue;
+      const declarations = formatDeclarations(rule);
+      const key = `${matched.join(',')}|${declarations}|${source ?? ''}`;
+      if (seen.has(key)) continue; // dev often injects the same rule twice (HMR)
+      seen.add(key);
+      out.push({ selectorText: matched.join(', '), declarations, sourceFile: source });
+    } else if ('cssRules' in rule) {
+      // @media / @supports / @layer / @container — recurse into the group.
+      walkRules((rule as CSSGroupingRule).cssRules, el, accept, source, out, seen);
+    }
+  }
+}
+
+/** Scan every readable stylesheet for rules `el` matches through an accepted
+ *  sub-selector. Cross-origin sheets are skipped, not fatal. */
+function scan(el: Element, accept: SelectorFilter): MatchedRule[] {
+  const out: MatchedRule[] = [];
+  const seen = new Set<string>();
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue; // cross-origin stylesheet — CSSOM access throws; skip it
+    }
+    walkRules(rules, el, accept, sheetSource(sheet), out, seen);
+  }
+  return out;
+}
+
+/** Every rule `el` matches through `token`, across all readable stylesheets. */
+export function rulesForToken(el: Element, token: string, kind: 'class' | 'id'): MatchedRule[] {
+  return scan(el, (sub) => referencesToken(sub, token, kind));
+}
+
+/**
+ * Every rule `el` matches, whatever the selector — the chips card's scan
+ * widened from "through this one class/ID" to "at all", for the copy-context
+ * collector. Rules that apply only to an *ancestor* are not included: this is
+ * what the browser matched against this element.
+ */
+export function rulesForElement(el: Element): MatchedRule[] {
+  return scan(el, (sub) => !UNIVERSAL_ONLY.test(sub));
+}
+
+/**
+ * Narrow a matched-rule list to `max`, dropping the rules that say least about
+ * this element first.
+ *
+ * A selector naming one of the element's own classes or its id was written for
+ * something like this element. `a { color: inherit }` matches an anchor
+ * without naming it — a site-wide default, and a page's worth of those crowds
+ * out the one rule the reader is actually asking about.
+ *
+ * Survivors keep their original order. Ranking them would misreport the
+ * cascade, which among equal specificity is decided by document order, and a
+ * reader of the result has no way to know the list was resorted.
+ */
+export function narrowRules(el: Element, rules: MatchedRule[], max: number): MatchedRule[] {
+  if (rules.length <= max) return rules;
+  const tokens: { token: string; kind: 'class' | 'id' }[] = [
+    ...(el.id ? [{ token: el.id, kind: 'id' as const }] : []),
+    ...Array.from(el.classList).map((token) => ({ token, kind: 'class' as const })),
+  ];
+  const names = (rule: MatchedRule): boolean =>
+    splitSelectorList(rule.selectorText).some((sub) =>
+      tokens.some(({ token, kind }) => referencesToken(sub, token, kind)));
+
+  const specific = rules.filter(names);
+  if (specific.length >= max) return specific.slice(0, max);
+  const keep = new Set(specific);
+  for (const rule of rules) {
+    if (keep.size >= max) break;
+    keep.add(rule);
+  }
+  return rules.filter((r) => keep.has(r));
+}
+
+// --- Card DOM ----------------------------------------------------------------
+
+/** A small "open" button matching the pill's own, for a rule's source jump. */
+function openButton(onClick: () => void): HTMLButtonElement {
+  const btn = pillButton(
+    'atx-tooltip-rule-open',
+    'open',
+    'Open this rule in your editor',
+    { font: `600 10.5px ${FONT.ui}`, flex: '0 0 auto' },
+    icon('external', 12),
+  );
+  btn.addEventListener('click', onClick);
+  return btn;
+}
+
+/** The parts of a declaration the tokenizer can tell apart. What each one
+ *  looks like is `[data-css]` in styles.ts, beside the source-peek palette it
+ *  is deliberately the same as. */
+type CssTokenKind = 'prop' | 'value' | 'string' | 'number' | 'variable' | 'keyword' | 'punct';
+
+// One pass over a declaration's value: strings, hex colors, custom-property
+// refs, !important, numbers-with-units, identifiers, whitespace, punctuation.
+const VALUE_TOKEN =
+  /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(#[0-9a-fA-F]{3,8}\b)|(--[A-Za-z0-9-]+)|(!important\b)|(-?\d*\.?\d+[a-z%]*)|([A-Za-z][\w-]*)|(\s+)|([^\s])/g;
+
+/** One syntax-tinted run of a declaration. The kind is the attribute, not a
+ *  colour: the seven kinds are a fixed vocabulary, so the palette belongs in
+ *  the stylesheet beside every other one. */
+function span(text: string, kind: CssTokenKind): HTMLElement {
+  const s = styled('span', 'atx-css-token');
+  s.dataset.css = kind;
+  s.textContent = text;
+  return s;
+}
+
+/** Append syntax-colored spans for one `prop: value;` line onto `pre`. Anything
+ *  unrecognized stays a plain value span — a wrong guess is never wrong code. */
+function appendDeclLine(pre: HTMLElement, line: string): void {
+  const colon = line.indexOf(':');
+  if (colon === -1) {
+    pre.append(span(line, 'value'));
+    return;
+  }
+  const prop = line.slice(0, colon);
+  pre.append(span(prop, /^\s*--/.test(prop) ? 'variable' : 'prop'));
+  pre.append(span(':', 'punct'));
+  for (const m of line.slice(colon + 1).matchAll(VALUE_TOKEN)) {
+    const [text, str, hex, variable, imp, num, ident, ws] = m;
+    const kind: CssTokenKind = str
+      ? 'string'
+      : hex || num
+        ? 'number'
+        : variable
+          ? 'variable'
+          : imp
+            ? 'keyword'
+            : ident || ws
+              ? 'value'
+              : 'punct';
+    pre.append(span(text, kind));
+  }
+}
+
+/** Fill the declarations `<pre>` with syntax-highlighted lines. */
+function renderDeclarations(pre: HTMLElement, declarations: string): void {
+  declarations.split('\n').forEach((line, i) => {
+    if (i > 0) pre.append(document.createTextNode('\n'));
+    appendDeclLine(pre, line);
+  });
+}
+
+function ruleBlock(
+  rule: MatchedRule,
+  selector: string,
+  openRule: (file: string, selector: string) => void,
+): HTMLElement {
+  const block = styled('div', 'atx-tooltip-rule');
+
+  const sel = styled('div', 'atx-tooltip-rule-sel');
+  sel.textContent = rule.selectorText;
+
+  const decl = styled('pre', 'atx-tooltip-rule-decl');
+  renderDeclarations(decl, rule.declarations);
+  block.append(sel, decl);
+
+  if (rule.sourceFile) {
+    const foot = styled('div', 'atx-tooltip-rule-foot');
+    const src = styled('span', 'atx-tooltip-rule-src');
+    src.textContent = basename(rule.sourceFile);
+    src.title = rule.sourceFile;
+    foot.append(src, openButton(() => openRule(rule.sourceFile!, selector)));
+    block.append(foot);
+  }
+  return block;
+}
+
+/**
+ * Build the (detached, fixed-position) rules card for one class/ID chip. The
+ * caller appends it to the body and positions it; `selector` is the fragment
+ * (".hero-title" / "#masthead") passed to the open jump.
+ */
+export function buildRulesCard(
+  selector: string,
+  rules: MatchedRule[],
+  openRule: (file: string, selector: string) => void,
+): HTMLElement {
+  // The card's own position is written by the caller once it is measured.
+  const card = styled('div', 'atx-tooltip-rules', { zIndex: String(Z + 1) });
+  isolateScroll(card);
+
+  if (rules.length === 0) {
+    const empty = styled('div', 'atx-tooltip-rules-empty');
+    empty.textContent = `No applied rules for ${selector}`;
+    card.append(empty);
+    return card;
+  }
+  for (const rule of rules) card.append(ruleBlock(rule, selector, openRule));
+  return card;
+}

package/src/client/editors/asset-picker.ts

@@ -0,0 +1,155 @@
+import { entryAssetDir, entryRelativeToWeb, webToEntryRelative } from '../../shared/asset-path.ts';
+import { inputEl, setFreshSrc, styled, toast } from '../ui.ts';
+import { openMediaModal } from './media-modal.ts';
+
+/**
+ * `buildImageField` — the entry panel's image form control: a preview, a path
+ * input, and a Browse button that opens the shared media modal.
+ *
+ * Browsing, uploading and searching all live in `media-modal.ts` now; what
+ * stays here is what is specific to a *field*. Chiefly the path conversion:
+ *
+ * Two path universes meet in this file. By default a value is a **web-servable
+ * path** (`/images/hero.png`) — the shape a plain `<img src>` needs. With
+ * `assetRef: 'relative'` the field instead stores a path relative to its entry
+ * file, because it is backed by Astro's `image()` helper (see
+ * shared/asset-path.ts). The modal deals only in web paths, so this control is
+ * the single place that converts between the two — and the two candidate sets
+ * are disjoint, so a field can never be handed a path of the wrong shape.
+ */
+
+/**
+ * Where a value handed to `onChange` came from.
+ *
+ * A `picked` value describes a **file** — it comes out of the media picker, so
+ * it carries that filename's own characters, a space among them. A `stored`
+ * value is the field's initial value or one typed into the path input: already
+ * in whatever form it is meant to be written in.
+ *
+ * A caller that has to turn the value into a URL can only tell the two apart if
+ * the field says which it was — `webPathToUrl` is deliberately not idempotent,
+ * so encoding a value that was already encoded turns `%20` into `%2520`.
+ */
+export type ImageValueOrigin = 'picked' | 'stored';
+
+export interface ImageFieldOptions {
+  /** The field's current stored value (a web path, or entry-relative). */
+  initial: string;
+  /** Called with the new stored value on every change. */
+  onChange: (value: string, origin: ImageValueOrigin) => void;
+  /**
+   * Set for a field backed by Astro's `image()` helper: values are paths
+   * relative to `entryFile`, so previews resolve through it and picks are
+   * converted back into that shape.
+   */
+  assetRef?: 'relative';
+  /** Repo-relative path of the entry being edited. Required for relative mode. */
+  entryFile?: string;
+}
+
+/**
+ * Compact image-field control for the entry panel: current-value preview, path
+ * input, and a Browse button that opens the media modal. In relative mode this
+ * control is the *only* place that converts between the stored entry-relative
+ * value and the web path the browser and the modal speak.
+ */
+export function buildImageField(opts: ImageFieldOptions): HTMLElement {
+  const { initial, onChange } = opts;
+  const entryFile = opts.entryFile ?? '';
+  const relative = opts.assetRef === 'relative' && entryFile !== '';
+  let value = initial;
+
+  /** The stored value as something an <img> can load. */
+  const previewSrc = (raw: string): string =>
+    relative ? (entryRelativeToWeb(entryFile, raw) ?? '') : raw;
+
+  const wrap = styled('div', 'atx-image-field');
+
+  // Preview above the path input; clicking it opens the browse list too.
+  const thumbWrap = styled('button', 'atx-image-field-preview');
+  thumbWrap.type = 'button';
+  thumbWrap.title = 'Browse images';
+  const thumb = styled('img', 'atx-image-field-thumb');
+  thumb.toggleAttribute('data-hidden', true);
+  thumb.alt = '';
+  const thumbEmpty = styled('span', 'atx-image-field-empty');
+  thumbEmpty.textContent = 'No image — click to browse';
+  /** The preview shows exactly one of the two: the image, or the placeholder. */
+  const showThumb = (on: boolean): void => {
+    thumb.toggleAttribute('data-hidden', !on);
+    thumbEmpty.toggleAttribute('data-hidden', on);
+  };
+  // A path that fails to load falls back to the placeholder, never a broken icon.
+  thumb.addEventListener('error', () => showThumb(false));
+  thumb.addEventListener('load', () => showThumb(true));
+  thumbWrap.append(thumb, thumbEmpty);
+  wrap.append(thumbWrap);
+
+  const row = styled('div', 'atx-image-field-row');
+  const pathInput = inputEl('input', 'atx-image-field-path');
+  const browse = styled('button', 'atx-btn atx-btn-outline atx-image-field-browse');
+  browse.type = 'button';
+  browse.textContent = 'Browse…';
+  row.append(pathInput, browse);
+  wrap.append(row);
+
+  // A relative value is meaningless without knowing what it is relative to.
+  if (relative) {
+    const hint = styled('div', 'atx-image-field-hint');
+    hint.textContent = `relative to ${entryFile}`;
+    wrap.append(hint);
+  }
+
+  const showImage = (src: string, fresh = false): void => {
+    if (src) {
+      // A just-written file may still be inside Vite's brief 404 window, so it
+      // gets the retrying loader; the *stored* value stays the clean path.
+      if (fresh) setFreshSrc(thumb, src);
+      else thumb.src = src;
+    } else {
+      thumb.removeAttribute('src');
+      showThumb(false);
+    }
+  };
+  const set = (next: string, origin: ImageValueOrigin, fresh = false): void => {
+    value = next;
+    pathInput.value = next;
+    showImage(previewSrc(next), fresh);
+    onChange(next, origin);
+  };
+
+  /**
+   * Browsing opens the shared media modal rather than an inline list. This is
+   * the one place that converts a picked web path back into the stored
+   * entry-relative value — the modal deals only in web paths.
+   */
+  const browseImages = async (): Promise<void> => {
+    const dir = relative ? entryAssetDir(entryFile, value) : undefined;
+    const pick = await openMediaModal({
+      title: 'Choose an image',
+      ...(relative ? { assetRef: 'relative' as const } : {}),
+      ...(previewSrc(value) ? { currentWebPath: previewSrc(value) } : {}),
+      ...(dir ? { scopeDir: dir, targetDir: dir } : {}),
+    });
+    if (!pick) return; // cancelled — nothing staged, nothing written
+    const next = relative ? webToEntryRelative(entryFile, pick.webPath) : pick.webPath;
+    if (!next) {
+      toast('That image cannot back an image() field — it must live under src/.', 'err');
+      return;
+    }
+    set(next, 'picked', pick.origin !== 'existing');
+  };
+
+  set(initial, 'stored');
+
+  pathInput.addEventListener('input', () => {
+    value = pathInput.value;
+    showImage(previewSrc(value));
+    onChange(value, 'stored');
+  });
+
+  browse.addEventListener('click', () => void browseImages());
+  thumbWrap.addEventListener('click', () => void browseImages());
+
+  return wrap;
+}