Extension 0.12.1: found and fixed by running it in a real VSCodium

One-line rule completions, property words sorted first, designer knows the wood and mirror settings; new real-editor test suites.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

.gitignore

@@ -61,3 +61,6 @@ mini-services/
 
 # local screenshots, never published
 .zscripts/
+
+# real-editor test scratch (scripts/test-in-editor.mjs)
+/.vsc-test/

GUIDE.md

@@ -729,7 +729,7 @@ Three ways to get it:
 
 1. VSCodium: open the Extensions tab, search "DSSL" and install. It is on Open VSX:
    https://open-vsx.org/extension/ehs-studio/dssl-vscode
-2. VS Code: download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then
+2. VS Code: download `dssl-vscode/dssl-vscode-0.12.1.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. (The Microsoft Marketplace listing is not published yet.)
 3. Build it yourself: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 
@@ -799,6 +799,9 @@ node scripts/test-browser-v090.mjs      # 0.9.0 in Chrome: pixels, lifecycle, re
 node scripts/test-v0100.mjs             # 0.10.0: glass, tilt, named-colour alpha, playground examples, HTML filter
 node scripts/test-designer.mjs          # the designer's state to DSSL and back, plus a random sweep
 node scripts/test-designer-browser.mjs  # the designer panel, driven like a person would
+node scripts/test-in-editor.mjs         # the extension inside a REAL VS Code or VSCodium: diagnostics, completions, hover, commands (needs a display)
+node scripts/test-editor-ui.mjs         # and clicking through that real editor: typing, hover, the designer, Insert at cursor
+node scripts/test-all.mjs --editor      # everything above, plus the two real-editor suites
 node scripts/test-designer-host.mjs     # the extension's wiring, against a fake of the editor API
 node scripts/test-v082.mjs              # 0.8.2: one cascade across stylesheets, fluid longhands
 node scripts/test-v081.mjs              # 0.8.1: fluid math, raw blocks, packaged CLI
@@ -827,6 +830,10 @@ Read this before choosing DSSL for a real site.
   JS (`@signal`, `animate:`, deform, overlap) stays out and is counted in the
   report, so you always know what a no-JS page gives up. If a page must work
   without JS AND uses the dynamic features, use CSS.
+- **The editor extension is tested in one editor.** It runs in a real VSCodium (1.135, Linux), driven both through the
+  extension host and by clicking through the window (`test-in-editor.mjs`, `test-editor-ui.mjs`). The Microsoft build of
+  VS Code, Windows and macOS share the same extension API but have not been run. Those suites need a display and an
+  editor, so they are not part of `test-all.mjs` unless you pass `--editor`.
 - **First paint.** Styles are applied by the engine after it loads, so large
   pages can flash unstyled content (CLS). The build output fixes this for
   static pages (real CSS paints before any JS). For live pages, the docs site

README.md

@@ -68,7 +68,7 @@ Both drop a `dssl-engine/` folder next to you: the engine, a starter token set,
 
 Prefer to click: [dssl-engine.zip](https://dssl-sable.vercel.app/dssl-engine.zip) or [dssl-engine.tar.gz](https://dssl-sable.vercel.app/dssl-engine.tar.gz). Same package, straight from the browser.
 
-Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
+Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.1.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
 
 AI agents and machine reviewers: this repo ships `llms.txt` (dense, structured facts), `AGENTS.md` (how to work on the codebase) and `PARITY.md` (the honest feature matrix against CSS). The site serves the same `llms.txt` at https://dssl-sable.vercel.app/llms.txt
 

dssl-vscode/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.12.1
+
+Found by running the extension inside a real VSCodium and clicking through it (`node scripts/test-editor-ui.mjs`):
+
+- **Completions in a one-line rule.** `.t { texture: |` offered selectors and pseudo-elements instead of texture
+  words, because only a declaration that started its line was recognised. A declaration after `{` or `;` now
+  completes too.
+- **The right words come first.** After `texture:` the presets and settings now sort above the long list of generic
+  CSS keywords, so `oak` is not buried under a hundred vendor keywords.
+- **The designer knows wood.** The Texture tab now has `figure`, `warp`, `pores`, `knots` and `planks` (shown only for
+  the rings generator and the wood species) and a `mirror tile` choice for `symmetrical`. Before, these were written
+  and read back wrongly, and could not be tuned at all.
+
 ## 0.12.0
 
 - Bundled engine updated to 0.12.0: `texture: ... symmetrical`, a `fonts { }` block, richer `gradient:` sentences

dssl-vscode/extension.js

@@ -71,6 +71,7 @@ function registerCompletion() {
         return result.items.map((it) => {
           const item = new vscode.CompletionItem(it.label, KIND[it.kind] || vscode.CompletionItemKind.Text);
           item.detail = it.detail;
+          if (it.sort) item.sortText = it.sort + it.label;
           if (it.documentation) item.documentation = new vscode.MarkdownString(it.documentation);
           return item;
         });

dssl-vscode/lib/analysis.js

@@ -164,7 +164,11 @@ export function contextAt(text, offset) {
   const tokenDot = lineToCursor.match(/([\w-]+)\.([\w-]*)$/);
   // declaration line: "prop: value..." anchored at line start, but a line
   // that also opens a block ("a:hover {") is a selector, not a declaration
-  let declMatch = lineToCursor.match(/^(\s*)(-{0,2}[.\w-]+)\s*:\s*([\s\S]*)$/);
+  // 0.12.0: the declaration is the part after the last "{", ";" or "}" on the line, so `.t { texture: |` and
+  // `.a { color: red; background: |` complete values too. Before this only a declaration that started its line did.
+  const cut = Math.max(lineToCursor.lastIndexOf('{'), lineToCursor.lastIndexOf(';'), lineToCursor.lastIndexOf('}'));
+  const statement = cut >= 0 ? lineToCursor.slice(cut + 1) : lineToCursor;
+  let declMatch = statement.match(/^(\s*)(-{0,2}[.\w-]+)\s*:\s*([\s\S]*)$/);
   if (declMatch && declMatch[3].includes('{')) declMatch = null;
   // the value prefix is the trailing word segment: after "gap " (typed +
   // space) it is empty, so completions re-open for the next word
@@ -222,12 +226,16 @@ export function completionsAt(analysis, path, text, offset) {
         items.push({ label: k, kind: 'keyword', detail: 'animate option', documentation: ANIMATE_EXTRAS[k] || 'animate option' });
       }
     }
-    items.push(...domainItems(prop));
-    for (const k of CSS_KEYWORDS) {
-      items.push({ label: k, kind: 'keyword', detail: 'keyword' });
-    }
+    // the words that belong to THIS property (presets after texture:, settings after glass:) sort first, then tokens, then the long
+    // list of generic CSS keywords; otherwise the editor buries `oak` under a hundred vendor keywords
+    const mark = (list, sort) => { for (const it of list) it.sort = sort; return list; };
+    mark(items, '0');
+    items.push(...mark(domainItems(prop), '0'));
     for (const key of Object.keys(analysis.registry)) {
-      items.push({ label: key, kind: 'value', detail: 'token = ' + analysis.registry[key], documentation: `token ${key} = ${analysis.registry[key]}` });
+      items.push({ label: key, kind: 'value', detail: 'token = ' + analysis.registry[key], documentation: `token ${key} = ${analysis.registry[key]}`, sort: '1' });
+    }
+    for (const k of CSS_KEYWORDS) {
+      items.push({ label: k, kind: 'keyword', detail: 'keyword', sort: '2' });
     }
     return { items, context: 'value' };
   }

dssl-vscode/media/designer-core.js

@@ -155,7 +155,9 @@ export function auraFromDssl(text) {
 export const defaultTextureLayer = (name = 'grain') => ({ name, set: {}, color: null, color2: null });
 export const defaultTextureState = () => ({ layers: [defaultTextureLayer('wood')], base: '#b8a58a' });
 
-const TEXTURE_NUMERIC = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate'];
+const TEXTURE_NUMERIC = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate', 'figure', 'warp', 'pores', 'knots', 'planks'];
+/** the settings that only mean something for the rings (wood) generator */
+export const RINGS_ONLY = ['figure', 'warp', 'pores', 'knots', 'planks'];
 
 /** what a preset or generator would use with no overrides, to know what to leave out of the output */
 function baselineFor(name) {
@@ -170,6 +172,7 @@ export function textureLayerToDssl(layer) {
   if (layer.set.stretch && (layer.set.stretch[0] !== (base.stretch || [1, 1])[0] || layer.set.stretch[1] !== (base.stretch || [1, 1])[1])) w.push('stretch', fmt(layer.set.stretch[0]), fmt(layer.set.stretch[1]));
   if (layer.set.type && layer.set.type !== base.type) w.push('type', layer.set.type);
   if (layer.set.blend && layer.set.blend !== base.blend) w.push('blend', layer.set.blend);
+  if (layer.set.symmetrical && layer.set.symmetrical !== base.symmetrical) w.push('symmetrical', ...(layer.set.symmetrical === 'both' ? [] : [layer.set.symmetrical]));
   if (layer.set.invert) w.push('invert');
   if (layer.color) w.push('color', colorToDssl(layer.color));
   if (layer.color2) w.push('color2', colorToDssl(layer.color2));
@@ -181,7 +184,7 @@ export const textureToDssl = (state) => (state.layers.length ? `texture: ${state
 function fromParsedTexture(parsed) {
   const layer = defaultTextureLayer(parsed.preset || parsed.gen);
   const base = baselineFor(layer.name);
-  for (const k of [...TEXTURE_NUMERIC, 'stretch', 'type', 'blend', 'invert']) if (parsed[k] !== undefined && JSON.stringify(parsed[k]) !== JSON.stringify(base[k])) layer.set[k] = parsed[k];
+  for (const k of [...TEXTURE_NUMERIC, 'stretch', 'type', 'blend', 'invert', 'symmetrical']) if (parsed[k] !== undefined && JSON.stringify(parsed[k]) !== JSON.stringify(base[k])) layer.set[k] = parsed[k];
   if (parsed.color !== undefined && parsed.color !== base.color) layer.color = dsslToColor(parsed.color);
   if (parsed.color2 !== undefined && parsed.color2 !== base.color2) layer.color2 = dsslToColor(parsed.color2);
   return layer;

dssl-vscode/media/designer.js

@@ -279,7 +279,7 @@ function buildTextureTab() {
   const settings = h('div', {});
   const swatch = h('div', { class: 'swatch', id: 'tex-swatch' });
   const baseColor = h('input', { type: 'color', value: s.base, onchange: (e) => { s.base = e.target.value; swatch.style.backgroundColor = s.base; } });
-  const numeric = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate'];
+  const numeric = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate', ...core.RINGS_ONLY];
 
   function rebuild() {
     layerBar.replaceChildren(...s.layers.map((l, i) => h('button', { class: 'mini' + (i === tex.sel ? ' on' : ''), onclick: () => { tex.sel = i; rebuild(); } }, `${i + 1}. ${l.name}`)),
@@ -291,7 +291,9 @@ function buildTextureTab() {
     const eff = (k) => (L.set[k] !== undefined ? L.set[k] : base[k]);
     const info = h('div', { class: 'note' }, PRESETS[L.name] ? `${L.name}: ${PRESETS[L.name].doc}` : `${L.name} (a generator: set it up yourself)`);
     settings.append(info);
+    const isRings = (base.gen || L.name) === 'rings';
     for (const k of numeric) {
+      if (core.RINGS_ONLY.includes(k) && !isRings) continue;   // wood settings only show for wood
       const def = TEXTURE_KEYS[k];
       const dflt = base[k] !== undefined ? base[k] : (def.min + Math.min(def.max, 20) / 2);
       const step = def.int ? 1 : def.max <= 2 ? 0.05 : def.max <= 40 ? 0.1 : 1;
@@ -304,6 +306,7 @@ function buildTextureTab() {
       num('stretch y', () => (L.set.stretch || st)[1], (v) => { L.set.stretch = [(L.set.stretch || st)[0], v]; }, 1, 80, 1),
       select('blend', () => eff('blend') || 'normal', (v) => { L.set.blend = v; }, ['normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-burn', 'color-dodge', 'darken', 'lighten', 'difference', 'exclusion']),
       select('type', () => eff('type') || 'fractal', (v) => { L.set.type = v; }, ['fractal', 'turbulence']),
+      select('mirror tile (symmetrical)', () => L.set.symmetrical || 'none', (v) => { L.set.symmetrical = v === 'none' ? undefined : v; }, ['none', 'both', 'x', 'y']),
       check('invert', () => !!L.set.invert, (v) => { L.set.invert = v || undefined; }),
       h('div', { class: 'pair' },
         check('own colour', () => !!L.color, (v) => { L.color = v ? (L.color || { hex: '#000000', a: 1 }) : null; rebuild(); }),

dssl-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "dssl-vscode",
   "displayName": "DSSL Language Support",
   "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry and for textures, auras and sliders, hover docs, an interactive designer with sliders and live previews for aura, texture and range sliders, and a CSS to DSSL converter. Works in VS Code and VSCodium.",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

llms.txt

@@ -90,4 +90,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.1.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

public/llms.txt

@@ -90,4 +90,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.1.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

scripts/lib/editor.mjs

@@ -0,0 +1,36 @@
+/* editor.mjs: find a VS Code or VSCodium to run the extension tests in, and launch it with a throwaway profile. */
+import { spawn, spawnSync } from 'node:child_process';
+import { cpSync, mkdirSync, rmSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..');
+export const ext = path.join(root, 'dssl-vscode');
+const which = (cmd) => spawnSync('sh', ['-c', `command -v ${cmd}`], { encoding: 'utf8' }).stdout.trim();
+
+/** { cmd, pre, kill } or null. pre = arguments that go before the editor's own (flatpak needs them) */
+export function findEditor(extraEnv = {}) {
+  if (process.env.DSSL_EDITOR) return { cmd: process.env.DSSL_EDITOR, pre: [], kill: () => {} };
+  for (const c of ['codium', 'code']) if (which(c)) return { cmd: c, pre: [], kill: () => {} };
+  if (which('flatpak') && /com\.vscodium\.codium/.test(spawnSync('flatpak', ['list', '--app'], { encoding: 'utf8' }).stdout)) {
+    const envs = Object.entries(extraEnv).map(([k, v]) => `--env=${k}=${v}`);
+    return { cmd: 'flatpak', pre: ['run', ...envs, 'com.vscodium.codium'], kill: () => spawnSync('flatpak', ['kill', 'com.vscodium.codium']) };
+  }
+  return null;
+}
+
+/** a clean scratch profile + workspace copy of the fixtures, so the editor never touches your own settings */
+export function scratchWorkspace(name) {
+  const dir = path.join(root, '.vsc-test', name);
+  rmSync(dir, { recursive: true, force: true });
+  mkdirSync(path.join(dir, 'ws'), { recursive: true });
+  cpSync(path.join(ext, 'test/host/fixtures'), path.join(dir, 'ws'), { recursive: true });
+  return { dir, ws: path.join(dir, 'ws') };
+}
+
+export function editorArgs(editor, dir, ws, more = []) {
+  return [...editor.pre, `--user-data-dir=${path.join(dir, 'user')}`, `--extensions-dir=${path.join(dir, 'extensions')}`,
+    `--extensionDevelopmentPath=${ext}`, '--disable-workspace-trust', '--new-window', '--disable-gpu', ...more, ws, path.join(ws, 'sample.dssl')];
+}
+
+export const launchDetached = (editor, args, env = {}) => spawn(editor.cmd, args, { stdio: 'ignore', detached: true, env: { ...process.env, ...env } });

scripts/test-all.mjs

@@ -10,6 +10,7 @@ import { findChrome } from './lib/browser-harness.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const skipBrowser = process.argv.includes('--no-browser');
+const withEditor = process.argv.includes('--editor');   // also run the extension inside a real VS Code / VSCodium (needs a display)
 const SUITES = [
   ['engine 0.5', 'test-v050.mjs'], ['engine 0.6', 'test-v060.mjs'], ['engine 0.7', 'test-v070.mjs'], ['parser lines 0.7.1', 'test-v071.mjs'],
   ['review fixes 0.7.2', 'test-v072.mjs'], ['exit lane 0.8.0', 'test-v073.mjs'], ['follow-up 0.8.1', 'test-v081.mjs'], ['cascade 0.8.2', 'test-v082.mjs'],
@@ -24,6 +25,7 @@ if (!skipBrowser && !findChrome()) {
   process.exit(2);
 }
 const rows = [];
+if (withEditor) SUITES.push(['extension inside a real editor', 'test-in-editor.mjs', true], ['designer and typing in a real editor', 'test-editor-ui.mjs', true]);
 for (const [name, file, browser] of SUITES) {
   if (browser && skipBrowser) { rows.push([name, 'skipped', '']); continue; }
   const t0 = Date.now();

scripts/test-designer.mjs

@@ -121,5 +121,18 @@ section('random sweep: everything the panel can write compiles and reads back');
   ok(`${n} random designs all compile and read back (aura both styles, texture, slider)`, bad.length === 0, `${bad.length} problems; first: ${bad[0]}`);
 }
 
+// 0.11/0.12: the wood settings and the mirrored tile survive the designer both ways
+{
+  const mk = (set) => ({ layers: [{ name: 'oak', set, color: null, color2: null }], base: '#b8a58a' });
+  const t1 = core.textureToDssl(mk({ planks: 120, knots: 2, figure: 0.8, symmetrical: 'both' }));
+  ok('wood settings are written (planks, knots, figure, symmetrical)', /^texture: oak /.test(t1) && /planks 120/.test(t1) && /knots 2/.test(t1) && /figure 0.8/.test(t1) && /symmetrical(?! (x|y|both))/.test(t1), t1);
+  ok('and the result compiles', compiles(t1).ok, JSON.stringify(compiles(t1)));
+  const back = core.textureFromDssl(t1).state.layers[0];
+  ok('and reads back into the same controls', back.name === 'oak' && back.set.planks === 120 && back.set.knots === 2 && back.set.figure === 0.8 && back.set.symmetrical === 'both', JSON.stringify(back));
+  ok('x and y are kept', /symmetrical x/.test(core.textureToDssl(mk({ symmetrical: 'x' }))) && core.textureFromDssl('texture: oak symmetrical y').state.layers[0].set.symmetrical === 'y');
+  ok('a preset that already says nothing special writes just its name', core.textureToDssl(mk({})) === 'texture: oak');
+  ok('RINGS_ONLY lists exactly the settings that only mean something for wood', JSON.stringify(core.RINGS_ONLY) === JSON.stringify(['figure', 'warp', 'pores', 'knots', 'planks']));
+}
+
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

scripts/test-editor-ui.mjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+/* test-editor-ui.mjs: drive a REAL VS Code or VSCodium like a person would.
+ *
+ *   node scripts/test-editor-ui.mjs
+ *
+ * Launches the editor with the extension loaded and a debugging port, then uses Playwright over the
+ * Chrome DevTools Protocol (the editor is Electron) to type, hover, press F1, click inside the designer
+ * webview, and read the result back out of the open file. It needs a display and an editor, so it is not part
+ * of test-all.mjs: run it by hand before you publish the extension, together with test-in-editor.mjs. */
+import { chromium } from 'playwright-core';
+import { readFileSync } from 'node:fs';
+import { findEditor, scratchWorkspace, editorArgs, launchDetached } from './lib/editor.mjs';
+
+const PORT = 9400 + Math.floor(Math.random() * 400);
+const editor = findEditor();
+if (!editor) { console.error('No VS Code or VSCodium found. Install one, or set DSSL_EDITOR to its command.'); process.exit(2); }
+const { dir, ws } = scratchWorkspace('ui');
+const child = launchDetached(editor, editorArgs(editor, dir, ws, [`--remote-debugging-port=${PORT}`]));
+child.unref();
+
+let pass = 0, fail = 0;
+const ok = (n, c, x) => { if (c) { pass++; console.log(`  ok  ${n}`); } else { fail++; console.log(`FAIL  ${n}${x !== undefined ? '; ' + x : ''}`); } };
+const done = async (browser, code) => { try { await browser.close(); } catch { /* already gone */ } try { editor.kill(); child.kill(); } catch { /* ignore */ } console.log(`\n${pass} passed, ${fail} failed (clicking through a real editor)`); process.exit(code); };
+
+let browser = null;
+for (let i = 0; i < 60 && !browser; i++) {
+  try { browser = await chromium.connectOverCDP(`http://127.0.0.1:${PORT}`); } catch { await new Promise((r) => setTimeout(r, 1000)); }
+}
+if (!browser) { console.error('could not reach the editor'); editor.kill(); process.exit(1); }
+const page = browser.contexts()[0].pages()[0];
+await page.waitForTimeout(4500);
+await page.click('.notification-toast .monaco-button:has-text("Never")').catch(() => {});
+const editorText = () => page.evaluate(() => [...document.querySelectorAll('.monaco-editor .view-line')].map((l) => l.textContent.replace(/ /g, ' ')).join('\n'));
+const webview = () => page.frames().filter((x) => /vscode-webview/.test(x.url())).pop();
+const palette = async (text) => { await page.keyboard.press('F1'); await page.waitForTimeout(500); await page.keyboard.type(text); await page.waitForTimeout(700); await page.keyboard.press('Enter'); await page.waitForTimeout(3500); };
+
+try {
+  // completions in a one-line rule, the case a real editor found broken
+  await page.click('.monaco-editor .view-lines'); await page.keyboard.press('Control+End');
+  await page.keyboard.type('\n.t { texture: ');
+  await page.keyboard.press('Control+Space'); await page.waitForTimeout(1500);
+  const list1 = await page.locator('.suggest-widget .monaco-list-row').allTextContents();
+  ok('one-line rule: "texture: " offers texture words first, not pseudo-elements', list1.length > 3 && list1.slice(0, 8).every((t) => /texture (preset|setting|generator)|blend mode/.test(t)) && !list1.some((t) => /::after/.test(t)), list1.slice(0, 6).join(' | '));
+  await page.keyboard.type('oa'); await page.waitForTimeout(700);
+  const list2 = await page.locator('.suggest-widget .monaco-list-row').allTextContents();
+  ok('typing "oa" narrows it to oak and oak-planks', list2.some((t) => /^oak\b/.test(t)) && list2.some((t) => /oak-planks/.test(t)), list2.join(' | '));
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Control+Shift+K'); await page.waitForTimeout(300);   // delete the scratch line
+
+  // hover
+  await page.mouse.move(470, 348); await page.waitForTimeout(1800);
+  const hover = await page.locator('.monaco-hover').allTextContents();
+  ok('hovering "texture" shows the documentation widget', hover.some((t) => /generated texture/i.test(t)), hover.join('|').slice(0, 120));
+  await page.mouse.move(900, 700); await page.waitForTimeout(300);
+
+  // problems: the status bar counts what the squiggles say
+  const status = (await page.locator('.statusbar').innerText()).replace(/\s+/g, ' ');
+  ok('the status bar counts the errors and the warning', /[3-9]/.test(status) && /1/.test(status), status.slice(0, 60));
+
+  // the designer
+  await palette('DSSL: Design a texture');
+  let f = webview();
+  ok('"DSSL: Design a texture" opens the designer on the Texture tab', f && /Textures/.test(await f.locator('body').innerText()));
+  const tile = async (name) => { const t = webview().locator(`.tile[data-name="${name}"]`); await t.scrollIntoViewIfNeeded(); await t.click(); await page.waitForTimeout(500); };
+  await tile('oak-planks');
+  const txt = await webview().locator('body').innerText();
+  ok('wood settings appear for a wood preset (planks, knots, figure, mirror tile)', ['planks', 'knots', 'figure', 'mirror tile'].every((w) => txt.includes(w)));
+  await tile('grain');
+  ok('and are hidden for grain', !(await webview().locator('body').innerText()).includes('knots'));
+  await tile('oak-planks');
+  await webview().locator('select').filter({ has: webview().locator('option[value="both"]') }).first().selectOption('both'); await page.waitForTimeout(500);
+  const dsslOut = await webview().locator('textarea').last().inputValue();
+  ok('choosing the mirror writes symmetrical into the DSSL', /^texture: oak-planks symmetrical$/.test(dsslOut.trim()), dsslOut);
+  ok('and the panel says it compiles', /compiles/.test(await webview().locator('body').innerText()));
+
+  // insert, then load it back
+  await page.click('.monaco-editor .view-lines'); await page.keyboard.press('Control+End');
+  await webview().getByRole('button', { name: 'Insert at cursor' }).click(); await page.waitForTimeout(800);
+  ok('"Insert at cursor" puts the line into the open file', /texture: oak-planks symmetrical/.test(await editorText()));
+  await page.click('.monaco-editor .view-lines'); await page.keyboard.press('Control+End'); await page.keyboard.press('Shift+Home'); await page.waitForTimeout(200);
+  await tile('grain');
+  await webview().getByRole('button', { name: 'Load from selection' }).click(); await page.waitForTimeout(800);
+  ok('"Load from selection" reads the line back into the controls', /oak-planks symmetrical/.test(await webview().locator('textarea').last().inputValue()));
+
+  // the other tabs
+  await webview().getByRole('button', { name: 'Slider' }).first().click(); await page.waitForTimeout(800);
+  ok('the slider tab shows a live preview slider that compiles', (await webview().locator('#pv').count()) === 1 && /compiles/.test(await webview().locator('body').innerText()));
+  await webview().getByRole('button', { name: 'Aura' }).first().click(); await page.waitForTimeout(800);
+  ok('the aura tab compiles too', /compiles/.test(await webview().locator('body').innerText()));
+  await done(browser, fail ? 1 : 0);
+} catch (e) {
+  fail++; console.log('FAIL  the run threw: ' + (e && e.message ? e.message.split('\n')[0] : e));
+  await page.screenshot({ path: dir + '/failure.png' }).catch(() => {});
+  console.log('  a screenshot of the editor is at ' + dir + '/failure.png');
+  await done(browser, 1);
+}

scripts/test-extension-lib.mjs

@@ -4,7 +4,7 @@
  * behave through the exact code the .vsix ships. Run before packaging. */
 import { resolve } from '../dssl-vscode/lib/engine/resolver.js';
 import { parse, STATE_WORDS } from '../dssl-vscode/lib/engine/parser.js';
-import { analyzeWorkspace, diagnosticsFor } from '../dssl-vscode/lib/analysis.js';
+import { analyzeWorkspace, diagnosticsFor, completionsAt } from '../dssl-vscode/lib/analysis.js';
 
 let pass = 0, fail = 0;
 const ok = (name, cond) => { if (cond) { pass++; console.log(`  ok  ${name}`); } else { fail++; console.log(`FAIL  ${name}`); } };
@@ -40,5 +40,22 @@ ok('STATE_WORDS exported by bundled parser', STATE_WORDS instanceof Set && STATE
 const tDoc = compileDoc('card { transition-delay: 200 }', 't.dssl');
 ok('bare transition-delay becomes 200ms', /200\s*ms|200ms/.test(JSON.stringify(tDoc.rules[0].decls)));
 
+// completions where the declaration does not start the line (found by driving a real editor, 0.12.0)
+{
+  const an = analyzeWorkspace(new Map([['/w/a.dssl', '.a { color: red }']]));
+  const labels = (text) => completionsAt(an, '/w/a.dssl', text, text.length).items.map((x) => x.label);
+  const oneLine = labels('.t { texture: ');
+  ok('one-line rule: after "texture: " the presets are offered', oneLine.includes('oak') && oneLine.includes('rings') && !oneLine.includes('::after'), oneLine.slice(0, 5).join());
+  const second = labels('.t { color: red; glass: ');
+  ok('the words for the property sort before generic CSS keywords', (() => { const it = completionsAt(an, '/w/a.dssl', '.t { texture: ', 14).items; const oak = it.find((x) => x.label === 'oak'), kw = it.find((x) => x.label === 'absolute'); return oak && kw && (oak.sort + oak.label) < (kw.sort + kw.label); })());
+  ok('a second declaration on the line completes too', second.includes('saturate') && second.includes('tint'), second.slice(0, 5).join());
+  const afterBrace = labels('.t { tilt: ');
+  ok('tilt settings after the brace', afterBrace.includes('lift') && afterBrace.includes('glare'));
+  const fresh = labels('.t { ');
+  ok('right after "{" it still offers property names, not values', fresh.includes('background') && !fresh.includes('oak'));
+  ok('a normal multi-line declaration still works', labels('.t {\n  texture: ').includes('oak'));
+  ok('a nested selector line is still not a declaration', !labels('.t {\n  a:hover').includes('oak'));
+}
+
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

scripts/test-in-editor.mjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+/* test-in-editor.mjs: run the extension inside a REAL VS Code or VSCodium.
+ *
+ *   node scripts/test-in-editor.mjs                 finds VSCodium (flatpak or on PATH) or VS Code
+ *   DSSL_EDITOR="code" node scripts/test-in-editor.mjs
+ *
+ * It opens a real editor window (a throwaway profile, so yours is untouched), loads the extension
+ * from this checkout, runs dssl-vscode/test/host/index.js in the extension host, and prints the
+ * results. Needs a display, so it is not part of test-all.mjs.
+  * The UI half (typing, hover, the designer panel) is scripts/test-editor-ui.mjs. */
+import { spawnSync } from 'node:child_process';
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { ext, findEditor, scratchWorkspace, editorArgs } from './lib/editor.mjs';
+
+const { dir, ws } = scratchWorkspace('host');
+const out = path.join(dir, 'results.json');
+const editor = findEditor({ DSSL_TEST_OUT: out });
+if (!editor) { console.error('No VS Code or VSCodium found. Install one, or set DSSL_EDITOR to its command.'); process.exit(2); }
+console.log(`launching: ${editor.cmd} ${editor.pre.filter((a) => !a.startsWith('--env')).join(' ')} ...`);
+const r = spawnSync(editor.cmd, editorArgs(editor, dir, ws, [`--extensionTestsPath=${path.join(ext, 'test/host')}`]), { stdio: ['ignore', 'pipe', 'pipe'], encoding: 'utf8', env: { ...process.env, DSSL_TEST_OUT: out }, timeout: 120000 });
+
+if (!existsSync(out)) {
+  console.error('The editor exited without writing results.');
+  console.error((r.stdout || '').slice(-1500)); console.error((r.stderr || '').slice(-2500));
+  process.exit(1);
+}
+const results = JSON.parse(readFileSync(out, 'utf8'));
+let pass = 0, fail = 0;
+for (const x of results) { if (x.ok) { pass++; console.log(`  ok  ${x.name}`); } else { fail++; console.log(`FAIL  ${x.name}; ${x.extra}`); } }
+console.log(`\n${pass} passed, ${fail} failed (in a real editor)`);
+process.exit(fail ? 1 : 0);