@aethervtt/shard-ui 0.0.1

package/dist/shaders.js

@@ -0,0 +1,124 @@
+const UI_SHADERS = {
+  "shard::ui": `
+import shard::color::linear_to_srgb;
+
+struct UiView {
+  /** Target width and height in pixels, then their inverses. */
+  size: vec4f,
+}
+
+struct Quad {
+  /** x, y (top left), width, height, in target pixels. */
+  rect: vec4f,
+  /** u0, v0, u1, v1. */
+  uv: vec4f,
+  /** Fill, tint, or glyph color: premultiplied. */
+  color: vec4f,
+  border_color: vec4f,
+  /** Corner radii: top left, top right, bottom right, bottom left. */
+  radius: vec4f,
+  /** x0, y0, x1, y1 in target pixels: fragments outside are cut. */
+  clip: vec4f,
+  border: f32,
+  /** 0 box, 1 image (straight alpha), 2 image (premultiplied), 3 MSDF glyph. */
+  kind: u32,
+  /** Glyphs: distance range in atlas pixels. */
+  range: f32,
+  /** Rotation around the rect's center (arrows). */
+  angle: f32,
+}
+
+@group(0) @binding(0) var<uniform> ui_view: UiView;
+@group(0) @binding(1) var<storage, read> quads: array<Quad>;
+@group(1) @binding(0) var ui_texture: texture_2d<f32>;
+@group(1) @binding(1) var ui_sampler: sampler;
+
+struct UiOutput {
+  @builtin(position) clip: vec4f,
+  /** Offset from the rect's center in pixels (unrotated), for the box distance. */
+  @location(0) local: vec2f,
+  @location(1) uv: vec2f,
+  @location(2) @interpolate(flat) quad: u32,
+}
+
+fn corner(k: u32) -> vec2f {
+  let c = array<vec2f, 6>(vec2f(0.0, 0.0), vec2f(0.0, 1.0), vec2f(1.0, 0.0), vec2f(1.0, 0.0), vec2f(0.0, 1.0), vec2f(1.0, 1.0));
+  return c[k];
+}
+
+@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> UiOutput {
+  let q = quads[i];
+  let c = corner(v);
+  let half = q.rect.zw * 0.5;
+  // One pixel of margin so the antialiased edge isn't cut.
+  let grow = select(vec2f(1.0), vec2f(0.0), q.kind == 3u);
+  let local = (c * 2.0 - 1.0) * (half + grow);
+  let cs = cos(q.angle);
+  let sn = sin(q.angle);
+  let p = q.rect.xy + half + vec2f(local.x * cs - local.y * sn, local.x * sn + local.y * cs);
+  var out: UiOutput;
+  out.clip = vec4f(p.x * ui_view.size.z * 2.0 - 1.0, 1.0 - p.y * ui_view.size.w * 2.0, 0.5, 1.0);
+  out.local = local;
+  let f = clamp((local + half) / max(q.rect.zw, vec2f(1e-6)), vec2f(0.0), vec2f(1.0));
+  out.uv = mix(q.uv.xy, q.uv.zw, f);
+  out.quad = i;
+  return out;
+}
+
+/** Signed distance to a box of half size b with per-corner radii (tl, tr, br, bl), y down. */
+fn rounded_box(p: vec2f, b: vec2f, r: vec4f) -> f32 {
+  let radius = select(r.xw, r.yz, p.x > 0.0);
+  let k = select(radius.x, radius.y, p.y > 0.0);
+  let q = abs(p) - b + vec2f(k);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - k;
+}
+
+fn median(c: vec3f) -> f32 {
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+@fragment fn fs(in: UiOutput) -> @location(0) vec4f {
+  // Sampled up front: derivatives need uniform control flow.
+  let texel = textureSample(ui_texture, ui_sampler, in.uv);
+  let uv_width = fwidth(in.uv);
+  let q = quads[in.quad];
+  // In the fragment stage, position is the pixel's center in target pixels.
+  let frag = in.clip;
+  if (frag.x < q.clip.x || frag.y < q.clip.y || frag.x >= q.clip.z || frag.y >= q.clip.w) {
+    discard;
+  }
+  let half = q.rect.zw * 0.5;
+  var c: vec4f;
+  if (q.kind == 3u) {
+    let unit_range = vec2f(q.range) / vec2f(textureDimensions(ui_texture));
+    let screen_px = max(0.5 * dot(unit_range, 1.0 / uv_width), 1.0);
+    let fill = clamp(screen_px * (median(texel.rgb) - 0.5) + 0.5, 0.0, 1.0);
+    c = q.color * fill;
+  } else {
+    let r = min(q.radius, vec4f(min(half.x, half.y)));
+    let d = rounded_box(in.local, half, r);
+    let edge = clamp(0.5 - d, 0.0, 1.0);
+    if (q.kind == 0u) {
+      var inside = edge;
+      if (q.border > 0.0) {
+        let inner = rounded_box(in.local, max(half - vec2f(q.border), vec2f(0.0)), max(r - vec4f(q.border), vec4f(0.0)));
+        inside = clamp(0.5 - inner, 0.0, 1.0);
+      }
+      c = q.color * inside + q.border_color * max(edge - inside, 0.0);
+    } else {
+      var t = texel;
+      if (q.kind == 1u) { t = vec4f(t.rgb * t.a, t.a); }
+      c = t * q.color * edge;
+    }
+  }
+  if (c.a <= 0.0) { discard; }
+  @if(!SRGB_TARGET) {
+    let rgb = c.rgb / c.a;
+    c = vec4f(linear_to_srgb(rgb) * c.a, c.a);
+  }
+  return c;
+}`
+};
+export {
+  UI_SHADERS
+};

package/dist/style.d.ts

@@ -0,0 +1,45 @@
+import type { AssetRef } from '@aethervtt/shard-core';
+import type { UiThemeAsset } from './theme.js';
+/** Interaction bits a style's state variants key on. */
+export declare const State: {
+    readonly On: 1;
+    readonly Focused: 2;
+    readonly Hovered: 4;
+    readonly Pressed: 8;
+    readonly Disabled: 16;
+};
+/** A node's look after its theme: what render, hit testing, and describe use. */
+export declare class ResolvedStyle {
+    background: Float32Array<ArrayBuffer>;
+    borderColor: Float32Array<ArrayBuffer>;
+    borderWidth: number;
+    radius: Float32Array<ArrayBuffer>;
+    opacity: number;
+    size: number;
+    color: Float32Array<ArrayBuffer>;
+    font: AssetRef<'Font'> | null;
+    align: number;
+    wrap: boolean;
+    lineHeight: number;
+}
+/** Column views of one table's UiStyle and UiText rows (either may be absent). */
+export interface StyleColumns {
+    background?: Float32Array;
+    borderColor?: Float32Array;
+    borderWidth?: Float32Array;
+    radius?: Float32Array;
+    opacity?: Float32Array;
+    size?: Float32Array;
+    color?: Float32Array;
+    font?: (AssetRef<'Font'> | null)[];
+    align?: Uint8Array;
+    wrap?: Uint8Array;
+    lineHeight?: Float32Array;
+}
+/**
+ * Resolves a node's look: entity fields that differ from their default win, then the theme
+ * style (with its state variants), then the defaults. `row` indexes the columns.
+ */
+export declare function resolveStyle(out: ResolvedStyle, c: StyleColumns, row: number, theme: UiThemeAsset | undefined, style: string, state: number): ResolvedStyle;
+/** The theme name a style lookup failed on, or undefined when it exists (or none is named). */
+export declare function missingStyle(theme: UiThemeAsset | undefined, style: string): string | undefined;

package/dist/style.js

@@ -0,0 +1,111 @@
+const State = { On: 1, Focused: 2, Hovered: 4, Pressed: 8, Disabled: 16 };
+const STATE_NAMES = ["on", "focused", "hovered", "pressed", "disabled"];
+class ResolvedStyle {
+  background = new Float32Array(4);
+  borderColor = new Float32Array(4);
+  borderWidth = 0;
+  radius = new Float32Array(4);
+  opacity = 1;
+  size = 16;
+  color = new Float32Array([1, 1, 1, 1]);
+  font = null;
+  align = 0;
+  wrap = true;
+  lineHeight = 1.2;
+}
+const ALIGNS = ["start", "center", "end"];
+const DEFAULTS = {
+  background: [0, 0, 0, 0],
+  borderColor: [0, 0, 0, 0],
+  borderWidth: 0,
+  radius: [0, 0, 0, 0],
+  opacity: 1,
+  size: 16,
+  color: [1, 1, 1, 1],
+  align: 0,
+  wrap: 1,
+  lineHeight: 1.2
+};
+function sameVec(a, o, b) {
+  for (let k = 0; k < b.length; k++) if (Math.fround(a[o + k]) !== Math.fround(b[k])) return false;
+  return true;
+}
+function themeValue(theme, style, state, key) {
+  if (!theme || style === "") return void 0;
+  let value;
+  const base = theme.styles.get(style);
+  if (base && key in base) value = base[key];
+  if (state !== 0) {
+    for (let s = 0; s < STATE_NAMES.length; s++) {
+      if (!(state & 1 << s)) continue;
+      const variant = theme.styles.get(`${style}:${STATE_NAMES[s]}`);
+      if (variant && key in variant) value = variant[key];
+    }
+  }
+  return value;
+}
+function pickVec(out, own, o, def, theme) {
+  if (own && !sameVec(own, o, def)) {
+    for (let k = 0; k < out.length; k++) out[k] = own[o + k];
+  } else if (Array.isArray(theme)) {
+    for (let k = 0; k < out.length; k++) out[k] = theme[k] ?? def[k];
+  } else {
+    for (let k = 0; k < out.length; k++) out[k] = def[k];
+  }
+}
+function pickNum(own, def, theme) {
+  if (own !== void 0 && Math.fround(own) !== Math.fround(def)) return own;
+  return typeof theme === "number" ? theme : def;
+}
+function resolveStyle(out, c, row, theme, style, state) {
+  pickVec(
+    out.background,
+    c.background,
+    row * 4,
+    DEFAULTS.background,
+    themeValue(theme, style, state, "background")
+  );
+  pickVec(
+    out.borderColor,
+    c.borderColor,
+    row * 4,
+    DEFAULTS.borderColor,
+    themeValue(theme, style, state, "borderColor")
+  );
+  out.borderWidth = pickNum(
+    c.borderWidth?.[row],
+    DEFAULTS.borderWidth,
+    themeValue(theme, style, state, "borderWidth")
+  );
+  pickVec(out.radius, c.radius, row * 4, DEFAULTS.radius, themeValue(theme, style, state, "radius"));
+  out.opacity = pickNum(
+    c.opacity?.[row],
+    DEFAULTS.opacity,
+    themeValue(theme, style, state, "opacity")
+  );
+  out.size = pickNum(c.size?.[row], DEFAULTS.size, themeValue(theme, style, state, "size"));
+  pickVec(out.color, c.color, row * 4, DEFAULTS.color, themeValue(theme, style, state, "color"));
+  const ownFont = c.font?.[row];
+  const themeFont = themeValue(theme, style, state, "font");
+  out.font = ownFont ?? themeFont ?? theme?.font ?? null;
+  const themeAlign = themeValue(theme, style, state, "align");
+  out.align = c.align && c.align[row] !== DEFAULTS.align ? c.align[row] : typeof themeAlign === "string" ? Math.max(0, ALIGNS.indexOf(themeAlign)) : DEFAULTS.align;
+  const themeWrap = themeValue(theme, style, state, "wrap");
+  out.wrap = c.wrap && c.wrap[row] !== DEFAULTS.wrap ? c.wrap[row] !== 0 : typeof themeWrap === "boolean" ? themeWrap : true;
+  out.lineHeight = pickNum(
+    c.lineHeight?.[row],
+    DEFAULTS.lineHeight,
+    themeValue(theme, style, state, "lineHeight")
+  );
+  return out;
+}
+function missingStyle(theme, style) {
+  if (style === "" || !theme) return void 0;
+  return theme.styles.has(style) ? void 0 : style;
+}
+export {
+  ResolvedStyle,
+  State,
+  missingStyle,
+  resolveStyle
+};

package/dist/testing.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentDef, type Entity, type World } from '@aethervtt/shard-core';
+import { App, type Plugin } from '@aethervtt/shard-runtime';
+import { type Font } from '@aethervtt/shard-text';
+/** Inter (latin), built once per test file. */
+export declare function interFont(): Font;
+export declare function uiApp(extra?: Plugin[]): Promise<{
+    app: App;
+    world: World;
+    frame: (n?: number) => void;
+}>;
+type Init = [ComponentDef, Record<string, unknown>?];
+/** Spawns a node under `parent` (a UiNode is added if absent). */
+export declare function node(world: World, parent: Entity | null, ...components: (ComponentDef | Init)[]): Entity;
+/** A root at a reference size (headless, that's its size). */
+export declare function root(world: World, width?: number, height?: number, fields?: Record<string, unknown>): Entity;
+export declare function rect(world: World, e: Entity): number[];
+export declare function addFont(world: World): import("@aethervtt/shard-core").AssetRef<"Font">;
+export declare function mouse(world: World, x: number, y: number): void;
+export declare function click(world: World, frame: () => void, x: number, y: number): void;
+export {};

package/dist/testing.js

@@ -0,0 +1,68 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { ChildOf } from "@aethervtt/shard-core";
+import { injectInput, inputPlugin } from "@aethervtt/shard-input";
+import { App } from "@aethervtt/shard-runtime";
+import { Fonts, fontFromBytes } from "@aethervtt/shard-text";
+import { TransformPlugin } from "@aethervtt/shard-transform";
+import { UiLayout, UiNode, UiRoot } from "./components.js";
+import { uiPlugin } from "./plugin.js";
+const here = dirname(fileURLToPath(import.meta.url));
+let inter;
+function interFont() {
+  inter ??= fontFromBytes(
+    new Uint8Array(readFileSync(resolve(here, "../../text/fixtures/Inter-Regular.ttf"))),
+    {
+      charset: "latin"
+    }
+  );
+  return inter;
+}
+async function uiApp(extra = []) {
+  const app = new App().addPlugin(TransformPlugin, inputPlugin(), uiPlugin, ...extra);
+  await app.init();
+  const world = app.world;
+  const frame = (n = 1) => {
+    for (let i = 0; i < n; i++) app.update(1 / 60);
+  };
+  return { app, world, frame };
+}
+function node(world, parent, ...components) {
+  const list = components.map((c) => Array.isArray(c) ? c : [c]);
+  if (!list.some(([def]) => def === UiNode)) list.unshift([UiNode, {}]);
+  const e = world.spawn(...list);
+  if (parent !== null) world.add(e, ChildOf, { parent });
+  return e;
+}
+function root(world, width = 800, height = 600, fields = {}) {
+  return world.spawn([UiRoot, { referenceSize: [width, height], ...fields }]);
+}
+function rect(world, e) {
+  const l = world.get(e, UiLayout);
+  return [l.x, l.y, l.width, l.height].map((v) => Math.round(v * 100) / 100);
+}
+function addFont(world) {
+  return world.resource(Fonts).add(interFont());
+}
+function mouse(world, x, y) {
+  injectInput(world, { type: "mouse-move", x, y, dx: 0, dy: 0 });
+}
+function click(world, frame, x, y) {
+  mouse(world, x, y);
+  frame();
+  injectInput(world, { mouse: "left", pressed: true });
+  frame();
+  injectInput(world, { mouse: "left", pressed: false });
+  frame();
+}
+export {
+  addFont,
+  click,
+  interFont,
+  mouse,
+  node,
+  rect,
+  root,
+  uiApp
+};

package/dist/theme.d.ts

@@ -0,0 +1,30 @@
+import { AssetStore } from '@aethervtt/shard-assets';
+import { type AnyField, type AssetRef, type FieldType } from '@aethervtt/shard-core';
+/** Style fields a theme may set: every UiStyle field, and UiText's look (not its text). */
+export declare const THEME_FIELDS: Readonly<Record<string, AnyField>>;
+/** State variants a style can have (`"button:hovered"`), applied in this order over the base. */
+export declare const THEME_STATES: readonly ['on', 'focused', 'hovered', 'pressed', 'disabled'];
+/** One style: the fields it sets (values as components hold them: colors linear, refs resolved). */
+export type ThemeStyle = Record<string, unknown>;
+export declare const UiThemeSchema: import("@aethervtt/shard-core").ComponentDef<{
+    readonly font: FieldType<AssetRef<"Font"> | null, "object">;
+    readonly styles: FieldType<Record<string, ThemeStyle>, "object">;
+}>;
+/** A loaded theme: styles by name, with state variants kept separately. Hot reload bumps version. */
+export declare class UiThemeAsset {
+    font: AssetRef<'Font'> | null;
+    /** Style name → fields; state variants under "name:state". */
+    styles: Map<string, ThemeStyle>;
+    version: number;
+    constructor(font: AssetRef<'Font'> | null, styles: Record<string, ThemeStyle>);
+    copyFrom(other: UiThemeAsset): void;
+    /** Builds a theme from its JSON form (`*.theme.json`). */
+    static fromJson(json: unknown, resolve?: (path: string) => AssetRef | undefined): UiThemeAsset;
+}
+export declare class UiThemeStore extends AssetStore<UiThemeAsset, 'UiTheme'> {
+    constructor();
+}
+export declare const UiThemes: import("@aethervtt/shard-core").ResourceDef<UiThemeStore>;
+export declare const UiThemeAssetType: import("@aethervtt/shard-assets").AssetTypeDef<UiThemeAsset>;
+/** `*.theme.json`: named styles for UI roots. */
+export declare const UiThemeImporter: import("@aethervtt/shard-assets").ImporterDef;

package/dist/theme.js

@@ -0,0 +1,172 @@
+import {
+  AssetStore,
+  defineAssetType,
+  defineDataAsset
+} from "@aethervtt/shard-assets";
+import {
+  cloneData,
+  defineResource,
+  defineSchema,
+  isPlainObject,
+  pointer,
+  ShardError,
+  t
+} from "@aethervtt/shard-core";
+import { UiStyle, UiText } from "./components.js";
+const THEME_FIELDS = (() => {
+  const out = {};
+  for (const [name, field] of Object.entries(UiStyle.fields)) out[name] = field;
+  for (const [name, field] of Object.entries(UiText.fields)) {
+    if (name !== "text" && name !== "key" && name !== "params") out[name] = field;
+  }
+  return out;
+})();
+const THEME_STATES = ["on", "focused", "hovered", "pressed", "disabled"];
+function unknownStyleField(path, key) {
+  return new ShardError("schema/unknown-field", `Unknown style field "${key}" at ${path}`, {
+    path,
+    hint: `A style sets ${Object.keys(THEME_FIELDS).join(", ")}.`
+  });
+}
+const STYLES_DESCRIPTION = 'Style name \u2192 fields (UiStyle and UiText: background, borderColor, borderWidth, radius, opacity, size, color, font, align, wrap, lineHeight). "name:hovered" (on, focused, hovered, pressed, disabled) overrides fields in that state.';
+function stylesField() {
+  const base = t.json();
+  const convert = (json, toValue, ctx) => {
+    const out = {};
+    if (!isPlainObject(json)) return out;
+    for (const [name, style] of Object.entries(json)) {
+      if (!isPlainObject(style)) continue;
+      const s = {};
+      for (const [key, value] of Object.entries(style)) {
+        const field = THEME_FIELDS[key];
+        if (!field) continue;
+        s[key] = toValue ? field.fromJson(value, ctx) : field.toJson(value);
+      }
+      out[name] = s;
+    }
+    return out;
+  };
+  return {
+    ...base,
+    options: { description: STYLES_DESCRIPTION },
+    defaultValue: () => ({}),
+    read: (c, r) => cloneData(c[r]),
+    write: (c, r, v) => {
+      ;
+      c[r] = cloneData(v);
+    },
+    validate(json, path, errors, ctx) {
+      if (!isPlainObject(json)) {
+        errors.push(
+          new ShardError("schema/type-mismatch", `Expected an object of styles at ${path || "/"}`, {
+            path,
+            hint: 'Use { "panel": { "background": "#101820cc" } }.'
+          })
+        );
+        return;
+      }
+      for (const [name, style] of Object.entries(json)) {
+        const at = pointer(path, name);
+        const colon = name.indexOf(":");
+        const state = colon === -1 ? "" : name.slice(colon + 1);
+        if (colon === 0 || state && !THEME_STATES.includes(state)) {
+          errors.push(
+            new ShardError("ui/unknown-state", `"${name}" isn't a style or a style state`, {
+              path: at,
+              hint: `Name a style ("button") or a state of one: ${THEME_STATES.map((s) => `"button:${s}"`).join(", ")}.`
+            })
+          );
+        }
+        if (!isPlainObject(style)) {
+          errors.push(
+            new ShardError("schema/type-mismatch", `Style "${name}" must be an object`, {
+              path: at
+            })
+          );
+          continue;
+        }
+        for (const [key, value] of Object.entries(style)) {
+          const field = THEME_FIELDS[key];
+          if (!field) errors.push(unknownStyleField(pointer(at, key), key));
+          else field.validate(value, pointer(at, key), errors, ctx);
+        }
+      }
+    },
+    toJson: (v) => convert(v, false),
+    fromJson: (json, ctx) => convert(json, true, ctx),
+    jsonSchema: () => {
+      const properties = {};
+      for (const [key, field] of Object.entries(THEME_FIELDS)) properties[key] = field.jsonSchema();
+      return {
+        type: "object",
+        description: STYLES_DESCRIPTION,
+        additionalProperties: { type: "object", properties, additionalProperties: false },
+        propertyNames: { pattern: `^[^:]+(:(${THEME_STATES.join("|")}))?$` },
+        default: {}
+      };
+    }
+  };
+}
+const UiThemeSchema = defineSchema(
+  "ui/UiTheme",
+  {
+    font: t.handle("Font", { description: "Font for the theme's text (styles may pick others)." }),
+    styles: stylesField()
+  },
+  {
+    description: "Named node styles for a UI root (*.theme.json): nodes pick one with UiNode.style; fields a node sets win."
+  }
+);
+class UiThemeAsset {
+  font;
+  /** Style name → fields; state variants under "name:state". */
+  styles;
+  version = 0;
+  constructor(font, styles) {
+    this.font = font;
+    this.styles = new Map(Object.entries(styles));
+  }
+  copyFrom(other) {
+    this.font = other.font;
+    this.styles = other.styles;
+    this.version++;
+  }
+  /** Builds a theme from its JSON form (`*.theme.json`). */
+  static fromJson(json, resolve) {
+    const value = UiThemeSchema.deserialize(json);
+    const fix = (ref) => {
+      if (!ref) return null;
+      const resolved = ref.path ? resolve?.(ref.path) : void 0;
+      return resolved ? { type: ref.type, guid: resolved.guid, path: resolved.path } : ref;
+    };
+    for (const style of Object.values(value.styles)) {
+      if (style.font) style.font = fix(style.font);
+    }
+    return new UiThemeAsset(fix(value.font), value.styles);
+  }
+}
+class UiThemeStore extends AssetStore {
+  constructor() {
+    super("UiTheme");
+  }
+}
+const UiThemes = defineResource("ui/UiThemes", {
+  description: "Loaded UI themes by guid.",
+  init: () => new UiThemeStore()
+});
+const UiThemeAssetType = defineAssetType("UiTheme", {
+  store: UiThemes,
+  load: (artifact, ctx) => UiThemeAsset.fromJson(artifact.json, (path) => ctx.resolve(path)),
+  update: (existing, next) => existing.copyFrom(next)
+});
+const UiThemeImporter = defineDataAsset("UiTheme", UiThemeSchema, { extension: "theme" });
+export {
+  THEME_FIELDS,
+  THEME_STATES,
+  UiThemeAsset,
+  UiThemeAssetType,
+  UiThemeImporter,
+  UiThemeSchema,
+  UiThemeStore,
+  UiThemes
+};