animl 0.0.0-stage → 0.1.0

package/modules/layout/core/index.js

@@ -0,0 +1,439 @@
+import { drawFrame } from "../../../packages/core/src/draw.js";
+import { mul } from "../../../packages/core/src/geom.js";
+import { flatten, parsePath } from "../../../packages/core/src/path.js";
+import { nodePointer } from "../../components/core/node-pointer.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { entries, axes } from "./registry.js";
+import { arrange, edges, weight, clamp } from "./algorithm.js";
+import { after } from "../manifest.js";
+import { measureText, textSizing } from "../../text/core/index.js";
+import { reflow, validateReflow } from "./reflow.js";
+let geometryModules = /* @__PURE__ */ new Map();
+const states = /* @__PURE__ */ new WeakMap();
+let text;
+const drawn = (p, i) => states.get(p)?.drawn.get(i);
+function layoutBox(p, id, visual) {
+  const i = p.model.ids.get(id), box = i === void 0 ? void 0 : states.get(p)?.[visual ? "drawn" : "boxes"].get(i);
+  return box && { ...box };
+}
+function configuration(p, i) {
+  const n = p.model.nodes[i], container = n.type === "layout";
+  const read = (key) => p.prop(i, (container ? "" : "layout.") + key);
+  return {
+    mode: axes.map((a) => p.prop(i, "layout." + a) ?? read(a)),
+    min: axes.map(
+      (a) => Number(
+        p.prop(i, "layout.min" + a[0].toUpperCase() + a.slice(1)) ?? read("min" + a[0].toUpperCase() + a.slice(1)) ?? 0
+      )
+    ),
+    max: axes.map(
+      (a) => Number(
+        p.prop(i, "layout.max" + a[0].toUpperCase() + a.slice(1)) ?? read("max" + a[0].toUpperCase() + a.slice(1)) ?? Infinity
+      )
+    ),
+    margin: edges(p.prop(i, "layout.margin")).map((v, j) => p.num(i, "layout.margin." + j, v)),
+    align: String(p.prop(i, "layout.alignSelf") ?? ""),
+    display: p.prop(i, "layout.display")
+  };
+}
+function intrinsic(p, i) {
+  const n = p.model.nodes[i], r = n.raw, type = n.type;
+  if (type === "text") {
+    const width = p.prop(i, "layout.width"), max = p.prop(i, "layout.maxWidth");
+    const b = measureText(
+      p,
+      i,
+      typeof width === "number" ? width : typeof max === "number" ? max : void 0
+    );
+    return [b?.width ?? 0, b?.height ?? 0];
+  }
+  if (type === "instance") {
+    const c = p.nested?.players?.get(n.id)?.model ?? p.model.doc.components?.[r.component];
+    return c?.viewBox?.slice(2) ?? [c?.grid ?? 0, c?.grid ?? 0];
+  }
+  if (type === "image") {
+    const asset = p.model.doc.assets?.[p.prop(i, "asset")];
+    return [
+      p.prop(i, "layout.width") === "hug" ? asset?.width ?? p.num(i, "width", 0) : p.num(i, "width", asset?.width ?? 0),
+      p.prop(i, "layout.height") === "hug" ? asset?.height ?? p.num(i, "height", 0) : p.num(i, "height", asset?.height ?? 0)
+    ];
+  }
+  if (type === "rect") return [p.num(i, "w", 0), p.num(i, "h", 0)];
+  if (type === "circle" || type === "arc") return [2 * p.num(i, "r", 0), 2 * p.num(i, "r", 0)];
+  let outline;
+  for (const m of geometryModules.values())
+    if (m.name !== "layout" && (outline = m.outline?.(p, i))) break;
+  const points = (outline ?? (n.d ? flatten(parsePath(n.d)) : [])).flatMap((s) => s.pts);
+  return pathBox(points).slice(2);
+}
+function pathBox(points) {
+  const x = points.filter((_, k) => k % 2 === 0), y = points.filter((_, k) => k % 2 === 1), left = Math.min(...x), top = Math.min(...y);
+  return x.length ? [left, top, Math.max(...x) - left, Math.max(...y) - top] : [0, 0, 0, 0];
+}
+function resolveLayout(p) {
+  let state = states.get(p);
+  if (!state)
+    states.set(
+      p,
+      state = { boxes: /* @__PURE__ */ new Map(), drawn: /* @__PURE__ */ new Map(), signatures: /* @__PURE__ */ new Map(), measured: /* @__PURE__ */ new Map() }
+    );
+  const { boxes, signatures, measured } = state, natural = /* @__PURE__ */ new Map();
+  for (const [i, m] of measured) measured.set(i, measureText(p, i, m.width));
+  const update = (i, box) => {
+    const old = boxes.get(i);
+    if (!old || Object.keys(box).some((k) => box[k] !== old[k])) {
+      boxes.set(i, box);
+      p.drawVersions[i] = ++p.drawRevision;
+    }
+  };
+  const item = (i) => {
+    const c = configuration(p, i), size = natural.get(i) ?? intrinsic(p, i), m = measured.get(i);
+    if (m) size[1] = m.height;
+    return {
+      id: i,
+      ...c,
+      size: axes.map(
+        (_, a) => clamp(
+          typeof c.mode[a] === "number" ? c.mode[a] : size[a],
+          c.min[a],
+          c.max[a]
+        )
+      ),
+      baseline: p.model.nodes[i].type === "text" ? measured.get(i)?.baseline ?? measureText(p, i)?.baseline ?? size[1] : size[1]
+    };
+  };
+  const children = (i) => p.model.nodes[i].children.filter((k) => p.prop(k, "layout.display") !== "none");
+  const spacing = (i, key) => edges(p.prop(i, key)).map((v, j) => p.num(i, key + "." + j, v));
+  const settings = (i) => {
+    const direction = String(p.prop(i, "direction") ?? "row"), gap = p.prop(i, "gap") ?? 0;
+    return {
+      padding: spacing(i, "padding"),
+      direction,
+      gap: p.num(
+        i,
+        "gap." + (direction.startsWith("column") ? 0 : 1),
+        typeof gap === "number" ? gap : gap[direction.startsWith("column") ? 0 : 1] ?? gap[0]
+      ),
+      justify: String(p.prop(i, "justify") ?? "start"),
+      align: String(p.prop(i, "align") ?? "start")
+    };
+  };
+  let changed = true;
+  for (let pass = 0; changed && pass <= p.model.nodes.length; pass++) {
+    changed = false;
+    for (let i = p.model.nodes.length - 1; i >= 0; i--)
+      if (p.model.nodes[i].type === "layout") {
+        const s = settings(i), a = s.direction.startsWith("column") ? 1 : 0, b = 1 - a, items = children(i).map(item), size = [0, 0];
+        items.forEach((c2) => {
+          size[a] += c2.size[a] + c2.margin[a === 0 ? 1 : 0] + c2.margin[a === 0 ? 3 : 2];
+          size[b] = Math.max(
+            size[b],
+            c2.size[b] + c2.margin[b === 0 ? 1 : 0] + c2.margin[b === 0 ? 3 : 2]
+          );
+        });
+        if (a === 0) {
+          const baseline = items.filter((c2) => (c2.align || s.align) === "baseline");
+          size[1] = Math.max(
+            size[1],
+            Math.max(0, ...baseline.map((c2) => c2.margin[0] + c2.baseline)) + Math.max(0, ...baseline.map((c2) => c2.margin[2] + c2.size[1] - c2.baseline))
+          );
+        }
+        size[a] += Math.max(0, items.length - 1) * s.gap;
+        size[0] += s.padding[1] + s.padding[3];
+        size[1] += s.padding[0] + s.padding[2];
+        const c = configuration(p, i);
+        natural.set(
+          i,
+          size.map(
+            (v, k) => clamp(
+              p.layoutSize && p.model.nodes[p.model.nodes[i].parent]?.type !== "layout" ? p.layoutSize[k] : typeof c.mode[k] === "number" ? c.mode[k] : weight(c.mode[k]) && p.model.nodes[p.model.nodes[i].parent]?.type !== "layout" ? p.model.viewBox[k + 2] : v,
+              c.min[k],
+              c.max[k]
+            )
+          )
+        );
+      }
+    for (const [i, n] of p.model.nodes.entries())
+      if (n.type === "layout") {
+        const s = settings(i), items = children(i).map(item), assigned = boxes.get(i), size = n.parent >= 0 && p.model.nodes[n.parent].type === "layout" && assigned ? [assigned.width, assigned.height] : natural.get(i);
+        if (n.parent < 0 || p.model.nodes[n.parent].type !== "layout")
+          update(i, { x: p.num(i, "x", 0), y: p.num(i, "y", 0), width: size[0], height: size[1] });
+        const signature = JSON.stringify([items, size, s]);
+        if (signatures.get(i) === signature) continue;
+        signatures.set(i, signature);
+        const result = arrange(items, size, s.padding, s.direction, s.gap, s.justify, s.align);
+        items.forEach((c, k) => {
+          const box = result[k];
+          if (p.model.nodes[c.id].type === "text") {
+            const m = measureText(p, c.id, box.width);
+            const old = measured.get(c.id);
+            if (!old || old.height !== m.height || old.width !== m.width) changed = true;
+            measured.set(c.id, m);
+          }
+          update(c.id, box);
+        });
+        for (const k of n.children)
+          if (p.prop(k, "layout.display") === "none")
+            update(k, { x: 0, y: 0, width: 0, height: 0 });
+      }
+  }
+  state.drawn = layout.reflow?.(p, boxes) ?? boxes;
+}
+const layout = {
+  name: "layout",
+  after,
+  entries,
+  refresh: (p) => states.has(p) && resolveLayout(p),
+  init(registry, shared) {
+    geometryModules = registry;
+    if (V) {
+      layout.reflow = reflow;
+      layout.validateReflow = validateReflow;
+    }
+    text = registry.get("text");
+    const guard = registry.get("machine")?.entries.find((e) => e.target === "transition")?.shapes.guard;
+    if (guard)
+      for (const key of ["left", "right"]) {
+        const operand = guard.p[key];
+        if (operand?.k === "alt") {
+          for (const form of operand.of)
+            if (form.k === "obj") form.p.layout = { k: "str", feature: "layout" };
+        }
+      }
+    shared.Player.prototype.machineLayout = function(address) {
+      const dot = address.lastIndexOf("."), box = layoutBox(this, address.slice(0, dot));
+      return box?.[address.slice(dot + 1)] ?? 0;
+    };
+    if (!shared.Player.prototype.layoutBox) {
+      const values = shared.Player.prototype.values;
+      shared.Player.prototype.values = function() {
+        const result = values.call(this);
+        for (const [i, box] of states.get(this)?.boxes ?? [])
+          for (const [key, value] of Object.entries(box))
+            result[this.model.nodes[i].id + ".layoutBox." + key] = value;
+        return result;
+      };
+      shared.Player.prototype.drawnLayoutBox = function(id) {
+        return layoutBox(this, id, true);
+      };
+      shared.Player.prototype.layoutBox = function(id) {
+        return layoutBox(this, id);
+      };
+    }
+    return layout;
+  },
+  model(n, key) {
+    const prefix = key.startsWith("layout.") ? "layout." : "", field = key.slice(prefix.length);
+    if (!prefix && n.type !== "layout") return;
+    const raw = prefix ? n.raw.layout : n.raw;
+    if (prefix && field === "display")
+      return {
+        prop: { type: "string", feature: "layout", discrete: true },
+        rest: raw?.display ?? "flex"
+      };
+    const match = /^(width|height|gap|padding|margin|corners|minWidth|minHeight|maxWidth|maxHeight)(?:\.([0-3]))?$/.exec(
+      field
+    );
+    if (!match || match[2] !== void 0 && (!["gap", "padding", "margin"].includes(match[1]) || match[1] === "gap" && +match[2] > 1))
+      return;
+    let rest = raw?.[match[1]];
+    if (match[2] !== void 0) rest = edges(rest)[+match[2]];
+    if (rest === void 0) rest = 0;
+    if (typeof rest !== "number") rest = 0;
+    return {
+      prop: { type: "number", min: match[1] === "margin" ? void 0 : 0, feature: "layout" },
+      rest
+    };
+  },
+  value(addr, value) {
+    if (addr.prop.feature === "layout" && addr.prop.type === "string" && (value === "none" || value === "flex"))
+      return value;
+  },
+  load(model, _raw, d) {
+    if (!model.doc.requires?.includes("layout")) return;
+    layout.validateReflow?.(model, d);
+    if (V) {
+      for (const [i, n] of model.nodes.entries())
+        if (n.type === "layout") {
+          const pointer = nodePointer(model, i), index = d.list.findIndex((v) => v.code === "no-paint" && v.pointer === pointer);
+          if (index >= 0) d.list.splice(index, 1);
+        }
+    }
+    if (V)
+      for (const [name, layer] of Object.entries(model.doc.machine?.layers ?? {}))
+        for (const [state, s] of Object.entries(layer.states))
+          for (const [i, t] of (s.on ?? []).entries())
+            for (const key of ["left", "right"]) {
+              const target = t.guard?.[key]?.layout;
+              if (target !== void 0) {
+                const match = /^([^.]+)\.(x|y|width|height)$/.exec(target), ni = match && model.ids.get(match[1]);
+                if (ni === void 0 || ni === null || !(model.nodes[ni].type === "layout" || model.nodes[model.nodes[ni].parent]?.type === "layout"))
+                  d.err(
+                    "layout-target",
+                    `/machine/layers/${name}/states/${state}/on/${i}/guard/${key}/layout`,
+                    "unknown layout box target",
+                    "use a layout container or participant id followed by .x, .y, .width or .height"
+                  );
+              }
+            }
+    if (V)
+      for (const [i, n] of model.nodes.entries()) {
+        const at = nodePointer(model, i), parent = model.nodes[n.parent];
+        const error = (code, key, message, hint) => d.err(code, at + key, message, hint);
+        const childAddress = [...model.addrs].find(
+          ([, a]) => a.node === i && a.key.startsWith("layout.")
+        )?.[0];
+        if ((n.raw.layout || childAddress) && parent?.type !== "layout") {
+          if (n.raw.layout)
+            error(
+              "layout-outside",
+              "/layout",
+              "layout child properties need a layout parent",
+              "move the node inside a layout container"
+            );
+          else
+            d.err(
+              "layout-outside",
+              model.doc.bind?.[childAddress] !== void 0 ? "/bind/" + childAddress : at,
+              "layout child properties need a layout parent",
+              "move the node inside a layout container"
+            );
+        }
+        for (const [prefix, raw] of [
+          ["", n.type === "layout" ? n.raw : void 0],
+          ["/layout", n.raw.layout]
+        ])
+          if (raw) {
+            for (const key of ["minWidth", "maxWidth", "minHeight", "maxHeight"])
+              if (raw[key] !== void 0 && raw[key] < 0)
+                error(
+                  "layout-value",
+                  prefix + "/" + key,
+                  "layout bounds must be nonnegative",
+                  "use nonnegative grid lengths"
+                );
+            for (const a of axes) {
+              const cap = a[0].toUpperCase() + a.slice(1), value = raw[a];
+              if (value !== void 0 && !(typeof value === "number" && value >= 0) && value !== "hug" && !(weight(value) > 0 && Number.isFinite(weight(value))))
+                error(
+                  "layout-value",
+                  prefix + "/" + a,
+                  "invalid layout length or fill weight",
+                  "use a nonnegative number, hug, fill or fill(weight > 0)"
+                );
+              if ((raw["min" + cap] ?? 0) > (raw["max" + cap] ?? Infinity))
+                error(
+                  "layout-bounds",
+                  prefix + "/min" + cap,
+                  "minimum exceeds maximum",
+                  "use min <= max"
+                );
+              if (weight(value) && parent && parent.type === "layout" && (parent.raw.layout?.[a] ?? parent.raw[a] ?? "hug") === "hug" && !model.addrs.has(
+                parent.id + "." + (parent.raw.layout?.[a] !== void 0 || model.addrs.has(parent.id + ".layout." + a) ? "layout." : "") + a
+              ))
+                error(
+                  "layout-fill-hug",
+                  prefix + "/" + a,
+                  "fill cannot resolve against a hug parent",
+                  "give the parent a fixed size or use hug for the child"
+                );
+            }
+            for (const key of ["padding", "margin", "gap"])
+              if (raw[key] !== void 0) {
+                const values = typeof raw[key] === "number" ? [raw[key]] : raw[key];
+                if (!Array.isArray(values) || values.length > (key === "gap" ? 2 : 4) || !values.length || values.some(
+                  (v) => typeof v !== "number" || !Number.isFinite(v) || key !== "margin" && v < 0
+                ))
+                  error(
+                    "layout-value",
+                    prefix + "/" + key,
+                    "invalid spacing",
+                    "use 1\u20134 finite grid lengths (gap: 1\u20132); padding and gap are nonnegative"
+                  );
+              }
+          }
+      }
+  },
+  resolve(model) {
+    if (!model.doc.requires?.includes("layout")) return;
+    const initialize = model.nesting;
+    model.nesting = (p) => {
+      const nested = initialize?.(p), local = p.local.bind(p), visible = p.visible.bind(p);
+      p.hitFrame = () => drawFrame(p);
+      p.local = (i) => {
+        const m = local(i), box = drawn(p, i);
+        if (box) {
+          m[4] += box.x - p.num(i, "x", 0);
+          m[5] += box.y - p.num(i, "y", 0);
+        }
+        return m;
+      };
+      p.visible = (i) => {
+        for (let n = i; n >= 0; n = p.model.nodes[n].parent)
+          if (p.prop(n, "layout.display") === "none") return false;
+        return visible(i);
+      };
+      resolveLayout(p);
+      return nested;
+    };
+    const previous = model.afterStep;
+    model.afterStep = (p) => {
+      previous?.(p);
+      resolveLayout(p);
+    };
+  },
+  draw: {
+    tree(model, tree) {
+      for (const [i, n] of model.nodes.entries())
+        if (n.type === "layout") {
+          tree.nodes[i].kind = "group";
+          tree.nodes[i].layout = true;
+        }
+    },
+    frame(p, i, data) {
+      const box = drawn(p, i), n = p.model.nodes[i], type = n.type;
+      if (p.prop(i, "layout.display") === "none") data.visible = false;
+      if (!box) return;
+      if (type === "layout")
+        data.geometry = {
+          kind: "rect",
+          x: 0,
+          y: 0,
+          width: box.width,
+          height: box.height,
+          rx: p.num(i, "corners", 0)
+        };
+      else if (type === "rect" || type === "image") {
+        if (data.geometry) {
+          data.geometry.x = data.geometry.y = 0;
+          data.geometry.width = box.width;
+          data.geometry.height = box.height;
+        }
+      } else if (type === "text") {
+        const input = text.input(p, i);
+        const sizing = textSizing(input);
+        input.sizing = sizing === "fixed" ? "fixed" : "auto-height";
+        input.width = sizing === "auto-width" ? box.width : Math.min(input.width ?? Infinity, box.width);
+        data.text.layout = text.fonts?.prepareText?.(p, input)?.layout ?? text.layout(input, text.overflow);
+      } else {
+        const size = intrinsic(p, i);
+        const sx = size[0] ? box.width / size[0] : 1, sy = size[1] ? box.height / size[1] : 1;
+        let x = 0, y = 0;
+        if (type === "circle" || type === "arc") {
+          x = n.raw.center[0] - p.num(i, "r", 0);
+          y = n.raw.center[1] - p.num(i, "r", 0);
+        }
+        if (data.geometry?.d) {
+          const points = flatten(parsePath(data.geometry.d)).flatMap((s) => s.pts);
+          [x, y] = pathBox(points);
+        }
+        data.transform = mul(data.transform, [sx, 0, 0, sy, -x * sx, -y * sy]);
+      }
+    }
+  }
+};
+export {
+  layout,
+  layoutBox,
+  resolveLayout
+};

package/modules/layout/core/reflow.d.ts

@@ -0,0 +1,6 @@
+import type { Player } from '../../../packages/core/src/player.js';
+import type { Model } from '../../../packages/core/src/load.js';
+import type { Diags } from '../../../packages/core/src/diag.js';
+import type { Box } from './algorithm.js';
+export declare function validateReflow(model: Model, d: Diags): void;
+export declare function reflow(p: Player, boxes: Map<number, Box>): Map<number, Box>;

package/modules/layout/core/reflow.js

@@ -0,0 +1,96 @@
+import { motionEase } from "../../motion/core/curves.js";
+import { parseEase } from "../../../packages/core/src/ease.js";
+import { nodePointer } from "../../components/core/node-pointer.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+function config(value, motion = false) {
+  const match = /^(\S+)(?:\s+(.+))?$/.exec(String(value));
+  const duration = Number(match?.[1]), source = match?.[2] ?? "linear", ease = motion ? motionEase(source) ?? parseEase(source) : parseEase(source);
+  if (duration >= 0 && Number.isFinite(duration) && typeof ease === "function")
+    return { duration, ease };
+}
+function validateReflow(model, d) {
+  for (const [i, n] of model.nodes.entries())
+    for (const [prefix, raw] of [
+      ["", String(n.type) === "layout" ? n.raw : void 0],
+      ["/layout", n.raw.layout]
+    ])
+      if (raw?.reflow !== void 0 && !config(raw.reflow, model.doc.requires?.includes("motion")))
+        d.err(
+          "layout-reflow",
+          nodePointer(model, i) + prefix + "/reflow",
+          V ? "invalid reflow duration or ease" : "",
+          V ? "use a nonnegative duration in seconds followed by a \xA75 ease, e.g. 0.25 out" : ""
+        );
+}
+function reflow(p, boxes) {
+  let state = states.get(p);
+  if (!state) {
+    states.set(p, state = { drawn: /* @__PURE__ */ new Map(), targets: /* @__PURE__ */ new Map(), flights: /* @__PURE__ */ new Map() });
+    const busy = (Object.getOwnPropertyDescriptor(p, "busy") ?? Object.getOwnPropertyDescriptor(Object.getPrototypeOf(p), "busy")).get;
+    Object.defineProperty(p, "busy", {
+      configurable: true,
+      get: () => !!state.flights.size || busy.call(p)
+    });
+    const values = p.values;
+    p.values = function() {
+      const result = values.call(this);
+      for (const [i, box] of state.drawn)
+        for (const k of keys) result[this.model.nodes[i].id + ".drawnLayoutBox." + k] = box[k];
+      return result;
+    };
+    const step = p.step;
+    p.step = function(dt) {
+      const result = step.call(this, dt);
+      return { ...result, settled: result.settled && !state.flights.size };
+    };
+  }
+  const { drawn, targets, flights } = state;
+  const settings = (i, child = true) => {
+    if (i < 0) return;
+    const n = p.model.nodes[i], value = (child ? n.raw.layout?.reflow : void 0) ?? (String(n.type) === "layout" ? n.raw.reflow : void 0);
+    return value === void 0 ? settings(n.parent, false) : config(value, p.model.doc.requires?.includes("motion"));
+  };
+  for (const [i, target] of boxes) {
+    let box = drawn.get(i);
+    const old = targets.get(i), flight = flights.get(i);
+    if (flight) {
+      const u = Math.min(1, (p.time - flight.start) / flight.duration), w = flight.ease(u);
+      box = { ...flight.from };
+      for (const k of keys)
+        box[k] = Math.max(
+          k === "width" || k === "height" ? 0 : -Infinity,
+          box[k] + (old[k] - box[k]) * w
+        );
+      if (u === 1) {
+        box = old;
+        flights.delete(i);
+      }
+    }
+    if (!old || keys.some((k) => old[k] !== target[k])) {
+      const c = settings(i);
+      if (box && c?.duration && !p.reducedMotion)
+        flights.set(i, { ...c, start: p.time, from: box });
+      else {
+        box = target;
+        flights.delete(i);
+      }
+      targets.set(i, target);
+    }
+    if (p.reducedMotion) {
+      box = target;
+      flights.delete(i);
+    }
+    const previous = drawn.get(i);
+    if (!previous || keys.some((k) => previous[k] !== box[k])) {
+      drawn.set(i, box);
+      p.drawVersions[i] = ++p.drawRevision;
+    }
+  }
+  return drawn;
+}
+const keys = ["x", "y", "width", "height"];
+const states = /* @__PURE__ */ new WeakMap();
+export {
+  reflow,
+  validateReflow
+};

package/modules/layout/core/registry.d.ts

@@ -0,0 +1,7 @@
+import type { ModuleEntry } from '../../../packages/core/src/modules.js';
+import type { Shape } from '../../../packages/core/src/registry.js';
+export declare const axes: readonly ["width", "height"];
+export declare const bounds: Record<string, Shape>;
+export declare const alignments: string[];
+export declare const childShape: Shape;
+export declare const entries: ModuleEntry[];

package/modules/layout/core/registry.js

@@ -0,0 +1,56 @@
+const number = { k: "num" };
+const size = { k: "alt", of: [number, { k: "str" }] };
+const edges = { k: "alt", of: [number, { k: "arr", of: number, min: 1 }] };
+const axes = ["width", "height"];
+const bounds = {
+  minWidth: { k: "num", markup: "min-width" },
+  maxWidth: { k: "num", markup: "max-width" },
+  minHeight: { k: "num", markup: "min-height" },
+  maxHeight: { k: "num", markup: "max-height" }
+};
+const alignments = ["start", "center", "end", "stretch", "baseline"];
+const childShape = {
+  k: "obj",
+  markup: "",
+  element: "layout-item",
+  p: {
+    width: { ...size, markup: "layout-width" },
+    height: { ...size, markup: "layout-height" },
+    ...bounds,
+    alignSelf: { k: "str", of: alignments, markup: "align-self" },
+    margin: edges,
+    display: { k: "str", of: ["flex", "none"] },
+    reflow: size
+  }
+};
+const entries = [
+  {
+    target: "layout",
+    node: { painted: true },
+    required: ["id", "type"],
+    shapes: {
+      children: { k: "arr", of: { k: "node" } },
+      width: size,
+      height: size,
+      ...bounds,
+      direction: { k: "str", of: ["row", "column", "row-reverse", "column-reverse"] },
+      justify: {
+        k: "str",
+        of: ["start", "center", "end", "space-between", "space-around", "space-evenly"]
+      },
+      align: { k: "str", of: alignments },
+      gap: edges,
+      padding: edges,
+      reflow: size,
+      corners: { k: "num", min: 0 }
+    }
+  },
+  { target: "node", shapes: { layout: childShape } }
+];
+export {
+  alignments,
+  axes,
+  bounds,
+  childShape,
+  entries
+};

package/modules/layout/core/svg.d.ts

@@ -0,0 +1,5 @@
+import type { SVGBackend } from '../../../packages/core/src/svg.js';
+export type LayoutEntry = import('../../../packages/core/src/draw.js').DrawEntry & {
+    layout?: boolean;
+};
+export declare const layoutSVG: SVGBackend;

package/modules/layout/core/svg.js

@@ -0,0 +1,15 @@
+const layoutSVG = {
+  tree(draw, tree) {
+    const visit = (els) => {
+      for (const el of els) {
+        visit(el.kids);
+        if (el.role === "node" && draw.nodes[el.node].kind === "group" && draw.nodes[el.node].layout)
+          el.kids.unshift({ tag: "rect", role: "shape", node: el.node, kids: [] });
+      }
+    };
+    visit(tree.root);
+  }
+};
+export {
+  layoutSVG
+};

package/modules/layout/manifest.d.ts

@@ -0,0 +1,55 @@
+export declare const after: string[];
+declare const _default: {
+    after: string[];
+    name: string;
+    summary: string;
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: ({
+        name: string;
+        budget: number;
+        over: string;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over?: undefined;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        authoring: boolean;
+    })[];
+    markupHook: {
+        slot: string;
+        type: string;
+        value: string;
+        browserName: string;
+    };
+    adapters: {
+        'packages/core/src/modules/layout/index.ts': string;
+        'packages/core/src/modules/layout/svg.ts': string;
+        'packages/markup/src/markup-layout.ts': string;
+        'packages/web/src/layout.ts': string;
+        'packages/web/src/layout-svg.ts': string;
+        'packages/web/src/layout-reflow.ts': string;
+        'packages/web/src/markup-layout.ts': string;
+    };
+    exports: {
+        'core:./layout': string;
+        'markup:./layout': string;
+        'web:./layout-reflow': string;
+        'web:./layout': string;
+        'web:./layout-svg': string;
+        'web:./markup-layout': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;