animl 0.0.0-stage → 0.1.1

package/packages/markup/src/components.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/components/markup/index.js';

package/packages/markup/src/components.js

@@ -0,0 +1 @@
+export * from "../../../modules/components/markup/index.js";

package/packages/markup/src/contour.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/contour/markup/index.js';

package/packages/markup/src/contour.js

@@ -0,0 +1 @@
+export * from "../../../modules/contour/markup/index.js";

package/packages/markup/src/convert.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/convert/markup/index.js';

package/packages/markup/src/convert.js

@@ -0,0 +1 @@
+export * from "../../../modules/convert/markup/index.js";

package/packages/markup/src/data-artboard.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/data-artboard/markup/index.js';

package/packages/markup/src/data-artboard.js

@@ -0,0 +1 @@
+export * from "../../../modules/data-artboard/markup/index.js";

package/packages/markup/src/data.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/data/markup/index.js';

package/packages/markup/src/data.js

@@ -0,0 +1 @@
+export * from "../../../modules/data/markup/index.js";

package/packages/markup/src/decompile.d.ts

@@ -0,0 +1,2 @@
+/** Canonical AniML for a valid compiled document; no defaults are materialised. */
+export declare function decompile(doc: string | object): string;

package/packages/markup/src/decompile.js

@@ -0,0 +1,278 @@
+import { elementFields, compoundField } from "./fields.js";
+import { motionCompiler, eventsCompiler, dataCompiler, convertCompiler } from "./module-hooks.js";
+import { parseXml, xmlChars } from "./xml.js";
+import { ELEMENTS, markupName } from "animl";
+import { markupAddress, nodeAttrs } from "./names.js";
+import { render } from "./layout.js";
+const obj = (v) => v ?? {};
+const entries = (v) => Object.entries(obj(v)).filter(([k]) => k !== "$comment");
+const value = (v) => Array.isArray(v) ? v.map(value).join(" ") : typeof v === "string" ? v : JSON.stringify(v);
+function decompile(doc) {
+  const d = obj(typeof doc === "string" ? JSON.parse(doc) : doc);
+  const types = /* @__PURE__ */ new Map();
+  const visit = (nodes) => {
+    for (const v of nodes ?? []) {
+      types.set(v.id, v.type);
+      visit(v.children);
+    }
+  };
+  visit(d.nodes);
+  const address = (s) => markupAddress(s, (id) => types.get(id));
+  const element = (name, o, keys, extra = []) => ({
+    name,
+    attrs: [
+      ...extra,
+      ...(elementFields(name).length && name !== "anima" ? elementFields(name).map((f) => f.key) : keys).filter((k) => o[k] !== void 0).map((k) => [
+        elementFields(name).find((f) => f.key === k)?.attr ?? k,
+        compoundField(elementFields(name).find((f) => f.key === k)?.shape ?? { k: "str" }) && k !== "set" && !["fire", "toggle"].includes(k) ? JSON.stringify(o[k]) : k === "when" ? value(o[k]).replace(/("(?:[^"\\]|\\.)*")|&&/g, (_, q) => q ?? "and") : k === "set" ? entries(o[k]).map(([n, v]) => `${n}=${value(v)}`).join(" ") : value(o[k])
+      ])
+    ],
+    children: typeof o.$comment === "string" ? [{ comment: ` ${o.$comment} ` }] : []
+  });
+  const node = (n) => {
+    const el = element(n.type, n, ["id"]);
+    el.children.push(...motionCompiler.channels?.(n) ?? []);
+    for (const a of nodeAttrs(n.type)) {
+      if (typeof n[a.path[0]] === "object" && Object.values(ELEMENTS).some(
+        (f) => f.target?.default === a.path[0] && (f.target.mapKey || f.target.array && !f.target.wrapper)
+      ))
+        continue;
+      let v = n;
+      for (const key of a.path) v = obj(v)[key];
+      if (a.index !== void 0 && v !== void 0) v = v[a.index];
+      if (v !== void 0)
+        el.attrs.push([
+          a.attr,
+          ["obj", "map", "any", "alt"].includes(a.shape.k) ? JSON.stringify(v) : value(v)
+        ]);
+    }
+    const structural = (name, data) => {
+      const form = ELEMENTS[name];
+      const child = element(name, data, []);
+      for (const [k, s] of Object.entries(form.shape.p)) {
+        if (data[k] === void 0) continue;
+        if (s.k === "arr" && s.of.element)
+          child.children.push(...data[k].map((v) => structural(s.of.element, v)));
+        else if (s.k === "obj" && s.element)
+          child.children.push(structural(s.element, obj(data[k])));
+        else
+          child.attrs.push([
+            markupName(s, k),
+            ["fill", "stroke"].includes(k) && s.k === "obj" && Object.keys(obj(data[k])).length === 1 ? value(obj(data[k]).color) : s.k === "alt" && !(s.of.some((v) => v.k === "bool") && s.of.some((v) => v.k === "str")) ? JSON.stringify(data[k]) : value(data[k])
+          ]);
+      }
+      return child;
+    };
+    const arrays = /* @__PURE__ */ new Set();
+    const rank = (form) => form.target && (form.target.mapKey || form.target.array && !form.target.wrapper) ? Object.keys(n).indexOf(form.target.default) : -1;
+    for (const [name, form] of Object.entries(ELEMENTS).sort((a, b) => rank(a[1]) - rank(b[1]))) {
+      if (!form.target) continue;
+      for (const key of form.target.choices) {
+        if (n[key] === void 0) continue;
+        if (form.target.array) {
+          if (!Array.isArray(n[key])) continue;
+          if (arrays.has(key)) continue;
+          arrays.add(key);
+          for (const entry of n[key])
+            for (const [childName, childForm] of Object.entries(ELEMENTS)) {
+              if (!childForm.target?.array || !childForm.target.choices.includes(key)) continue;
+              const data2 = entry[childForm.target.wrapper];
+              if (data2) el.children.push(structural(childName, obj(data2)));
+              else if (!childForm.target.wrapper && Object.entries(childForm.values ?? {}).every(([k, v]) => entry[k] === v)) {
+                el.children.push(structural(childName, entry));
+                break;
+              }
+            }
+          continue;
+        }
+        if (form.target.mapKey) {
+          for (const [id, style] of entries(n[key]))
+            el.children.push(structural(name, { ...obj(style), [form.target.mapKey]: id }));
+          continue;
+        }
+        const target = (form.target.path ?? []).reduce((v, part) => obj(v)[part], n[key]);
+        if (target === void 0) continue;
+        const data = obj(target);
+        if (!Object.entries(form.values ?? {}).every(([k, v]) => data[k] === v)) continue;
+        const child = structural(name, data);
+        if (key !== form.target.default) child.attrs.unshift([form.target.attribute, key]);
+        el.children.push(child);
+      }
+    }
+    if (n.type === "instance")
+      el.attrs.push(...entries(n.inputs).map(([key, v]) => [key, value(v)]));
+    el.children.push(...(n.children ?? []).map(node));
+    return el;
+  };
+  const root = element(
+    "anima",
+    d,
+    ["name", "title", "grid", "viewBox", "requires"],
+    [["version", value(d.anima)], ...dataCompiler.rootAttrs?.(d) ?? []]
+  );
+  for (const f of elementFields("anima"))
+    if (d[f.key] !== void 0 && !Object.values(ELEMENTS).some((form) => form.root === f.key))
+      root.attrs.push([
+        f.attr,
+        ["obj", "map", "arr", "alt"].includes(f.shape.k) ? JSON.stringify(d[f.key]) : value(d[f.key])
+      ]);
+  const groups = [];
+  if (d.meta !== void 0) {
+    const meta = element("meta", {}, []);
+    meta.children.push({ text: JSON.stringify(obj(d.meta)) });
+    groups.push([meta]);
+  }
+  groups.push(
+    entries(d.colors).map(
+      ([name, v]) => element(
+        "color",
+        {},
+        [],
+        [
+          ["name", name],
+          ["value", value(v)]
+        ]
+      )
+    )
+  );
+  groups.push(
+    entries(d.glyphs).map(
+      ([name, v]) => element("glyph", obj(v), ["d", "source", "pick", "sha256"], [["name", name]])
+    )
+  );
+  groups.push(
+    entries(d.assets).map(([name, v]) => {
+      const a = obj(v);
+      return element(
+        "asset",
+        a,
+        Object.keys(ELEMENTS.asset.shape.p).filter((k) => !["name", "source"].includes(k)),
+        [
+          ["name", name],
+          ["src", value(a.source)]
+        ]
+      );
+    })
+  );
+  groups.push(
+    d.a11y ? [element("a11y", obj(d.a11y), ["role", "label", "activate", "pressed", "held"])] : []
+  );
+  groups.push(
+    entries(d.inputs).map(
+      ([name, v]) => element(obj(v).type, obj(v), ["default", "min", "max", "buffer"], [["name", name]])
+    )
+  );
+  groups.push(d.hit ? [element("hit", obj(d.hit), ["circle", "rect"])] : []);
+  groups.push(
+    entries(d.components).map(([name, component]) => {
+      const nested = obj(component);
+      const xml = decompile({ anima: "0.1", name: "component", ...nested });
+      const parsed = parseXml(xml).doc.root;
+      const convert = (el2) => ({
+        name: el2.name,
+        attrs: el2.attrs.filter((a) => el2 !== parsed || !["version", "name", "requires"].includes(a.name)).map((a) => [a.name, a.value]),
+        children: el2.children.flatMap(
+          (c) => c.kind === "element" ? [convert(c)] : c.kind === "text" && c.value.trim() ? [{ text: c.value.trim() }] : []
+        )
+      });
+      const el = convert(parsed);
+      el.name = "component";
+      el.attrs.unshift(["name", name]);
+      return el;
+    })
+  );
+  for (const [name, form] of Object.entries(ELEMENTS))
+    if (form.root && form.mapKey)
+      groups.push(
+        entries(d[form.root]).map(([id, style]) => {
+          const o = { ...obj(style), [form.mapKey]: id };
+          return element(
+            name,
+            o,
+            Object.keys(o).map((k) => k)
+          );
+        })
+      );
+  groups.push((d.nodes ?? []).map(node));
+  groups.push(
+    entries(d.timelines).map(([name, v]) => {
+      const t = obj(v);
+      const el = element("timeline", t, [], [["name", name]]);
+      for (const [target, keys] of entries(t.tracks)) {
+        const track = element("track", {}, [], [["target", address(target)]]);
+        track.children.push({
+          text: keys.map(
+            (k) => k.map(
+              (v2, i) => i === 1 && (typeof v2 === "string" || Array.isArray(v2)) ? JSON.stringify(v2) : value(v2)
+            ).join(" ")
+          ).join("\n")
+        });
+        el.children.push(track);
+      }
+      el.children.push(
+        ...(t.events ?? []).map(
+          ([at, name2]) => element("event", { at, name: name2 }, ["at", "name"])
+        )
+      );
+      return el;
+    })
+  );
+  const machineLayers = (machine) => entries(obj(machine).layers).map(([name, v]) => {
+    const l = obj(v);
+    const el = element("layer", l, [], [["name", name]]);
+    for (const [name2, v2] of entries(l.states)) {
+      const s = obj(v2);
+      const state = element("state", s, [], [["name", name2]]);
+      if (s.pose !== void 0)
+        state.children.push(
+          element(
+            "pose",
+            obj(s.pose),
+            [],
+            entries(s.pose).map(([k, v3]) => [
+              address(k),
+              typeof v3 === "string" && !k.endsWith(".d") ? JSON.stringify(v3) : value(v3)
+            ])
+          )
+        );
+      state.children.push(...(s.on ?? []).map((on) => element("on", on, [])));
+      el.children.push(state);
+    }
+    return el;
+  });
+  groups.push(eventsCompiler.definitions?.(d) ?? []);
+  groups.push(dataCompiler.definitions?.(d) ?? []);
+  groups.push(convertCompiler.definitions?.(d) ?? []);
+  groups.push(machineLayers(d.machine));
+  groups.push(
+    entries(d.machines).map(([name, machine]) => ({
+      name: "machine",
+      attrs: [["name", name]],
+      children: machineLayers(machine)
+    }))
+  );
+  groups.push((d.listeners ?? []).map((l) => element("listener", l, [])));
+  groups.push(
+    entries(d.bind).map(
+      ([target, v]) => element(
+        "bind",
+        {},
+        [],
+        [
+          ["target", address(target)],
+          ...Object.entries(typeof v === "string" ? { value: v } : v).map(
+            ([k, v2]) => [k, k === "options" ? JSON.stringify(v2) : String(v2)]
+          )
+        ]
+      )
+    )
+  );
+  for (const group of groups.filter((g) => g.length)) {
+    group[0].blank = root.children.length > 0;
+    root.children.push(...group);
+  }
+  return xmlChars(render(root)) + "\n";
+}
+export {
+  decompile
+};

package/packages/markup/src/events.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/events/markup/index.js';

package/packages/markup/src/events.js

@@ -0,0 +1 @@
+export * from "../../../modules/events/markup/index.js";

package/packages/markup/src/fields.d.ts

@@ -0,0 +1,7 @@
+import { type Shape } from 'animl';
+export declare function elementFields(name: string): {
+    key: string;
+    attr: string;
+    shape: Shape;
+}[];
+export declare const compoundField: (s: Shape) => boolean;

package/packages/markup/src/fields.js

@@ -0,0 +1,15 @@
+import { DOC, markupName } from "animl";
+function elementFields(name) {
+  const doc = DOC;
+  const layer = doc.p.machine.p.layers.of;
+  const state = layer.p.states.of;
+  const shape = name === "state" ? state : name === "on" ? state.p.on.of : name === "layer" ? layer : name === "timeline" ? doc.p.timelines.of : name === "listener" ? doc.p.listeners.of : name === "anima" ? doc : void 0;
+  return Object.entries(shape?.p ?? {}).filter(
+    ([key, s]) => name === "anima" ? !!s.feature && (["num", "bool", "str"].includes(s.k) || !!s.markup && !s.element) : !{ state: ["pose", "on"], layer: ["states"], timeline: ["tracks", "events"] }[name]?.includes(key)
+  ).map(([key, shape2]) => ({ key, attr: markupName(shape2, key), shape: shape2 }));
+}
+const compoundField = (s) => ["obj", "map", "any", "arr", "alt"].includes(s.k);
+export {
+  compoundField,
+  elementFields
+};

package/packages/markup/src/focus.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/focus/markup/index.js';

package/packages/markup/src/focus.js

@@ -0,0 +1 @@
+export * from "../../../modules/focus/markup/index.js";

package/packages/markup/src/fonts.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/fonts/markup/index.js';

package/packages/markup/src/fonts.js

@@ -0,0 +1 @@
+export * from "../../../modules/fonts/markup/index.js";

package/packages/markup/src/format.d.ts

@@ -0,0 +1,6 @@
+import type { MarkupDiagnostic } from './index.js';
+/** Layout-only formatting: retain order, comments, values, and the author's track style. */
+export declare function formatMarkup(source: string): {
+    text?: string;
+    diagnostics: MarkupDiagnostic[];
+};

package/packages/markup/src/format.js

@@ -0,0 +1,59 @@
+import { render } from "./layout.js";
+import { parseXml } from "./xml.js";
+function formatMarkup(source) {
+  const { doc, errors } = parseXml(source);
+  if (errors.length)
+    return {
+      diagnostics: errors.map((e) => ({
+        code: "markup-syntax",
+        severity: "error",
+        pointer: "",
+        message: e.message,
+        line: e.at.line,
+        column: e.at.col
+      }))
+    };
+  const convert = (el) => {
+    const out = {
+      name: el.name,
+      attrs: el.attrs.map((a) => [a.name, a.value]),
+      children: []
+    };
+    const cs = el.children;
+    if ((el.name === "track" || el.name === "meta") && cs.some((c, i) => {
+      const a = cs[i - 1], b = cs[i + 1];
+      return c.kind === "comment" && a?.kind === "text" && b?.kind === "text" && !!a.value.trim() && !!b.value.trim() && (el.name === "meta" || !(/[;\n\r]\s*$/.test(a.value) || /^\s*[;\n\r]/.test(b.value)));
+    })) {
+      out.children.push({
+        raw: cs.map((c) => c.kind === "text" ? c.raw : c.kind === "comment" ? `<!--${c.value}-->` : "").join("")
+      });
+      return out;
+    }
+    let blank = false;
+    for (const c of el.children) {
+      if (c.kind === "text" && !c.value.trim()) {
+        blank ||= /\n\s*\n/.test(c.value);
+        continue;
+      }
+      if (c.kind === "element") out.children.push({ ...convert(c), blank });
+      else if (c.kind === "comment") out.children.push({ comment: c.value, blank });
+      else out.children.push({ text: c.value });
+      blank = false;
+    }
+    return out;
+  };
+  const root = doc.root;
+  const before = doc.outer.filter((c) => c.at.offset < root.at.offset);
+  const after = doc.outer.filter((c) => c.at.offset > root.at.offset);
+  return {
+    text: [
+      ...before.map((c) => `<!--${c.value}-->`),
+      render(convert(root)),
+      ...after.map((c) => `<!--${c.value}-->`)
+    ].join("\n") + "\n",
+    diagnostics: []
+  };
+}
+export {
+  formatMarkup
+};

package/packages/markup/src/ik.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/ik/markup/index.js';

package/packages/markup/src/ik.js

@@ -0,0 +1 @@
+export * from "../../../modules/ik/markup/index.js";

package/packages/markup/src/index.d.ts

@@ -0,0 +1,44 @@
+import 'animl/all';
+import './libraries.js';
+import type { Diagnostic } from 'animl';
+import type { Pos } from './xml.js';
+export { parseXml, escapeAttr, escapeText, type Attr, type Child, type Comment, type Element, type Pos, type Text, type XmlDocument, type XmlError, } from './xml.js';
+/** A diagnostic against the markup: the `.ani` fields plus where in the `.animl` file it is. */
+export interface MarkupDiagnostic extends Diagnostic {
+    /** 1-based position in the markup; absent only when nothing in the markup can be blamed. */
+    line?: number;
+    column?: number;
+    /** The file name given to `compile`, if any. */
+    file?: string;
+    related?: {
+        file?: string;
+        line: number;
+        column: number;
+    }[];
+}
+export interface CompileOptions {
+    /** Read a normalised import path; throw when unavailable. */
+    resolve?: (path: string) => string;
+    /** File name to put on diagnostics. */
+    file?: string;
+    /** Run the strict `.ani` loader on the result and map its diagnostics (default true). */
+    validate?: boolean;
+}
+export interface CompileResult {
+    /** The compiled `.ani` document (keys in canonical order); absent when there are errors. */
+    doc?: Record<string, unknown>;
+    /** The compiled document as canonical `.ani` text (`formatAni`); absent when there are errors. */
+    text?: string;
+    /** Markup errors (spec/ANIML.md §7) and the loader's diagnostics, mapped to markup positions. */
+    diagnostics: MarkupDiagnostic[];
+    /** Source map: compiled JSON pointer → the markup position that produced it. */
+    map: Map<string, Pos>;
+}
+/** Compile AniML to `.ani` (spec/ANIML.md §7). Never throws on bad input. */
+export { compile } from './compile.js';
+/** Canonical AniML for a compiled document (spec/ANIML.md §8). `doc` may be text or parsed. */
+export { decompile } from './decompile.js';
+/** Reformat AniML in the canonical layout, keeping comments, element order and named eases. */
+export { formatMarkup } from './format.js';
+export { compileAsync } from './async.js';
+export { importPath } from './libraries.js';

package/packages/markup/src/index.js

@@ -0,0 +1,22 @@
+import "animl/all";
+import "./libraries.js";
+import {
+  parseXml,
+  escapeAttr,
+  escapeText
+} from "./xml.js";
+import { compile } from "./compile.js";
+import { decompile } from "./decompile.js";
+import { formatMarkup } from "./format.js";
+import { compileAsync } from "./async.js";
+import { importPath } from "./libraries.js";
+export {
+  compile,
+  compileAsync,
+  decompile,
+  escapeAttr,
+  escapeText,
+  formatMarkup,
+  importPath,
+  parseXml
+};

package/packages/markup/src/input.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/input/markup/index.js';

package/packages/markup/src/input.js

@@ -0,0 +1 @@
+export * from "../../../modules/input/markup/index.js";

package/packages/markup/src/layout.d.ts

@@ -0,0 +1,22 @@
+export interface LayoutElement {
+    name: string;
+    attrs: [string, string][];
+    children: LayoutChild[];
+    blank?: boolean;
+}
+export type LayoutChild = LayoutElement | {
+    comment: string;
+    blank?: boolean;
+} | {
+    text: string;
+}
+/** Source content kept verbatim (already escaped). */
+ | {
+    raw: string;
+};
+export declare const ATTR_ORDER: Record<string, string[]>;
+export declare function attrOrder(name: string): string[];
+/** Split only the first two columns: ease arguments may themselves contain spaces. */
+export declare function keyColumns(text: string): string[][];
+export declare function alignedKeys(rows: string[][], widths?: number[]): string;
+export declare function render(el: LayoutElement, depth?: number): string;

package/packages/markup/src/layout.js

@@ -0,0 +1,117 @@
+import { dataCompiler } from "./module-hooks.js";
+import { elementFields } from "./fields.js";
+import { ELEMENTS, markupName } from "animl";
+import { NODE_ELEMENTS, nodeAttrs } from "./names.js";
+import { escapeAttr, escapeText } from "./xml.js";
+const ATTR_ORDER = {
+  component: ["name", "grid", "viewBox"],
+  anima: ["version", "name", "title", "grid", "viewBox", "requires", "xmlns"],
+  meta: [],
+  color: ["name", "value"],
+  glyph: ["name", "d", "source", "pick", "sha256"],
+  a11y: ["role", "label", "activate", "pressed", "held"],
+  bool: ["name", "default"],
+  number: ["name", "default", "min", "max"],
+  trigger: ["name", "buffer"],
+  hit: ["circle", "rect"],
+  ease: ["name", "curve"],
+  timeline: ["name", "duration", "loop", "reducedMotion"],
+  track: ["target"],
+  event: ["at", "name"],
+  layer: ["name", "initial"],
+  state: ["name", "play", "speed", "emit"],
+  on: ["when", "to", "blend", "ease", "interruptible"],
+  listener: ["on", "target", "hitPadding", "fire", "set", "toggle", "emit"]
+};
+function attrOrder(name) {
+  return [.../* @__PURE__ */ new Set([...baseAttrOrder(name), ...dataCompiler.attributes?.(name) ?? []])];
+}
+function baseAttrOrder(name) {
+  const fields = elementFields(name);
+  if (fields.length)
+    return [
+      ...name === "anima" ? ATTR_ORDER.anima : ["timeline", "state", "layer"].includes(name) ? ["name"] : [],
+      ...fields.map((f) => f.attr)
+    ];
+  const form = ELEMENTS[name];
+  if (form)
+    return [
+      ...ATTR_ORDER[name] ?? [],
+      ...form.target ? [form.target.attribute] : [],
+      ...Object.entries(form.shape.p).filter(([, s]) => !(s.k === "arr" && s.of.element) && !(s.k === "obj" && s.element)).map(([k, s]) => markupName(s, k))
+    ];
+  return NODE_ELEMENTS.includes(name) ? ["id", ...nodeAttrs(name).map((a) => a.attr)] : ATTR_ORDER[name] ?? [];
+}
+function keyColumns(text) {
+  return text.split(/[;\n\r]/).map((s) => s.trim()).filter(Boolean).map((s) => {
+    const m = /^(\S+)\s+("(?:\\.|[^"\\])*"|\S+)(?:\s+(.*))?$/.exec(s);
+    return m ? [m[1], m[2], ...m[3] ? [m[3]] : []] : [s];
+  });
+}
+function alignedKeys(rows, widths = [0, 0]) {
+  for (const row of rows)
+    for (let i = 0; i < 2; i++) widths[i] = Math.max(widths[i], row[i]?.length ?? 0);
+  return rows.map((row) => row.map((v, i) => i < row.length - 1 ? v.padEnd(widths[i] + 2) : v).join("")).join("\n");
+}
+function render(el, depth = 0) {
+  const indent = "  ".repeat(depth);
+  const order = attrOrder(el.name);
+  const rank = (key) => order.includes(key) ? order.indexOf(key) : order.length;
+  const attrs = [...el.attrs].sort((a, b) => rank(a[0]) - rank(b[0]));
+  let open = `${indent}<${el.name}`;
+  let continuation = false;
+  for (const [key, value] of attrs) {
+    const long = value.length > 80;
+    open += `${long || continuation ? `
+${indent}    ` : " "}${key}="${escapeAttr(value)}"`;
+    continuation = long;
+  }
+  if (!el.children.length) return open + "/>";
+  const [first] = el.children;
+  if (first && "raw" in first) return `${open}>${first.raw}</${el.name}>`;
+  const onlyText = el.children.every((c) => "text" in c);
+  if (onlyText) {
+    const text = el.children.map((c) => c.text).join("");
+    if (el.name === "track") {
+      const rows = keyColumns(text);
+      if (text.includes(";"))
+        return `${open}>${escapeText(rows.map((r) => r.join(" ")).join("; "))}</${el.name}>`;
+      const body2 = alignedKeys(rows).split("\n").map((s) => indent + "  " + escapeText(s)).join("\n");
+      return `${open}>
+${body2}
+${indent}</${el.name}>`;
+    }
+    return `${open}>${escapeText(text.trim())}</${el.name}>`;
+  }
+  const body = [];
+  const trackTexts = el.children.filter((c) => "text" in c);
+  const inlineTrack = el.name === "track" && trackTexts.some((c) => c.text.includes(";"));
+  const widths = [0, 0];
+  if (el.name === "track")
+    alignedKeys(
+      trackTexts.flatMap((c) => keyColumns(c.text)),
+      widths
+    );
+  for (const c of el.children) {
+    if (depth === 0 && "blank" in c && c.blank && body.length) body.push("");
+    if ("comment" in c) body.push(`${indent}  <!--${c.comment.replace(/-->/g, "-- >")}-->`);
+    else if ("text" in c) {
+      const text = el.name === "track" ? inlineTrack ? keyColumns(c.text).map((r) => r.join(" ")).join("; ") + (c !== trackTexts.at(-1) ? ";" : "") : alignedKeys(keyColumns(c.text), widths) : c.text.trim();
+      if (text) {
+        if (el.name === "track")
+          body.push(...text.split("\n").map((s) => indent + "  " + escapeText(s)));
+        else body.push(indent + "  " + escapeText(text));
+      }
+    } else if (!("raw" in c)) body.push(render(c, depth + 1));
+  }
+  return `${open}>
+${body.join("\n")}
+${indent}</${el.name}>`;
+}
+export {
+  ATTR_ORDER,
+  alignedKeys,
+  attrOrder,
+  keyColumns,
+  render
+};

package/packages/markup/src/libraries-async.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/markup-libraries/markup/async.js';

package/packages/markup/src/libraries-async.js

@@ -0,0 +1 @@
+export * from "../../../modules/markup-libraries/markup/async.js";

package/packages/markup/src/libraries.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/markup-libraries/markup/index.js';

package/packages/markup/src/libraries.js

@@ -0,0 +1 @@
+export * from "../../../modules/markup-libraries/markup/index.js";