@silvery/examples 0.5.6 → 0.17.4

package/dist/usingCtx-CsEf0xO3.mjs

@@ -0,0 +1,57 @@
+//#region \0@oxc-project+runtime@0.122.0/helpers/usingCtx.js
+function _usingCtx() {
+	var r = "function" == typeof SuppressedError ? SuppressedError : function(r, e) {
+		var n = Error();
+		return n.name = "SuppressedError", n.error = r, n.suppressed = e, n;
+	}, e = {}, n = [];
+	function using(r, e) {
+		if (null != e) {
+			if (Object(e) !== e) throw new TypeError("using declarations can only be used with objects, functions, null, or undefined.");
+			if (r) var o = e[Symbol.asyncDispose || Symbol["for"]("Symbol.asyncDispose")];
+			if (void 0 === o && (o = e[Symbol.dispose || Symbol["for"]("Symbol.dispose")], r)) var t = o;
+			if ("function" != typeof o) throw new TypeError("Object is not disposable.");
+			t && (o = function o() {
+				try {
+					t.call(e);
+				} catch (r) {
+					return Promise.reject(r);
+				}
+			}), n.push({
+				v: e,
+				d: o,
+				a: r
+			});
+		} else r && n.push({
+			d: e,
+			a: r
+		});
+		return e;
+	}
+	return {
+		e,
+		u: using.bind(null, !1),
+		a: using.bind(null, !0),
+		d: function d() {
+			var o, t = this.e, s = 0;
+			function next() {
+				for (; o = n.pop();) try {
+					if (!o.a && 1 === s) return s = 0, n.push(o), Promise.resolve().then(next);
+					if (o.d) {
+						var r = o.d.call(o.v);
+						if (o.a) return s |= 2, Promise.resolve(r).then(next, err);
+					} else s |= 1;
+				} catch (r) {
+					return err(r);
+				}
+				if (1 === s) return t !== e ? Promise.reject(t) : Promise.resolve();
+				if (t !== e) throw t;
+			}
+			function err(n) {
+				return t = t !== e ? new r(n, t) : n, next();
+			}
+			return next();
+		}
+	};
+}
+//#endregion
+export { _usingCtx as t };

package/dist/yoga-adapter-BVtQ5OJR.mjs

@@ -0,0 +1,237 @@
+//#region ../packages/ag-term/src/adapters/yoga-adapter.ts
+/**
+* Wraps a Yoga node to implement LayoutNode interface.
+*/
+var YogaNodeAdapter = class {
+	node;
+	yoga;
+	hasMeasureFunc = false;
+	constructor(node, yoga) {
+		this.node = node;
+		this.yoga = yoga;
+	}
+	/** Get the underlying Yoga node (for tree operations) */
+	getYogaNode() {
+		return this.node;
+	}
+	insertChild(child, index) {
+		const yogaChild = child.getYogaNode();
+		this.node.insertChild(yogaChild, index);
+	}
+	removeChild(child) {
+		const yogaChild = child.getYogaNode();
+		this.node.removeChild(yogaChild);
+	}
+	free() {
+		this.node.free();
+	}
+	setMeasureFunc(measureFunc) {
+		this.hasMeasureFunc = true;
+		this.node.setMeasureFunc((width, widthMode, height, heightMode) => {
+			return measureFunc(width, this.measureModeToString(widthMode), height, this.measureModeToString(heightMode));
+		});
+	}
+	markDirty() {
+		if (this.hasMeasureFunc) this.node.markDirty();
+	}
+	measureModeToString(mode) {
+		if (mode === this.yoga.MEASURE_MODE_EXACTLY) return "exactly";
+		if (mode === this.yoga.MEASURE_MODE_AT_MOST) return "at-most";
+		return "undefined";
+	}
+	setWidth(value) {
+		this.node.setWidth(value);
+	}
+	setWidthPercent(value) {
+		this.node.setWidthPercent(value);
+	}
+	setWidthAuto() {
+		this.node.setWidthAuto();
+	}
+	setHeight(value) {
+		this.node.setHeight(value);
+	}
+	setHeightPercent(value) {
+		this.node.setHeightPercent(value);
+	}
+	setHeightAuto() {
+		this.node.setHeightAuto();
+	}
+	setMinWidth(value) {
+		this.node.setMinWidth(value);
+	}
+	setMinWidthPercent(value) {
+		this.node.setMinWidthPercent(value);
+	}
+	setMinHeight(value) {
+		this.node.setMinHeight(value);
+	}
+	setMinHeightPercent(value) {
+		this.node.setMinHeightPercent(value);
+	}
+	setMaxWidth(value) {
+		this.node.setMaxWidth(value);
+	}
+	setMaxWidthPercent(value) {
+		this.node.setMaxWidthPercent(value);
+	}
+	setMaxHeight(value) {
+		this.node.setMaxHeight(value);
+	}
+	setMaxHeightPercent(value) {
+		this.node.setMaxHeightPercent(value);
+	}
+	setFlexGrow(value) {
+		this.node.setFlexGrow(value);
+	}
+	setFlexShrink(value) {
+		this.node.setFlexShrink(value);
+	}
+	setFlexBasis(value) {
+		this.node.setFlexBasis(value);
+	}
+	setFlexBasisPercent(value) {
+		this.node.setFlexBasisPercent(value);
+	}
+	setFlexBasisAuto() {
+		this.node.setFlexBasisAuto();
+	}
+	setFlexDirection(direction) {
+		this.node.setFlexDirection(direction);
+	}
+	setFlexWrap(wrap) {
+		this.node.setFlexWrap(wrap);
+	}
+	setAlignItems(align) {
+		this.node.setAlignItems(align);
+	}
+	setAlignSelf(align) {
+		this.node.setAlignSelf(align);
+	}
+	setAlignContent(align) {
+		this.node.setAlignContent(align);
+	}
+	setJustifyContent(justify) {
+		this.node.setJustifyContent(justify);
+	}
+	setPadding(edge, value) {
+		this.node.setPadding(edge, value);
+	}
+	setMargin(edge, value) {
+		this.node.setMargin(edge, value);
+	}
+	setBorder(edge, value) {
+		this.node.setBorder(edge, value);
+	}
+	setGap(gutter, value) {
+		this.node.setGap(gutter, value);
+	}
+	setDisplay(display) {
+		this.node.setDisplay(display);
+	}
+	setPositionType(positionType) {
+		this.node.setPositionType(positionType);
+	}
+	setPosition(edge, value) {
+		this.node.setPosition(edge, value);
+	}
+	setPositionPercent(edge, value) {
+		this.node.setPositionPercent(edge, value);
+	}
+	setOverflow(overflow) {
+		this.node.setOverflow(overflow);
+	}
+	setAspectRatio(value) {
+		this.node.setAspectRatio(value);
+	}
+	calculateLayout(width, height, direction) {
+		this.node.calculateLayout(width, height, direction ?? this.yoga.DIRECTION_LTR);
+	}
+	getComputedLeft() {
+		return this.node.getComputedLeft();
+	}
+	getComputedTop() {
+		return this.node.getComputedTop();
+	}
+	getComputedWidth() {
+		return this.node.getComputedWidth();
+	}
+	getComputedHeight() {
+		return this.node.getComputedHeight();
+	}
+};
+/**
+* Layout engine implementation using Yoga (WASM).
+*/
+var YogaLayoutEngine = class {
+	yoga;
+	_constants;
+	constructor(yoga) {
+		this.yoga = yoga;
+		this._constants = {
+			FLEX_DIRECTION_COLUMN: yoga.FLEX_DIRECTION_COLUMN,
+			FLEX_DIRECTION_COLUMN_REVERSE: yoga.FLEX_DIRECTION_COLUMN_REVERSE,
+			FLEX_DIRECTION_ROW: yoga.FLEX_DIRECTION_ROW,
+			FLEX_DIRECTION_ROW_REVERSE: yoga.FLEX_DIRECTION_ROW_REVERSE,
+			WRAP_NO_WRAP: yoga.WRAP_NO_WRAP,
+			WRAP_WRAP: yoga.WRAP_WRAP,
+			WRAP_WRAP_REVERSE: yoga.WRAP_WRAP_REVERSE,
+			ALIGN_AUTO: yoga.ALIGN_AUTO,
+			ALIGN_FLEX_START: yoga.ALIGN_FLEX_START,
+			ALIGN_CENTER: yoga.ALIGN_CENTER,
+			ALIGN_FLEX_END: yoga.ALIGN_FLEX_END,
+			ALIGN_STRETCH: yoga.ALIGN_STRETCH,
+			ALIGN_BASELINE: yoga.ALIGN_BASELINE,
+			ALIGN_SPACE_BETWEEN: yoga.ALIGN_SPACE_BETWEEN,
+			ALIGN_SPACE_AROUND: yoga.ALIGN_SPACE_AROUND,
+			ALIGN_SPACE_EVENLY: yoga.ALIGN_SPACE_EVENLY,
+			JUSTIFY_FLEX_START: yoga.JUSTIFY_FLEX_START,
+			JUSTIFY_CENTER: yoga.JUSTIFY_CENTER,
+			JUSTIFY_FLEX_END: yoga.JUSTIFY_FLEX_END,
+			JUSTIFY_SPACE_BETWEEN: yoga.JUSTIFY_SPACE_BETWEEN,
+			JUSTIFY_SPACE_AROUND: yoga.JUSTIFY_SPACE_AROUND,
+			JUSTIFY_SPACE_EVENLY: yoga.JUSTIFY_SPACE_EVENLY,
+			EDGE_LEFT: yoga.EDGE_LEFT,
+			EDGE_TOP: yoga.EDGE_TOP,
+			EDGE_RIGHT: yoga.EDGE_RIGHT,
+			EDGE_BOTTOM: yoga.EDGE_BOTTOM,
+			EDGE_HORIZONTAL: yoga.EDGE_HORIZONTAL,
+			EDGE_VERTICAL: yoga.EDGE_VERTICAL,
+			EDGE_ALL: yoga.EDGE_ALL,
+			GUTTER_COLUMN: yoga.GUTTER_COLUMN,
+			GUTTER_ROW: yoga.GUTTER_ROW,
+			GUTTER_ALL: yoga.GUTTER_ALL,
+			DISPLAY_FLEX: yoga.DISPLAY_FLEX,
+			DISPLAY_NONE: yoga.DISPLAY_NONE,
+			POSITION_TYPE_STATIC: yoga.POSITION_TYPE_STATIC,
+			POSITION_TYPE_RELATIVE: yoga.POSITION_TYPE_RELATIVE,
+			POSITION_TYPE_ABSOLUTE: yoga.POSITION_TYPE_ABSOLUTE,
+			OVERFLOW_VISIBLE: yoga.OVERFLOW_VISIBLE,
+			OVERFLOW_HIDDEN: yoga.OVERFLOW_HIDDEN,
+			OVERFLOW_SCROLL: yoga.OVERFLOW_SCROLL,
+			DIRECTION_LTR: yoga.DIRECTION_LTR,
+			MEASURE_MODE_UNDEFINED: yoga.MEASURE_MODE_UNDEFINED,
+			MEASURE_MODE_EXACTLY: yoga.MEASURE_MODE_EXACTLY,
+			MEASURE_MODE_AT_MOST: yoga.MEASURE_MODE_AT_MOST
+		};
+	}
+	createNode() {
+		return new YogaNodeAdapter(this.yoga.Node.create(), this.yoga);
+	}
+	get constants() {
+		return this._constants;
+	}
+	get name() {
+		return "yoga";
+	}
+};
+/**
+* Initialize Yoga and create a layout engine.
+* Uses yoga-wasm-web/auto which automatically selects the right implementation.
+*/
+async function initYogaEngine() {
+	const { default: yoga } = await import("./node-NuJ94BWl.mjs");
+	return new YogaLayoutEngine(yoga);
+}
+//#endregion
+export { initYogaEngine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silvery/examples",
-  "version": "0.5.6",
+  "version": "0.17.4",
   "description": "Example apps and component demos for silvery — npx @silvery/examples <name>",
   "license": "MIT",
   "author": "Bjørn Stabell <bjorn@stabell.org>",
@@ -11,17 +11,10 @@
   },
   "type": "module",
   "bin": {
-    "silvery-examples": "./dist/cli.mjs"
+    "silvery-examples": "./dist/bin/cli.mjs"
   },
   "files": [
-    "dist",
-    "components",
-    "apps",
-    "layout",
-    "runtime",
-    "inline",
-    "kitty",
-    "_banner.tsx"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -33,13 +26,25 @@
     "access": "public"
   },
   "tsdown": {
-    "entry": "bin/cli.ts",
+    "entry": [
+      "bin/cli.ts",
+      "components/*.tsx",
+      "apps/*.tsx",
+      "apps/aichat/index.tsx",
+      "layout/*.tsx"
+    ],
     "format": "esm",
-    "dts": true,
-    "clean": true
+    "dts": false,
+    "clean": true,
+    "external": [
+      "silvery",
+      "silvery/*",
+      "react",
+      "loggily"
+    ]
   },
   "dependencies": {
-    "silvery": "0.17.2"
+    "silvery": "0.17.3"
   },
   "engines": {
     "bun": ">=1.0",

package/_banner.tsx

@@ -1,60 +0,0 @@
-import React from "react"
-import { Box, Text, Strong, Muted, ThemeProvider, getThemeByName, type Theme } from "silvery"
-
-export interface ExampleMeta {
-  name: string
-  description: string
-  /** API features showcased, e.g. ["ListView", "useBoxRect()"] */
-  features?: string[]
-  /** Curated demo — shown in CLI viewer (`bun examples`) and web showcase */
-  demo?: boolean
-}
-
-interface Props {
-  meta: ExampleMeta
-  /** Short controls legend, e.g. "j/k navigate  q quit" */
-  controls?: string
-  /** Override theme (from viewer). Falls back to SILVERY_THEME env var. */
-  theme?: Theme
-  children: React.ReactNode
-}
-
-/**
- * Compact header shown when examples run standalone.
- * Wraps children in ThemeProvider for consistent theming.
- */
-export function ExampleBanner({ meta, controls, theme, children }: Props) {
-  const resolvedTheme = theme ?? getThemeByName(process.env.SILVERY_THEME)
-
-  return (
-    <ThemeProvider theme={resolvedTheme}>
-      <Box flexDirection="column" flexGrow={1}>
-        {/* One-line header: dimmed to not compete with example UI */}
-        <Box paddingX={1} gap={1}>
-          <Text dim color="$warning">
-            {"▸ silvery"}
-          </Text>
-          <Strong>{meta.name}</Strong>
-          <Muted>— {meta.description}</Muted>
-        </Box>
-        {meta.features && meta.features.length > 0 && (
-          <Box paddingX={1}>
-            <Muted>
-              {"  "}
-              {meta.features.join(" · ")}
-            </Muted>
-          </Box>
-        )}
-        {controls && (
-          <Box paddingX={1}>
-            <Muted>
-              {"  "}
-              {controls}
-            </Muted>
-          </Box>
-        )}
-        {children}
-      </Box>
-    </ThemeProvider>
-  )
-}