@jarenjs/studio 0.34.0

package/src/index.js

@@ -0,0 +1,20 @@
+//@ts-check
+/**
+ * @file `@jarenjs/studio` — the ENGINE (part one of the two-layer
+ * package). Headless: it parses a `jaren-project` document, validates
+ * each file against its own kind grammar, assembles the runnable
+ * artifacts, and classifies a change as structural vs. state-only. It
+ * knows the suite's grammars (validate/json/app/flow/db) but nothing of
+ * the DOM, `@jarenjs/view` or `@jarenjs/app`'s runtime — the component
+ * layer (`./component`) imports the engine, never the reverse.
+ *
+ * The project is a THIN envelope over typed files; there is deliberately
+ * no single composed meta-schema, so a data file may use host-registered
+ * operators the closed grammars forbid — the per-file validators are the
+ * honest boundary.
+ */
+
+export { KINDS, LAYOUT_DEFAULT, parseProject, fileOf } from './project.js';
+export { validateFile } from './validate.js';
+export { assembleArtifacts, classifyChange, describe } from './assemble.js';
+export { STUDIO_CODES, StudioError } from './errors.js';

package/src/project.js

@@ -0,0 +1,80 @@
+//@ts-check
+/**
+ * @file The project document model: the closed file-kind vocabulary, the
+ * frozen IDE `layout` shape, and `parseProject` — validate a candidate
+ * against the `jaren-project` envelope schema, reject duplicate file
+ * names, and return a NORMALIZED, frozen project (layout defaulted,
+ * `active` resolved to a real file). Only the ENVELOPE is gated here; a
+ * file's `text` is a string until its kind validator runs (`validate.js`).
+ */
+
+import { JarenValidator } from '@jarenjs/validate';
+import projectSchema from '../schemas/jaren-project.schema.json' with { type: 'json' };
+import { StudioError } from './errors.js';
+
+/** The closed set of file kinds (matches the schema `kind` enum). */
+export const KINDS = Object.freeze([
+  'app', 'jslt', 'query', 'state', 'data', 'schema', 'fsm', 'dag', 'model',
+]);
+
+/** The default IDE layout — the frozen `{ mode, ratio, autorun }` shape
+ * that rides the share link and the eject, so it must not drift. */
+export const LAYOUT_DEFAULT = Object.freeze({ mode: 'classic', ratio: 0.5, autorun: true });
+
+const validateEnvelope = new JarenValidator({ skipErrors: false, collectErrors: true })
+  .compile(projectSchema);
+
+/**
+ * Parse and normalize a project: JSON text or an object in; a frozen,
+ * normalized project out. A malformed envelope is `JS0001`; a duplicate
+ * file name is `JS0002`.
+ * @param {string | object} input
+ * @returns {any}
+ */
+export function parseProject(input) {
+  let doc;
+  if (typeof input === 'string') {
+    try { doc = JSON.parse(input); }
+    catch (cause) {
+      throw new StudioError('JS0001',
+        `the project is not valid JSON: ${String(/** @type {any} */ (cause)?.message ?? cause)}`,
+        '', { cause });
+    }
+  }
+  else doc = input;
+
+  const outcome = validateEnvelope(doc);
+  const valid = typeof outcome === 'object' && outcome !== null ? outcome.valid : outcome === true;
+  if (!valid) {
+    const errors = (typeof outcome === 'object' && outcome !== null ? outcome.errors : null) ?? [];
+    throw new StudioError('JS0001',
+      `the project does not validate against jaren-project (${errors.length} error${errors.length === 1 ? '' : 's'})`,
+      errors[0]?.instancePath ?? '');
+  }
+
+  const names = new Set();
+  for (const file of doc.files) {
+    if (names.has(file.name))
+      throw new StudioError('JS0002', `two files are named '${file.name}'`, '/files');
+    names.add(file.name);
+  }
+
+  const active = typeof doc.active === 'string' && names.has(doc.active)
+    ? doc.active
+    : (doc.files[0]?.name ?? null);
+  return Object.freeze({
+    project: doc.project,
+    files: Object.freeze(doc.files.map((f) => Object.freeze({ ...f }))),
+    active,
+    layout: Object.freeze({ ...LAYOUT_DEFAULT, ...doc.layout }),
+  });
+}
+
+/**
+ * The file with this name, or `null`.
+ * @param {any} project
+ * @param {string} name
+ */
+export function fileOf(project, name) {
+  return project.files.find((f) => f.name === name) ?? null;
+}

package/src/validate.js

@@ -0,0 +1,191 @@
+//@ts-check
+/**
+ * @file Per-file validation — the honest heart of the per-file design.
+ * `validateFile(file)` dispatches on the file's kind and validates its
+ * `text` against THAT kind's grammar (never one composed mega-schema):
+ *
+ *  - `app`    → the composed jaren-app meta-schema (which `$ref`s the
+ *               query + JSLT grammars) PLUS a headless render audit (a
+ *               document that validates but throws on its first frame is
+ *               still broken);
+ *  - `jslt` / `query` → COMPILED by the engine WITH the operator registry,
+ *               so host-registered operators ($npv, $sqrt) validate and a
+ *               real error comes back as its own coded `JQ`/`JT` code with
+ *               a docPath — the closed grammar would reject the operators;
+ *  - `fsm` / `dag` / `model` → their published grammar (structural);
+ *  - `schema` → compiled as a JSON Schema (is it well-formed?);
+ *  - `state` / `data` → any JSON (structural only).
+ *
+ * Every result is `{ valid, kind, total, errors: [{ code, message,
+ * docPath }] }` — the shape the IDE's docked error strip reads.
+ */
+
+import { createWeakCache } from '@jarenjs/core/cache';
+import { JarenValidator } from '@jarenjs/validate';
+import { createTypeTestCompiler } from '@jarenjs/validate/query';
+import { compileJsonQuery } from '@jarenjs/json';
+import {
+  compileJsltStylesheet, createJsltRegistry, mathPack, financePack, statsPack,
+} from '@jarenjs/json/jslt';
+
+import appSchema from '@jarenjs/app/schemas/jaren-app.schema.json' with { type: 'json' };
+import querySchema from '@jarenjs/json/schemas/jaren-query.schema.json' with { type: 'json' };
+import jsltSchema from '@jarenjs/json/schemas/jaren-jslt.schema.json' with { type: 'json' };
+import fsmSchema from '@jarenjs/flow/schemas/jaren-fsm.schema.json' with { type: 'json' };
+import dagSchema from '@jarenjs/flow/schemas/jaren-dag.schema.json' with { type: 'json' };
+import modelSchema from '@jarenjs/db/schemas/jaren-model.schema.json' with { type: 'json' };
+
+/** Errors kept per report: enough to repair, bounded for the IDE. */
+const MAX_ERRORS = 20;
+
+const compileTypeTest = createTypeTestCompiler();
+
+// the studio mounts the built-in operator packs so a query/jslt/data file
+// may compute with $npv/$sqrt/$mean/… (host opt-in; a plain compile would
+// reject them). A host embedding the studio can substitute its own via
+// `validateFile(file, { operators })`.
+const defaultRegistry = createJsltRegistry().use(mathPack).use(financePack).use(statsPack);
+const defaultRegistryOptions = defaultRegistry.toOptions();
+
+const validateApp = new JarenValidator({ skipErrors: false, collectErrors: true })
+  .addSchema(querySchema).addSchema(jsltSchema).compile(appSchema);
+const validateFsm = new JarenValidator({ skipErrors: false, collectErrors: true })
+  .addSchema(querySchema).compile(fsmSchema);
+const validateDag = new JarenValidator({ skipErrors: false, collectErrors: true })
+  .addSchema(querySchema).addSchema(jsltSchema).compile(dagSchema);
+const validateModel = new JarenValidator({ skipErrors: false, collectErrors: true })
+  .compile(modelSchema);
+
+/** @param {string} kind */
+const ok = (kind) => ({ valid: true, kind, total: 0, errors: [] });
+
+/** Normalize a JarenValidator failure into the studio error shape. */
+function schemaResult(kind, outcome) {
+  const valid = typeof outcome === 'object' && outcome !== null ? outcome.valid : outcome === true;
+  if (valid) return ok(kind);
+  const raw = (typeof outcome === 'object' && outcome !== null ? outcome.errors : null) ?? [];
+  return {
+    valid: false, kind, total: raw.length,
+    errors: raw.slice(0, MAX_ERRORS).map((e) => ({
+      code: null, message: e.message ?? 'invalid', docPath: e.instancePath ?? '',
+    })),
+  };
+}
+
+/** Run a compile and surface its throw as one coded error, or pass. */
+function compileResult(kind, run) {
+  try {
+    run();
+    return ok(kind);
+  }
+  catch (err) {
+    const e = /** @type {any} */ (err);
+    return {
+      valid: false, kind, total: 1,
+      errors: [{ code: e?.code ?? null, message: String(e?.message ?? err), docPath: e?.docPath }],
+    };
+  }
+}
+
+/**
+ * A headless render audit for an `app` document: compile the JSLT view
+ * and render its first frame over the state. A view that throws is a
+ * broken document even when the meta-schema passed it.
+ * @param {any} doc
+ */
+function auditAppView(doc) {
+  try {
+    compileJsltStylesheet(doc.view, { compileTypeTest, memo: false, ...defaultRegistryOptions })(doc.state ?? {});
+    return null;
+  }
+  catch (err) {
+    return `the view failed to render its first frame: ${String(/** @type {any} */ (err)?.message ?? err)}`;
+  }
+}
+
+/**
+ * Verdicts keyed by the FILE OBJECT: validating an `app` compiles its view
+ * and renders a first frame, so re-deriving the IDE view model on every
+ * render (a theme toggle, a keystroke elsewhere) would recompile the whole
+ * project — measured at ~110ms for a charts app. Files are immutable here
+ * (every edit lands as a fresh object through the patch engine, and an
+ * untouched file keeps its identity), so reference identity is a sound —
+ * and free — cache key. The inner map keys the registry, because the same
+ * file validates differently under a different operator vocabulary.
+ * @type {ReturnType<typeof createWeakCache<object, Map<any, any>>>}
+ */
+const verdicts = createWeakCache();
+
+/**
+ * Validate ONE file against its kind's grammar. Memoized on the file's
+ * identity; pass a fresh object to force a re-check.
+ * @param {{ name?: string, kind: string, text: string }} file
+ * @param {{ operators?: { toOptions: () => any } }} [options] - a host
+ *   operator registry for the `jslt`/`query` kinds (defaults to the
+ *   built-in math/finance/stats packs)
+ * @returns {{ valid: boolean, kind: string, total: number,
+ *   errors: Array<{ code: string | null, message: string, docPath?: string }> }}
+ */
+export function validateFile(file, options = {}) {
+  if (file === null || typeof file !== 'object') return validateFileUncached(file, options);
+  const byRegistry = verdicts.getOrCreate(file, () => new Map());
+  const registryKey = options.operators ?? null;
+  let verdict = byRegistry.get(registryKey);
+  if (verdict === undefined) {
+    verdict = validateFileUncached(file, options);
+    byRegistry.set(registryKey, verdict);
+  }
+  return verdict;
+}
+
+/**
+ * The validation itself — see `validateFile`, which memoizes it.
+ * @param {{ name?: string, kind: string, text: string }} file
+ * @param {{ operators?: { toOptions: () => any } }} [options]
+ */
+function validateFileUncached(file, options = {}) {
+  const kind = file.kind;
+  const registryOptions = options.operators ? options.operators.toOptions() : defaultRegistryOptions;
+
+  let doc;
+  try { doc = JSON.parse(file.text); }
+  catch (err) {
+    return {
+      valid: false, kind, total: 1,
+      errors: [{ code: null, message: `not valid JSON: ${String(/** @type {any} */ (err)?.message ?? err)}`, docPath: '' }],
+    };
+  }
+
+  switch (kind) {
+    case 'state':
+    case 'data':
+      return ok(kind); // any JSON value is a valid state/data file
+    case 'app': {
+      const structural = schemaResult(kind, validateApp(doc));
+      if (!structural.valid) return structural;
+      const problem = auditAppView(doc);
+      return problem === null
+        ? structural
+        : { valid: false, kind, total: 1, errors: [{ code: null, message: problem, docPath: '/view' }] };
+    }
+    case 'jslt':
+      return compileResult(kind, () => compileJsltStylesheet(doc, { compileTypeTest, ...registryOptions }));
+    case 'query':
+      return compileResult(kind, () => compileJsonQuery(doc, { compileTypeTest, ...registryOptions }));
+    case 'fsm':
+      return schemaResult(kind, validateFsm(doc));
+    case 'dag':
+      return schemaResult(kind, validateDag(doc));
+    case 'model':
+      return schemaResult(kind, validateModel(doc));
+    case 'schema':
+      // a JSON Schema is a boolean or an object; anything else is not a
+      // schema at all (the compiler is otherwise lenient about a schema's
+      // internals — the studio is a project IDE, not a schema linter)
+      if (typeof doc !== 'boolean' && (doc === null || typeof doc !== 'object' || Array.isArray(doc)))
+        return { valid: false, kind, total: 1, errors: [{ code: null, message: 'a JSON Schema must be an object or a boolean', docPath: '' }] };
+      return compileResult(kind, () => new JarenValidator().compile(doc));
+    default:
+      return { valid: false, kind, total: 1, errors: [{ code: null, message: `unknown file kind '${kind}'`, docPath: '' }] };
+  }
+}

package/styles/studio.css

@@ -0,0 +1,227 @@
+/* @jarenjs/studio — the IDE shell stylesheet.
+ *
+ * DESIGN.md-conformant: minmax(0,1fr) tracks with min-width:0 on every
+ * scrollable child, the established 1024/760 breakpoints and scroll-strip
+ * mobile pattern, the --space-N and --radius-N scales and theme tokens. The
+ * ONLY raw-hex family is the kind-badge palette — concrete constants
+ * (like the chart palettes), never aliased status tokens, and strictly
+ * blue / cyan / slate / green / amber (no purple, no pink). Colours are
+ * duplicated for .dark; a theme.js constants↔CSS-fallback sync pair is a
+ * later concern.
+ */
+
+.jstudio {
+  display: grid;
+  gap: var(--space-3, 0.75rem);
+  --js-ratio: 0.5;
+  /* rail | editor (the ratio share) | splitter | stage (the rest) — the
+     splitter widget drives --js-ratio live; the stage's 1fr absorbs the
+     gap/rounding so the panes stay proportional */
+  grid-template-columns: 11rem minmax(0, calc((100% - 12rem) * var(--js-ratio))) auto minmax(0, 1fr);
+  grid-template-areas:
+    "penbar penbar penbar penbar"
+    "rail   editor split  stage";
+  grid-template-rows: auto minmax(0, 1fr);
+  align-items: stretch;
+  min-height: 24rem;
+}
+.jstudio[data-mode="right"] { grid-template-areas: "penbar penbar penbar penbar" "rail stage split editor"; }
+.jstudio[data-mode="top"] {
+  grid-template-columns: 11rem minmax(0, 1fr);
+  grid-template-areas: "penbar penbar" "rail editor" "rail stage";
+  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.js-penbar {
+  grid-area: penbar; display: flex; align-items: center; gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 6px);
+  background: var(--surface, #fff);
+}
+.js-penname { color: var(--fg, #0f172a); }
+.js-savestate { color: var(--muted, #64748b); font-size: 0.8rem; }
+.js-spacer { flex: 1; }
+.js-filecount { font-size: 0.8rem; }
+
+.js-rail { grid-area: rail; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
+.js-editor { grid-area: editor; min-width: 0; display: flex; flex-direction: column; }
+.js-stage  { grid-area: stage;  min-width: 0; display: flex; flex-direction: column; }
+
+/* ——— file rail ——— */
+.js-file {
+  display: flex; align-items: center; gap: var(--space-2, 0.5rem);
+  width: 100%; border: none; background: transparent; cursor: pointer;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border-radius: var(--radius-sm, 6px); border-left: 2px solid transparent;
+  color: var(--muted, #64748b); font-size: 0.9rem; text-align: left;
+}
+.js-file.active { color: var(--fg, #0f172a); background: var(--accent-soft, #eff6ff); border-left-color: var(--accent, #2563eb); }
+.js-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.js-file-warn { color: var(--warn, #b45309); margin-left: auto; }
+
+/* a row is the select button + a delete affordance */
+.js-file-row { display: flex; align-items: center; gap: 2px; }
+.js-file-row .js-file { flex: 1; }
+.js-file-del {
+  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
+  color: var(--muted, #64748b); font-size: 1rem; line-height: 1;
+  padding: 2px 6px; border-radius: var(--radius-sm, 6px);
+}
+.js-file-del:hover { color: var(--fail, #dc2626); background: var(--fail-soft, #fef2f2); }
+
+/* add a file (rail head) */
+.js-addfile {
+  inline-size: 100%; margin-block-end: 4px; font-size: 0.8rem;
+  border: 1px dashed var(--border, #e2e8f0); border-radius: var(--radius-sm, 6px);
+  background: transparent; color: var(--muted, #64748b); padding: var(--space-1, 0.25rem);
+}
+
+/* the template gallery (pen bar) */
+.js-gallery { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.js-template {
+  border: 1px solid var(--border, #e2e8f0); background: var(--surface, #fff);
+  border-radius: 999px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; color: var(--fg, #0f172a);
+}
+.js-template:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
+
+/* the editable file name (editor head) */
+.js-editor-name {
+  border: none; background: transparent; font-family: var(--mono, monospace);
+  font-size: 0.8rem; color: var(--fg, #0f172a); padding: 2px 4px;
+  border-radius: var(--radius-sm, 6px); min-width: 0;
+}
+.js-editor-name:hover, .js-editor-name:focus-visible { background: var(--accent-soft, #eff6ff); outline: none; }
+
+.js-badge {
+  flex: 0 0 auto; font-size: 0.65rem; font-family: var(--mono, monospace);
+  padding: 1px 5px; border-radius: 999px; line-height: 1.4;
+}
+.js-badge[data-badge="view"]  { background: #e6efff; color: #1e40af; }
+.js-badge[data-badge="query"] { background: #e0f2fe; color: #0e7490; }
+.js-badge[data-badge="json"]  { background: #f1f5f9; color: #475569; }
+.js-badge[data-badge="model"] { background: #dcfce7; color: #15803d; }
+.js-badge[data-badge="flow"]  { background: #fef3c7; color: #b45309; }
+.dark .js-badge[data-badge="view"]  { background: #1e293b; color: #93c5fd; }
+.dark .js-badge[data-badge="query"] { background: #0c2a33; color: #67e8f9; }
+.dark .js-badge[data-badge="json"]  { background: #1e293b; color: #cbd5e1; }
+.dark .js-badge[data-badge="model"] { background: #0f2a1a; color: #86efac; }
+.dark .js-badge[data-badge="flow"]  { background: #2a2011; color: #fcd34d; }
+
+/* ——— editor ——— */
+.js-editor-head {
+  display: flex; align-items: center; gap: var(--space-2, 0.5rem);
+  border: 1px solid var(--border, #e2e8f0); border-bottom: none;
+  border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
+  background: var(--surface, #fff); padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+  font-family: var(--mono, monospace); font-size: 0.75rem; color: var(--muted, #64748b);
+}
+.js-editor-input {
+  flex: 1; min-height: 0; resize: none;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
+  font-family: var(--mono, monospace); font-size: 0.85rem;
+  padding: var(--space-2, 0.5rem); color: var(--fg, #0f172a); background: var(--surface, #fff);
+}
+/* a write landed while the buffer was dirty — the human's text is kept and
+   the incoming version stays one click away (never a silent clobber) */
+.js-conflict {
+  display: flex; align-items: center; gap: var(--space-2, 0.5rem); flex-wrap: wrap;
+  border: 1px solid var(--warn, #b45309); border-left-width: 4px;
+  border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
+  background: var(--warn-soft, #fffbeb); color: var(--warn, #b45309);
+  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem); font-size: 0.8rem;
+}
+.js-conflict-take {
+  border: 1px solid var(--warn, #b45309); background: transparent; cursor: pointer;
+  color: var(--warn, #b45309); border-radius: var(--radius-sm, 6px);
+  padding: 1px 8px; font-size: 0.75rem;
+}
+
+.js-errorstrip {
+  display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2, 0.5rem);
+}
+.js-errorline {
+  border: 1px solid var(--fail, #dc2626); border-left-width: 4px;
+  border-radius: var(--radius-sm, 6px); background: var(--fail-soft, #fef2f2); color: var(--fail, #dc2626);
+  font-family: var(--mono, monospace); font-size: 0.8rem;
+  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem); text-align: left; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
+}
+
+/* ——— stage ——— */
+.js-stage-head { font-family: var(--mono, monospace); font-size: 0.75rem; color: var(--muted, #64748b); padding-bottom: var(--space-2, 0.5rem); }
+.js-stage-mount { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-sm, 6px); padding: var(--space-3, 0.75rem); }
+.js-stage-fail { border-color: var(--fail, #dc2626); color: var(--fail, #dc2626); }
+.js-stage-result { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
+
+/* ——— the splitter (a pointer-capture widget; this is the grab bar) ——— */
+.js-split {
+  grid-area: split; align-self: stretch; justify-self: center;
+  inline-size: 10px; padding: 0; border: none; background: transparent;
+  cursor: col-resize; touch-action: none; z-index: 1;
+}
+.js-split::before {
+  content: ""; display: block; inline-size: 4px; block-size: 100%;
+  margin-inline: auto; background: var(--border, #e2e8f0); border-radius: 2px;
+}
+.js-split:hover::before, .js-split:focus-visible::before { background: var(--accent, #2563eb); }
+.js-split:focus-visible { outline: none; }
+/* the stacked layout splits by rows; the horizontal handle is hidden there */
+.jstudio[data-mode="top"] .js-split { display: none; }
+
+/* the phone pane switcher exists only below the breakpoint */
+.js-panebar { display: none; }
+
+/* ——— responsive: ONE pane at a time behind the segmented switcher ———
+ * A phone never stacks rail + editor + stage into a tall scroll: the
+ * grid becomes one column with a switcher row, and the two unselected
+ * panes are hidden by attribute-scoped rules. The panes stay MOUNTED,
+ * so a hidden editor keeps its caret, its scroll and its undo stack,
+ * and switching costs one attribute write on `.jstudio`.
+ */
+@media (max-width: 1024px) {
+  .jstudio, .jstudio[data-mode="right"], .jstudio[data-mode="top"] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "penbar" "panes" "rail" "editor" "stage";
+  }
+  .js-panebar { display: flex; grid-area: panes; align-self: start; }
+  .js-panebar .seg-btn { flex: 1; }
+  .jstudio[data-pane="files"]  .js-editor,
+  .jstudio[data-pane="files"]  .js-stage,
+  .jstudio[data-pane="editor"] .js-rail,
+  .jstudio[data-pane="editor"] .js-stage,
+  .jstudio[data-pane="stage"]  .js-rail,
+  .jstudio[data-pane="stage"]  .js-editor { display: none; }
+  /* the drag splitter and the three-way layout switcher both divide a
+     screen showing TWO panes; neither has meaning here, and the
+     splitter's `grid-area: split` no longer exists in this template */
+  .js-split, .js-layout { display: none; }
+  /* the keyboard seam: the editor pane reserves the published inset as
+     scroll room, so the caret clears the on-screen keyboard */
+  .js-editor { padding-bottom: var(--kb-inset, 0px); }
+  /* The pen bar is a single centred row on a desktop. On a phone that row
+     has no width to give, so the template gallery wrapped into a tower of
+     chips down the middle of the bar and pushed the file count and Run out
+     to the sides — 236px of chrome above a 350px-wide editor. It becomes
+     two honest rows instead: the identity line, then the gallery as a
+     horizontal scroll strip (the suite's mobile pattern), with the
+     desktop-only spacer switched off so nothing is flung to the edges. */
+  .js-penbar { flex-wrap: wrap; }
+  .js-spacer { display: none; }
+  .js-gallery {
+    inline-size: 100%; order: 1; flex-wrap: nowrap;
+    overflow-x: auto; scrollbar-width: none;
+    mask-image: linear-gradient(90deg, #000 92%, transparent);
+  }
+  .js-template { flex: none; white-space: nowrap; }
+  /* touch targets: rows, segments and pen-bar buttons are finger-sized */
+  .js-file, .js-file-del, .js-addfile, .js-template,
+  .jstudio .seg-btn, .js-penbar .btn { min-height: 44px; }
+}
+@media (max-width: 760px) {
+  /* the rail was a horizontal scroll strip while it sat stacked ABOVE
+     the editor and had to stay compact. As its own full pane it is a
+     plain vertical list again — the whole screen is the file list */
+  .js-file-name { white-space: normal; overflow-wrap: anywhere; }
+}