knobkit 0.0.1

package/src/lib/bound.ts

@@ -0,0 +1,30 @@
+import type { Widget } from "./types.js";
+
+// A path into a widget's structured state, e.g. ["messages"] or ["messages", -1, "content"].
+// -1 addresses the last element of an array.
+export type Path = (string | number)[];
+export type EditOp = "set" | "append" | "appendText";
+
+// A widget method like `convo.history()` or `convo.append(t)` resolves its data through `bound(w)`.
+// The resolver is set by whichever runtime is executing a handler (server per-request, or mount). It
+// never holds state: reads are pulled from the client on demand (one attribute at a time); writes are
+// generic structured edits the client applies.
+export interface Bound {
+  read<T>(widget: Widget<any>, path: Path): Promise<T>;
+  edit(widget: Widget<any>, op: EditOp, path: Path, value: unknown): void;
+  enable(widget: Widget<any>, value: boolean): void;
+  busy(widget: Widget<any>, value: boolean): void;
+  key(widget: Widget<any>): string;
+}
+
+let resolve: () => Bound | undefined = () => undefined;
+
+export function setBoundResolver(fn: () => Bound | undefined): void {
+  resolve = fn;
+}
+
+export function bound(_widget: Widget<any>): Bound {
+  const b = resolve();
+  if (!b) throw new Error("widget method called outside a knobkit handler");
+  return b;
+}

package/src/lib/controls.ts

@@ -0,0 +1,36 @@
+import { bound } from "./bound.js";
+import type { Widget } from "./types.js";
+
+// Spread into every widget factory so enable()/disable()/busy() are uniform. `enabled` and `busy` are
+// two orthogonal runtime flags (both separate from state, both drop the widget's input events): enabled
+// is a persistent "can't use this" (dimmed); busy is a transient "this is working" (a loading bar).
+// `busyStart`/`busyEnd` mark a busy span by hand (e.g. across a setup() load); `busy(fn)` wraps an
+// async fn in the same span. `this` is the widget at call time.
+export const controls = {
+  enable(this: Widget): void {
+    bound(this).enable(this, true);
+  },
+  disable(this: Widget): void {
+    bound(this).enable(this, false);
+  },
+  setEnabled(this: Widget, value: boolean): void {
+    bound(this).enable(this, value);
+  },
+  busyStart(this: Widget): void {
+    bound(this).busy(this, true);
+  },
+  busyEnd(this: Widget): void {
+    bound(this).busy(this, false);
+  },
+  busy(this: Widget, run: (payload: any) => any): (payload: any) => Promise<any> {
+    const self = this;
+    return async (payload: any) => {
+      self.busyStart();
+      try {
+        return await run(payload);
+      } finally {
+        self.busyEnd();
+      }
+    };
+  },
+};

package/src/lib/ctx.ts

@@ -0,0 +1,31 @@
+import type { Bound, EditOp, Path } from "./bound.js";
+import type { Widget } from "./types.js";
+
+// Builds a handler-time Bound from low-level transport functions. Reads proxy to wherever the state
+// lives (the client, over the socket); edits/enables are sent for the client to apply. Translates the
+// widget object to its key; the handler never sees keys.
+export function makeBound(opts: {
+  read: (key: string, path: Path) => Promise<unknown>;
+  edit: (key: string, op: EditOp, path: Path, value: unknown) => void;
+  enable: (key: string, value: boolean) => void;
+  busy: (key: string, value: boolean) => void;
+  keyFor: (widget: Widget<any>) => string;
+}): Bound {
+  return {
+    read<T>(widget: Widget<any>, path: Path): Promise<T> {
+      return opts.read(opts.keyFor(widget), path) as Promise<T>;
+    },
+    edit(widget: Widget<any>, op: EditOp, path: Path, value: unknown): void {
+      opts.edit(opts.keyFor(widget), op, path, value);
+    },
+    enable(widget: Widget<any>, value: boolean): void {
+      opts.enable(opts.keyFor(widget), value);
+    },
+    busy(widget: Widget<any>, value: boolean): void {
+      opts.busy(opts.keyFor(widget), value);
+    },
+    key(widget: Widget<any>): string {
+      return opts.keyFor(widget);
+    },
+  };
+}

package/src/lib/declare.test.ts

@@ -0,0 +1,46 @@
+import { test, expect } from "vitest";
+import { knobkit } from "./knobkit.js";
+import { declare } from "./declare.js";
+import { text, button, output, row, col, grid } from "./widgets/index.js";
+
+test("an authored array becomes an implicit col whose items reference the children", () => {
+  const a = text();
+  const b = output();
+  const app = knobkit({ widgets: [a, b] });
+  const decl = declare(app.config);
+
+  const root = decl.widgets.find((w) => w.key === decl.root)!;
+  expect(root.type).toBe("col");
+  expect((root.state as { items: string[] }).items).toEqual([app.keyFor(a), app.keyFor(b)]);
+  expect(decl.widgets.find((w) => w.key === app.keyFor(a))!.state).toEqual({ value: "" });
+});
+
+test("nested containers lower to a flat decl with items refs at each level", () => {
+  const size = text();
+  const go = button({ label: "Go" });
+  const caption = output();
+  const app = knobkit({ widgets: col(row(size, go), caption) });
+  const decl = declare(app.config);
+
+  const root = decl.widgets.find((w) => w.key === decl.root)!;
+  expect(root.type).toBe("col");
+  const [rowKey, captionKey] = (root.state as { items: string[] }).items;
+  expect(captionKey).toBe(app.keyFor(caption));
+
+  const rowDecl = decl.widgets.find((w) => w.key === rowKey)!;
+  expect(rowDecl.type).toBe("row");
+  expect((rowDecl.state as { items: string[] }).items).toEqual([app.keyFor(size), app.keyFor(go)]);
+
+  expect(decl.widgets).toHaveLength(5);
+});
+
+test("grid carries its cols as a prop and items refs", () => {
+  const a = text();
+  const b = text();
+  const app = knobkit({ widgets: grid([a, b], { cols: 3 }) });
+  const decl = declare(app.config);
+  const root = decl.widgets.find((w) => w.key === decl.root)!;
+  expect(root.type).toBe("grid");
+  expect(root.props.cols).toBe(3);
+  expect((root.state as { items: string[] }).items).toEqual([app.keyFor(a), app.keyFor(b)]);
+});

package/src/lib/declare.ts

@@ -0,0 +1,74 @@
+import type { AppConfig, Widget } from "./types.js";
+
+// What the browser needs to render and interact, without the server-side functions: each widget's
+// key, its `type` (which view), its serializable props, and the `type` string of each event it
+// exposes (so the browser can reconstruct emit-able event constructors). `serverEvents` lists the
+// event types that have an `on(...)` handler the browser must route off-device.
+export interface WidgetDecl {
+  key: string;
+  type: string;
+  state: unknown;
+  enabled: boolean;
+  props: Record<string, unknown>;
+  events: Record<string, string>;
+}
+
+export interface AppDecl {
+  title?: string;
+  description?: string;
+  widgets: WidgetDecl[];
+  root: string;
+  serverEvents: string[];
+}
+
+const SKIP = new Set(["state", "behavior", "view", "fold", "type", "children", "__subapp"]);
+
+interface TreeNode {
+  widget: Widget<any>;
+  key: string;
+  children: TreeNode[];
+}
+
+function buildTree(widgets: Widget<any> | Widget<any>[]): TreeNode {
+  let n = 0;
+  const visit = (w: Widget<any>): TreeNode => ({
+    widget: w,
+    key: `${(w.type as string) || "widget"}-${n++}`,
+    children: (w.children ?? []).map(visit),
+  });
+  const root: Widget<any> = Array.isArray(widgets) ? ({ type: "col", state: {}, children: widgets } as Widget<any>) : widgets;
+  return visit(root);
+}
+
+function flatten(node: TreeNode): TreeNode[] {
+  return [node, ...node.children.flatMap(flatten)];
+}
+
+export function widgetKeys(widgets: Widget<any> | Widget<any>[]): Map<Widget<any>, string> {
+  const map = new Map<Widget<any>, string>();
+  for (const node of flatten(buildTree(widgets))) map.set(node.widget, node.key);
+  return map;
+}
+
+function toDecl(node: TreeNode): WidgetDecl {
+  const w = node.widget;
+  const props: Record<string, unknown> = {};
+  const events: Record<string, string> = {};
+  for (const [k, v] of Object.entries(w)) {
+    if (SKIP.has(k)) continue;
+    if (typeof v === "function" && typeof (v as unknown as { type?: unknown }).type === "string") {
+      events[k] = (v as unknown as { type: string }).type;
+    } else if (typeof v !== "function") {
+      props[k] = v;
+    }
+  }
+  const isContainer = Array.isArray(w.children);
+  const state = isContainer ? { items: node.children.map((c) => c.key) } : w.state;
+  return { key: node.key, type: (w.type as string | undefined) ?? "", state, enabled: true, props, events };
+}
+
+export function declare(config: AppConfig, serverEvents: string[] = []): AppDecl {
+  const root = buildTree(config.widgets);
+  const widgets = flatten(root).map(toDecl);
+  return { title: config.title, description: config.description, widgets, root: root.key, serverEvents };
+}

package/src/lib/event.ts

@@ -0,0 +1,12 @@
+import type { Event, EventCtor } from "./types.js";
+
+let counter = 0;
+
+// Declare an event. Each call is a distinct event with a unique `type`; the optional name is only
+// for readability. The returned constructor makes instances: `Token("hi") -> { type, payload }`.
+export function event<P = void>(name?: string): EventCtor<P> {
+  const type = `${name ?? "event"}#${counter++}`;
+  const ctor = ((payload: P): Event<P> => ({ type, payload })) as EventCtor<P>;
+  ctor.type = type;
+  return ctor;
+}

package/src/lib/index.ts

@@ -0,0 +1,21 @@
+export type {
+  Event,
+  EventCtor,
+  Emit,
+  On,
+  Widget,
+  SelfListen,
+  Produce,
+  Listen,
+  AppConfig,
+  KnobkitServer,
+} from "./types.js";
+export type { Handler } from "./on.js";
+export type { Bound } from "./bound.js";
+export { event } from "./event.js";
+export { widget } from "./widget.js";
+export { bound } from "./bound.js";
+export { stream } from "./stream.js";
+export { Knobkit, knobkit } from "./knobkit.js";
+export type { KnobkitApp } from "./knobkit.js";
+export * from "./widgets/index.js";

package/src/lib/knobkit.ts

@@ -0,0 +1,57 @@
+import type { AppConfig, KnobkitServer, EventCtor, Widget } from "./types.js";
+import type { Handler } from "./on.js";
+import { widgetKeys } from "./declare.js";
+import { collectSubapps } from "./widgets/embed.js";
+
+// The knobkit is the authored app: a set of widgets plus the `on(event, handler)` handlers registered
+// against their events. It holds no state — the browser owns that. Handlers run on the server (serve)
+// or in-browser (mount); both resolve a handler by the event's `type`.
+export class Knobkit {
+  readonly handlers = new Map<string, Handler<any>[]>();
+  readonly setups: Array<() => void | Promise<void>> = [];
+  private readonly keys: Map<Widget<any>, string>;
+
+  constructor(public config: AppConfig) {
+    this.keys = widgetKeys(config.widgets);
+    for (const sub of collectSubapps(config.widgets)) {
+      for (const [type, hs] of sub.handlers) this.handlers.set(type, [...(this.handlers.get(type) ?? []), ...hs]);
+      this.setups.push(...sub.setups);
+    }
+  }
+
+  keyFor(widget: Widget<any>): string {
+    const key = this.keys.get(widget);
+    if (!key) throw new Error("widget is not part of this knobkit — pass it to knobkit({ widgets })");
+    return key;
+  }
+
+  on<P>(source: EventCtor<P>, handler: Handler<P>): this {
+    const list = this.handlers.get(source.type) ?? [];
+    list.push(handler as Handler<any>);
+    this.handlers.set(source.type, list);
+    return this;
+  }
+
+  setup(fn: () => void | Promise<void>): this {
+    this.setups.push(fn);
+    return this;
+  }
+
+  serverEvents(): string[] {
+    return [...this.handlers.keys()];
+  }
+
+  mount(selector: string): void {
+    void import("../client/mount.js").then(({ mount }) => mount(this, selector));
+  }
+
+  serve(opts?: { port?: number }): Promise<KnobkitServer> {
+    return import("../server/serve.js").then(({ serve }) => serve(this, opts));
+  }
+}
+
+export type KnobkitApp = Knobkit;
+
+export function knobkit(config: AppConfig): Knobkit {
+  return new Knobkit(config);
+}

package/src/lib/on.ts

@@ -0,0 +1,3 @@
+import type { Event } from "./types.js";
+
+export type Handler<P> = (payload: P) => void | Event | Promise<void | Event>;

package/src/lib/stream.ts

@@ -0,0 +1,38 @@
+export async function* stream<T>(run: (push: (value: T) => void) => Promise<void> | void): AsyncGenerator<T> {
+  const buffer: T[] = [];
+  let wake: (() => void) | null = null;
+  let done = false;
+  let failure: unknown = null;
+
+  const push = (value: T): void => {
+    buffer.push(value);
+    wake?.();
+    wake = null;
+  };
+
+  Promise.resolve(run(push)).then(
+    () => {
+      done = true;
+      wake?.();
+    },
+    (err) => {
+      failure = err;
+      done = true;
+      wake?.();
+    },
+  );
+
+  while (true) {
+    if (buffer.length) {
+      yield buffer.shift()!;
+      continue;
+    }
+    if (done) {
+      if (failure) throw failure;
+      return;
+    }
+    await new Promise<void>((resolve) => {
+      wake = resolve;
+    });
+  }
+}

package/src/lib/types.ts

@@ -0,0 +1,63 @@
+export interface Event<P = unknown> {
+  type: string;
+  payload: P;
+}
+
+export interface EventCtor<P = void> {
+  (payload: P): Event<P>;
+  type: string;
+}
+
+export type Emit = <P>(event: Event<P>) => void;
+
+export type On<P = any> = EventCtor<P> | Widget<any>;
+
+export type Produce<P = any, I = any, V = any> = (
+  payload: P,
+  inputs: I,
+) => V | Promise<V> | AsyncIterable<V>;
+
+export interface Widget<S = unknown> {
+  type?: string;
+  state: S;
+  children?: Widget<any>[];
+  fold?: (state: any, value: any) => S;
+  behavior?: SelfListen<any, any>[];
+  view?: (state: S, emit: Emit) => unknown;
+  // Uniform control over whether the widget is interactive — see controls.ts. Provided by every widget
+  // factory. enabled is a persistent disable (dimmed); busy is a transient working state (a loading
+  // bar). Both drop the input events the widget emits.
+  enable(): void;
+  disable(): void;
+  setEnabled(value: boolean): void;
+  busyStart(): void;
+  busyEnd(): void;
+  busy<P = unknown>(run: (payload: P) => void | Event | Promise<void | Event>): (payload: P) => Promise<void | Event>;
+  [key: string]: unknown;
+}
+
+export interface SelfListen<P = any, V = any> {
+  on: EventCtor<P>;
+  from?: Record<string, Widget<any>>;
+  respond: Produce<P, any, V>;
+}
+
+export interface Listen<P = any, I = any, V = any> {
+  on: On<P>;
+  in: Widget<any>;
+  from?: Record<string, Widget<any>>;
+  respond: Produce<P, I, V>;
+}
+
+export interface AppConfig {
+  title?: string;
+  description?: string;
+  events?: EventCtor<any>[];
+  widgets: Widget<any> | Widget<any>[];
+  loading?: string; // raw HTML placed in #root before mount, for serve() (mount apps own index.html)
+}
+
+export interface KnobkitServer {
+  url: string;
+  stop(): Promise<void>;
+}

package/src/lib/widget.ts

@@ -0,0 +1,11 @@
+import { controls } from "./controls.js";
+import type { Emit, SelfListen, Widget } from "./types.js";
+
+export function widget<S>(init: {
+  state: S;
+  fold?: (state: S, value: any) => S;
+  view?: (state: S, emit: Emit) => unknown;
+  behavior?: SelfListen<any, any>[];
+}): Widget<S> {
+  return { state: init.state, fold: init.fold, view: init.view, behavior: init.behavior, ...controls };
+}

package/src/lib/widgets/annotated-image.ts

@@ -0,0 +1,34 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+import type { Widget } from "../types.js";
+
+export interface Annotation {
+  label: string;
+  // A bounding box as [xmin, ymin, xmax, ymax] in pixels of the image's natural size — the format
+  // detection models emit (and what gr.AnnotatedImage takes). The view divides by the loaded image's
+  // natural width/height to place it, so any displayed size works.
+  box?: [number, number, number, number];
+  // Optionally, a full-size mask image (URL or data URL) overlaid for this region (segmentation).
+  mask?: string;
+}
+
+export interface AnnotatedImageWidget
+  extends Widget<{ src: string; annotations: Annotation[]; colorMap: Record<string, string> }> {
+  // A base image with labeled regions on top: the standard output for detection / segmentation.
+  // `colorMap` pins a color per label; unmapped labels get a stable auto color in the view.
+  set(src: string, annotations?: Annotation[], colorMap?: Record<string, string>): void;
+}
+
+export function annotatedImage(): AnnotatedImageWidget {
+  return {
+    type: "annotatedImage",
+    state: { src: "", annotations: [], colorMap: {} },
+    ...controls,
+    set(src: string, annotations?: Annotation[], colorMap?: Record<string, string>): void {
+      const b = bound(this);
+      if (colorMap !== undefined) b.edit(this, "set", ["colorMap"], colorMap);
+      b.edit(this, "set", ["annotations"], annotations ?? []);
+      b.edit(this, "set", ["src"], src);
+    },
+  };
+}

package/src/lib/widgets/audio.ts

@@ -0,0 +1,20 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+import type { Widget } from "../types.js";
+
+export interface AudioWidget extends Widget<{ src: string }> {
+  autoplay: boolean;
+  set(value: string): void; // set the audio source (URL or data URL)
+}
+
+export function audio(opts: { autoplay?: boolean } = {}): AudioWidget {
+  return {
+    type: "audio",
+    state: { src: "" },
+    autoplay: opts.autoplay ?? false,
+    ...controls,
+    set(value: string): void {
+      bound(this).edit(this, "set", ["src"], value);
+    },
+  };
+}

package/src/lib/widgets/button.ts

@@ -0,0 +1,27 @@
+import { event } from "../event.js";
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+import type { EventCtor, Widget } from "../types.js";
+
+export interface ButtonState {
+  label: string;
+}
+
+export interface ButtonWidget extends Widget<ButtonState> {
+  clicked: EventCtor;
+  set(patch: Partial<ButtonState>): void;
+}
+
+// state is the label it shows; whether it's interactive is the framework-level enabled flag (controls)
+export function button(opts: { label: string }): ButtonWidget {
+  return {
+    type: "button",
+    state: { label: opts.label },
+    clicked: event("button.clicked"),
+    ...controls,
+    set(patch: Partial<ButtonState>): void {
+      const rt = bound(this);
+      for (const [k, v] of Object.entries(patch)) rt.edit(this, "set", [k], v);
+    },
+  };
+}

package/src/lib/widgets/chart.ts

@@ -0,0 +1,44 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+import type { Widget } from "../types.js";
+
+export type Point = Record<string, unknown>;
+
+export interface ChartWidget extends Widget<{ data: Point[] }> {
+  kind: "bar" | "line" | "area";
+  x: string; // key for the category/x axis
+  y: string | string[]; // one or more series keys to plot
+  maxHeight: number;
+  data(): Promise<Point[]>;
+  setData(data: Point[]): void; // replace the plotted data
+  push(point: Point): void; // append one data point (append ["data"])
+}
+
+// A read-only chart rendered by Recharts. Pure output: state is `{ data }` (an array of row objects)
+// and the view reads it; nothing rounds-trips back. `x`/`y` name which keys map to the axes/series.
+export function chart(opts: {
+  x: string;
+  y: string | string[];
+  kind?: "bar" | "line" | "area";
+  data?: Point[];
+  maxHeight?: number;
+}): ChartWidget {
+  return {
+    type: "chart",
+    state: { data: opts.data ?? [] },
+    kind: opts.kind ?? "bar",
+    x: opts.x,
+    y: opts.y,
+    maxHeight: opts.maxHeight ?? 300,
+    ...controls,
+    data(): Promise<Point[]> {
+      return bound(this).read<Point[]>(this, ["data"]);
+    },
+    setData(data: Point[]): void {
+      bound(this).edit(this, "set", ["data"], data);
+    },
+    push(point: Point): void {
+      bound(this).edit(this, "append", ["data"], point);
+    },
+  };
+}

package/src/lib/widgets/chat.ts

@@ -0,0 +1,43 @@
+import { event } from "../event.js";
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+import type { EventCtor, Widget } from "../types.js";
+
+export interface Message {
+  role: "user" | "assistant" | "system";
+  content: string;
+  image?: string; // optional attached image, as a data URL
+}
+
+export interface ChatWidget extends Widget<{ messages: Message[] }> {
+  sent: EventCtor<{ text: string; image?: string }>;
+  recorded: EventCtor<Float32Array>;
+  placeholder: string;
+  voice: boolean;
+  images: boolean;
+  history(): Promise<Message[]>;
+  say(message: Message): void; // append a whole message
+  append(token: string): void; // stream a token into the last message's content
+}
+
+export function chat(opts: { placeholder?: string; voice?: boolean; images?: boolean } = {}): ChatWidget {
+  return {
+    type: "chat",
+    state: { messages: [] },
+    sent: event<{ text: string; image?: string }>("chat.sent"),
+    recorded: event<Float32Array>("chat.recorded"),
+    placeholder: opts.placeholder ?? "Say something…",
+    voice: opts.voice ?? false,
+    images: opts.images ?? false,
+    ...controls,
+    history(): Promise<Message[]> {
+      return bound(this).read<Message[]>(this, ["messages"]);
+    },
+    say(message: Message): void {
+      bound(this).edit(this, "append", ["messages"], message);
+    },
+    append(token: string): void {
+      bound(this).edit(this, "appendText", ["messages", -1, "content"], token);
+    },
+  };
+}

package/src/lib/widgets/checkbox-group.ts

@@ -0,0 +1,6 @@
+import { value } from "./value.js";
+
+// Multi-select from a fixed set; its `value` is the array of checked choices.
+export function checkboxGroup(opts: { choices: string[]; value?: string[] }) {
+  return value<string[]>("checkboxGroup", opts.value ?? [], { choices: opts.choices });
+}

package/src/lib/widgets/checkbox.ts

@@ -0,0 +1,5 @@
+import { value } from "./value.js";
+
+export function checkbox(opts: { label?: string; value?: boolean } = {}) {
+  return value("checkbox", opts.value ?? false, { label: opts.label });
+}

package/src/lib/widgets/code.ts

@@ -0,0 +1,11 @@
+import { value } from "./value.js";
+
+// A code editor over the uniform `value` attribute: holds `{ value: string }`, plus `language` (syntax
+// highlighting) and `editable` (false = a read-only, still-highlighted viewer) as static props. The
+// CodeMirror instance lives in the view; this stays a plain value widget (changed/value()/set()).
+export function code(opts: { value?: string; language?: string; editable?: boolean } = {}) {
+  return value("code", opts.value ?? "", {
+    language: opts.language ?? "",
+    editable: opts.editable ?? true,
+  });
+}

package/src/lib/widgets/dropdown.ts

@@ -0,0 +1,5 @@
+import { value } from "./value.js";
+
+export function dropdown(opts: { choices: string[]; value?: string }) {
+  return value("dropdown", opts.value ?? opts.choices[0]!, { choices: opts.choices });
+}

package/src/lib/widgets/embed.ts

@@ -0,0 +1,26 @@
+import type { Knobkit } from "../knobkit.js";
+import type { Widget } from "../types.js";
+import { col } from "./layout.js";
+
+export const SUBAPP = "__subapp";
+
+export function embed(app: Knobkit): Widget {
+  const ws = app.config.widgets;
+  const node = col(...(Array.isArray(ws) ? ws : [ws])) as Widget;
+  node[SUBAPP] = app;
+  return node;
+}
+
+export function collectSubapps(widgets: Widget | Widget[]): Knobkit[] {
+  const out: Knobkit[] = [];
+  const visit = (w: Widget): void => {
+    const sub = w[SUBAPP] as Knobkit | undefined;
+    if (sub) {
+      out.push(sub);
+      return;
+    }
+    for (const c of w.children ?? []) visit(c);
+  };
+  for (const w of Array.isArray(widgets) ? widgets : [widgets]) visit(w);
+  return out;
+}