@divlet/web 0.0.0-stage → 0.0.1

package/dist/lib/css.js

@@ -0,0 +1,238 @@
+// Custom CSS for people: a formatter (one declaration per line, nested blocks indented) and a
+// highlighter. Both are small hand-written scanners — the server still validates with postcss.
+
+/* ---- scanning helpers ----------------------------------------------------------- */
+
+/** End index of a string literal or comment starting at i (exclusive), or -1 if i starts neither. */
+function skipQuoted(text, i) {
+  const ch = text[i];
+  if (ch === '"' || ch === "'") {
+    for (let j = i + 1; j < text.length; j++) {
+      if (text[j] === '\\') j++;
+      else if (text[j] === ch) return j + 1;
+    }
+    return text.length;
+  }
+  if (ch === '/' && text[i + 1] === '*') {
+    const end = text.indexOf('*/', i + 2);
+    return end < 0 ? text.length : end + 2;
+  }
+  return -1;
+}
+
+/* ---- formatter ------------------------------------------------------------------- */
+
+/** Parse into [{ comment }, { prelude, children }, { text }] — braces and semicolons at depth 0 only. */
+function parse(text, start, stop) {
+  const nodes = [];
+  let i = start;
+  while (i < text.length) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    if (i >= text.length) break;
+    if (text[i] === '}') { if (stop) return { nodes, end: i + 1 }; throw new Error('Unbalanced }'); }
+    if (text[i] === '/' && text[i + 1] === '*') { const end = skipQuoted(text, i); nodes.push({ comment: text.slice(i, end) }); i = end; continue; }
+    let depth = 0;
+    let j = i;
+    let found = '';
+    for (; j < text.length; j++) {
+      const quoted = skipQuoted(text, j);
+      if (quoted > 0) { j = quoted - 1; continue; }
+      const ch = text[j];
+      if (ch === '(' || ch === '[') depth++;
+      else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+      else if (!depth && (ch === '{' || ch === ';' || ch === '}')) { found = ch; break; }
+    }
+    const head = text.slice(i, j).trim();
+    if (found === '{') {
+      const inner = parse(text, j + 1, true);
+      nodes.push({ prelude: head, children: inner.nodes });
+      i = inner.end;
+    } else {
+      if (head) nodes.push({ text: head });
+      i = found === ';' ? j + 1 : j;
+      if (found === '' ) break;
+    }
+  }
+  if (stop) throw new Error('Unbalanced {');
+  return { nodes, end: i };
+}
+
+/** Collapse whitespace and add the spaces people expect, leaving strings and url() alone. */
+function tidyValue(value) {
+  const parts = [];
+  let i = 0;
+  let plain = '';
+  const flush = () => { if (plain) { parts.push(plain.replace(/\s+/g, ' ').replace(/\s*,\s*/g, ', ').replace(/\s*!\s*important/gi, ' !important')); plain = ''; } };
+  while (i < value.length) {
+    const quoted = skipQuoted(value, i);
+    if (quoted > 0) { flush(); parts.push(value.slice(i, quoted)); i = quoted; continue; }
+    const url = /^url\(/i.exec(value.slice(i, i + 4)) ? value.indexOf(')', i) : -1;
+    if (url > 0) { flush(); parts.push(value.slice(i, url + 1)); i = url + 1; continue; }
+    plain += value[i++];
+  }
+  flush();
+  return parts.join('').trim();
+}
+
+function tidyPrelude(prelude) {
+  const at = /^@([\w-]+)\s*([\s\S]*)$/.exec(prelude);
+  if (at) {
+    const params = tidyValue(at[2]).replace(/\s*:\s*/g, ': ').replace(/\(\s+/g, '(').replace(/\s+\)/g, ')');
+    return `@${at[1]}${params ? ` ${params}` : ''}`;
+  }
+  return prelude;
+}
+
+function printNodes(nodes, depth, out) {
+  const pad = '  '.repeat(depth);
+  nodes.forEach((node, index) => {
+    if (node.comment !== undefined) { out.push(...node.comment.split('\n').map((line, n) => (n ? line : pad + line.trimStart()))); return; }
+    if (node.text !== undefined) {
+      const colon = node.text.indexOf(':');
+      const declaration = colon > 0 && !node.text.startsWith('@');
+      out.push(`${pad}${declaration ? `${node.text.slice(0, colon).trim()}: ${tidyValue(node.text.slice(colon + 1))}` : tidyPrelude(node.text)};`);
+      return;
+    }
+    if (index > 0 && depth === 0) out.push('');
+    // A selector list breaks after each top-level comma.
+    const selector = /^@/.test(node.prelude) ? tidyPrelude(node.prelude) : splitSelectors(node.prelude).join(`,\n${pad}`);
+    if (!node.children.length) { out.push(`${pad}${selector} {}`); return; }
+    out.push(`${pad}${selector} {`);
+    printNodes(node.children, depth + 1, out);
+    out.push(`${pad}}`);
+  });
+}
+
+function splitSelectors(prelude) {
+  const parts = [];
+  let depth = 0;
+  let from = 0;
+  for (let i = 0; i < prelude.length; i++) {
+    const quoted = skipQuoted(prelude, i);
+    if (quoted > 0) { i = quoted - 1; continue; }
+    const ch = prelude[i];
+    if (ch === '(' || ch === '[') depth++;
+    else if (ch === ')' || ch === ']') depth--;
+    else if (ch === ',' && !depth) { parts.push(prelude.slice(from, i)); from = i + 1; }
+  }
+  parts.push(prelude.slice(from));
+  return parts.map(part => part.replace(/\s+/g, ' ').trim()).filter(Boolean);
+}
+
+/** Pretty-printed CSS, or the input unchanged if it cannot be parsed (the server will say why). */
+export function formatCss(text) {
+  if (!text || !text.trim()) return text || '';
+  try {
+    const out = [];
+    printNodes(parse(text, 0, false).nodes, 0, out);
+    return `${out.join('\n')}\n`;
+  } catch { return text; }
+}
+
+/* ---- highlighter ----------------------------------------------------------------- */
+
+const esc = value => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const span = (kind, value) => (value ? `<span class="syn-${kind}">${esc(value)}</span>` : '');
+// Blocks whose contents are declarations rather than nested rules.
+const DECLARATION_AT = /^@(font-face|page|property|counter-style|starting-style|view-transition|position-try)\b/i;
+
+function selectorHtml(text) {
+  let out = '';
+  for (let i = 0; i < text.length;) {
+    const rest = text.slice(i);
+    let match;
+    if ((match = /^\.(?:\\.|[\w-])+/.exec(rest))) out += span('class', match[0]);
+    else if ((match = /^#(?:\\.|[\w-])+/.exec(rest))) out += span('id', match[0]);
+    else if ((match = /^::?[\w-]+/.exec(rest))) out += span('pseudo', match[0]);
+    else if ((match = /^\[[^\]]*\]/.exec(rest))) out += span('attr', match[0]);
+    else if ((match = /^[a-zA-Z][\w-]*/.exec(rest))) out += span('tag', match[0]);
+    else if ((match = /^[\s\S]/.exec(rest))) out += /[>+~*,()]/.test(match[0]) ? span('punct', match[0]) : esc(match[0]);
+    i += match[0].length;
+  }
+  return out;
+}
+
+function valueHtml(text) {
+  let out = '';
+  for (let i = 0; i < text.length;) {
+    const quoted = skipQuoted(text, i);
+    if (quoted > 0) { out += span(text[i] === '/' ? 'comment' : 'string', text.slice(i, quoted)); i = quoted; continue; }
+    const rest = text.slice(i);
+    let match;
+    if ((match = /^!\s*important/i.exec(rest))) out += span('important', match[0]);
+    else if ((match = /^#[0-9a-fA-F]{3,8}\b/.exec(rest))) out += span('color', match[0]);
+    else if ((match = /^--[\w-]+/.exec(rest))) out += span('var', match[0]);
+    else if ((match = /^[a-zA-Z_-][\w-]*(?=\()/.exec(rest))) out += span('func', match[0]);
+    else if ((match = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[a-zA-Z%]+)?/.exec(rest))) out += span('number', match[0]);
+    else if ((match = /^[\w-]+/.exec(rest))) out += esc(match[0]);
+    else { match = [rest[0]]; out += /[(),/]/.test(match[0]) ? span('punct', match[0]) : esc(match[0]); }
+    i += match[0].length;
+  }
+  return out;
+}
+
+/** HTML for `text` with the same characters, in <span class="syn-…"> pieces. */
+export function highlightCss(text) {
+  let out = '';
+  // Each open block remembers whether its contents are declarations.
+  const blocks = [];
+  let prelude = '';
+  let prop = null; // inside a declaration: the property name was read
+  let buffer = '';
+  const inDeclarations = () => blocks.at(-1) === 'decls';
+  const flushPrelude = () => { out += prelude.startsWith('@') || /^\s*@/.test(prelude) ? atHtml(prelude) : selectorHtml(prelude); prelude = ''; };
+  const atHtml = value => { const match = /^(\s*)(@[\w-]+)([\s\S]*)$/.exec(value); return match ? `${esc(match[1])}${span('atrule', match[2])}${valueHtml(match[3])}` : esc(value); };
+  const flushValue = () => { out += valueHtml(buffer); buffer = ''; };
+  for (let i = 0; i < text.length;) {
+    const quoted = skipQuoted(text, i);
+    if (quoted > 0) {
+      const piece = text.slice(i, quoted);
+      if (text[i] === '/') {
+        if (inDeclarations() && prop === null) { out += esc(prelude); prelude = ''; } else if (prelude) flushPrelude();
+        out += span('comment', inDeclarations() && prop !== null ? '' : piece);
+        if (inDeclarations() && prop !== null) buffer += piece;
+      }
+      else if (inDeclarations() && prop !== null) buffer += piece;
+      else prelude += piece;
+      i = quoted;
+      continue;
+    }
+    const ch = text[i];
+    if (inDeclarations()) {
+      if (prop === null) {
+        if (ch === ':') { out += span('prop', prelude) + span('punct', ':'); prelude = ''; prop = ''; }
+        else if (ch === '}') { out += esc(prelude); prelude = ''; out += span('punct', '}'); blocks.pop(); }
+        else if (ch === ';') { out += esc(prelude) + span('punct', ';'); prelude = ''; }
+        else if (ch === '{') { flushPrelude(); out += span('punct', '{'); blocks.push('rules'); }
+        else prelude += ch;
+      } else if (ch === ';' || ch === '}') {
+        flushValue();
+        prop = null;
+        out += span('punct', ch);
+        if (ch === '}') blocks.pop();
+      } else if (ch === '(' ) {
+        // url(...) and other parens may hold ; and } — copy to the matching paren.
+        let depth = 0; let j = i;
+        for (; j < text.length; j++) { const q = skipQuoted(text, j); if (q > 0) { j = q - 1; continue; } if (text[j] === '(') depth++; else if (text[j] === ')' && !--depth) break; }
+        buffer += text.slice(i, j + 1);
+        i = j + 1;
+        continue;
+      } else buffer += ch;
+    } else if (ch === '{') {
+      const at = /^\s*@/.test(prelude);
+      const declarations = at ? DECLARATION_AT.test(prelude.trim()) : true;
+      flushPrelude();
+      out += span('punct', '{');
+      blocks.push(declarations ? 'decls' : 'rules');
+    } else if (ch === '}') {
+      flushPrelude();
+      out += span('punct', '}');
+      blocks.pop();
+    } else if (ch === ';') { flushPrelude(); out += span('punct', ';'); }
+    else prelude += ch;
+    i++;
+  }
+  if (prop !== null && buffer) flushValue();
+  if (prelude) { if (inDeclarations() && prop === null) out += span('prop', prelude); else flushPrelude(); }
+  return out;
+}

package/dist/lib/expandbar.js

@@ -0,0 +1,64 @@
+// A page opened full screen has one control: its name, at the top, which is the way back. It can be dragged
+// anywhere (to feel the whole page); a click — not a drag — goes back. Everything else is hidden.
+import { $, clamp, uiScale } from './util.js';
+import { store, on } from './store.js';
+import { closeExpanded } from './canvas.js';
+
+const bar = $('#expanded-preview');
+const back = $('#expanded-back');
+let spot = null; // where it was left, in screen pixels (kept while the page is open)
+let drag = null;
+let dragged = false;
+
+function place() {
+  if (!spot) { bar.classList.remove('moved'); bar.style.left = bar.style.top = ''; return; }
+  const scale = uiScale();
+  const rect = bar.getBoundingClientRect();
+  const x = clamp(spot.x, 0, Math.max(0, innerWidth - rect.width));
+  const y = clamp(spot.y, 0, Math.max(0, innerHeight - rect.height));
+  bar.classList.add('moved');
+  bar.style.left = `${x / scale}px`;
+  bar.style.top = `${y / scale}px`;
+}
+
+// While dragging the pointer may cross the page (an iframe, which would swallow the events): listen on the
+// document and let the page ignore the pointer until the drag ends.
+function move(event) {
+  if (!drag || drag.id !== event.pointerId) return;
+  if (!drag.moved && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 5) return;
+  drag.moved = true;
+  bar.classList.add('dragging');
+  spot = { x: drag.left + event.clientX - drag.x, y: drag.top + event.clientY - drag.y };
+  place();
+}
+function finish(event) {
+  if (!drag || drag.id !== event.pointerId) return;
+  if (drag.moved) { dragged = true; setTimeout(() => { dragged = false; }, 0); }
+  drag = null;
+  bar.classList.remove('dragging');
+  document.body.classList.remove('bar-dragging');
+  document.removeEventListener('pointermove', move, true);
+  document.removeEventListener('pointerup', finish, true);
+  document.removeEventListener('pointercancel', finish, true);
+}
+back.addEventListener('pointerdown', event => {
+  if (event.button !== 0) return;
+  const rect = bar.getBoundingClientRect();
+  drag = { id: event.pointerId, x: event.clientX, y: event.clientY, left: rect.left, top: rect.top, moved: false };
+  document.body.classList.add('bar-dragging');
+  document.addEventListener('pointermove', move, true);
+  document.addEventListener('pointerup', finish, true);
+  document.addEventListener('pointercancel', finish, true);
+});
+back.addEventListener('click', () => { if (!dragged) closeExpanded(); });
+back.addEventListener('keydown', event => {
+  // The arrows nudge it when it has focus (the keyboard way to look underneath).
+  const step = { ArrowLeft: [-24, 0], ArrowRight: [24, 0], ArrowUp: [0, -24], ArrowDown: [0, 24] }[event.key];
+  if (!step || !event.altKey) return;
+  event.preventDefault();
+  const rect = bar.getBoundingClientRect();
+  spot = { x: rect.left + step[0], y: rect.top + step[1] };
+  place();
+});
+on('expanded', open => { if (open) requestAnimationFrame(place); else spot = null; });
+addEventListener('resize', () => { if (store.expanded) place(); });

package/dist/lib/file-picker.js

@@ -0,0 +1,103 @@
+// Filesystem navigation UI. The host supplies a read-only listing; consumers own selection policy, writes and modal lifetime.
+import { el, icon } from './util.js';
+
+export const directoryPath = value => value.endsWith('/') || value.endsWith('\\') ? value : value + (value.includes('\\') && !value.includes('/') ? '\\' : '/');
+
+export function filePicker({ read, includeFiles = true, label, onChange = () => {}, onSubmit = () => {} }) {
+  const element = el('div', 'file-picker');
+  const bar = el('div', 'file-picker-path');
+  const up = el('button', 'tool');
+  up.type = 'button';
+  up.setAttribute('aria-label', 'Parent folder');
+  up.dataset.tip = 'Parent folder';
+  up.append(icon('folderUp'));
+  const input = el('input', 'field mono');
+  input.type = 'text';
+  input.spellcheck = false;
+  input.autocomplete = 'off';
+  input.setAttribute('aria-label', label);
+  const list = el('div', 'dir-list');
+  bar.append(up, input);
+  element.append(bar, list);
+  let state = { info: null, error: '', pending: false };
+  let sequence = 0, timer = null, disposed = false, reading = Promise.resolve();
+  let rows = new Map();
+  const update = next => {
+    state = next;
+    element.setAttribute('aria-busy', String(state.pending));
+    up.disabled = !state.info?.parent;
+    if (up.disabled && document.activeElement === up) input.focus({ preventScroll: true });
+    onChange(state);
+  };
+  function paint() {
+    const info = state.info;
+    const nextRows = new Map();
+    const nodes = [...(info?.dirs ?? []), ...(includeFiles ? info?.files ?? [] : [])].map(entry => {
+      const target = entry.file || directoryPath(info.directory || info.path) + entry.name;
+      const key = `${target}\0${!!entry.project}`;
+      let row = rows.get(key);
+      if (!row) {
+        row = el('button', `dir${entry.project ? ' is-project' : ''}`);
+        row.type = 'button';
+        row.dataset.name = entry.name;
+        row.append(icon(entry.project ? 'divlet' : 'folder'), el('span', 'dir-name', entry.name));
+        if (entry.project) row.append(el('span', 'dir-tag', 'project'));
+        row.addEventListener('click', () => go(target));
+        row.addEventListener('dblclick', () => { if (entry.project && includeFiles) activate(); });
+      }
+      nextRows.set(key, row);
+      return row;
+    });
+    rows = nextRows;
+    if (!nodes.length) nodes.push(el('div', 'dir-empty', state.error ? 'Unable to list this folder' : info?.kind === 'missing' ? 'Nothing here yet' : includeFiles ? 'No project files or sub-folders' : 'No sub-folders here'));
+    // Selecting a file in the same directory must not detach its row between clicks or lose keyboard focus.
+    if (nodes.length !== list.children.length || nodes.some((node, index) => node !== list.children[index])) list.replaceChildren(...nodes);
+  }
+  function load(path) {
+    if (disposed) return Promise.resolve();
+    clearTimeout(timer); timer = null;
+    input.value = path;
+    const mine = ++sequence, target = input.value;
+    update({ info: null, error: '', pending: true });
+    reading = (async () => {
+      try {
+        const info = await read(target);
+        if (disposed || mine !== sequence) return;
+        update({ info, error: '', pending: false });
+      } catch (error) {
+        if (disposed || mine !== sequence) return;
+        update({ info: null, error: error.message, pending: false });
+      }
+      paint();
+    })();
+    return reading;
+  }
+  function go(path) { load(path); input.focus(); }
+  async function activate() {
+    const pending = timer || !state.info && !state.pending ? load(input.value) : reading;
+    const mine = sequence;
+    await pending;
+    if (!disposed && mine === sequence && state.info && !state.pending && !state.error) onSubmit(state.info);
+  }
+  up.addEventListener('click', () => { if (state.info?.parent) go(directoryPath(state.info.parent)); });
+  input.addEventListener('input', () => {
+    if (disposed) return;
+    ++sequence;
+    clearTimeout(timer);
+    update({ info: null, error: '', pending: true });
+    timer = setTimeout(() => load(input.value), 140);
+  });
+  input.addEventListener('keydown', event => {
+    if (event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); activate(); }
+    else if (event.key === 'ArrowDown') { event.preventDefault(); event.stopPropagation(); list.querySelector('.dir')?.focus(); }
+  });
+  list.addEventListener('keydown', event => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    const nodes = [...list.querySelectorAll('.dir')], at = nodes.indexOf(document.activeElement);
+    event.preventDefault(); event.stopPropagation();
+    if (event.key === 'ArrowUp' && at <= 0) input.focus();
+    else nodes[Math.max(0, Math.min(nodes.length - 1, at + (event.key === 'ArrowDown' ? 1 : -1)))]?.focus();
+  });
+  up.disabled = true;
+  return { element, input, load, get state() { return state; }, dispose() { disposed = true; ++sequence; clearTimeout(timer); } };
+}