@number10/jsx-components 5.0.0

package/dist/Modal.js

@@ -0,0 +1,174 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import { Portal as t } from "./Portal.js";
+import { useOverlayPresence as n } from "./useOverlayPresence.js";
+import { KNOWN_COMPONENTS as r, applyEffect as i, getGlobalThemeDefaults as a, registerComponentDefaultsIfMissing as o, resolveComponentTheme as s, stopAnimationEffect as c, useCallback as l, useEffect as u, useRef as d, useTheme as f, useViewportSize as p } from "@number10/jsx-core";
+import { Fragment as m, jsx as h, jsxs as g } from "@number10/jsx-core/jsx-runtime";
+//#region src/Modal.tsx
+function _(e, t) {
+	if (!e || typeof e != "object") return;
+	let n = e;
+	if (typeof n.setVisible == "function") {
+		n.setVisible(t);
+		return;
+	}
+	"visible" in n && (n.visible = t);
+}
+o("Modal", {
+	backdropColor: 0,
+	backdropOpacity: .5,
+	openDuration: 320,
+	closeDuration: 260
+});
+function v(t) {
+	let n = p(), r = d(null), a = d(null), o = d(!1), s = d(!1), f = d(0), v = d(null), y = d(null), b = d(t.onOpen), x = d(t.onClosed), S = d(t.onRequestClose), C = l((e) => {
+		r.current = e;
+	}, []), w = l((e) => {
+		a.current = e;
+	}, []), T = l(() => {
+		v.current !== null && (window.clearTimeout(v.current), v.current = null);
+	}, []), E = l(() => {
+		y.current !== null && (window.clearTimeout(y.current), y.current = null);
+	}, []), D = l((e) => {
+		e && typeof e == "object" && c(e);
+	}, []);
+	return u(() => {
+		b.current = t.onOpen, x.current = t.onClosed, S.current = t.onRequestClose;
+	}, [
+		t.onClosed,
+		t.onOpen,
+		t.onRequestClose
+	]), u(() => {
+		t.show || (o.current = !1, s.current = !1);
+	}, [t.show]), u(() => {
+		let e = r.current, n = a.current;
+		if (!e || !n) return;
+		T(), E(), D(n), D(e);
+		let c = () => {
+			let r = ++f.current;
+			o.current = !0, s.current = !1, t.closeRequestedRef.current = !1, _(e, !0), _(n, !0), b.current?.();
+			let a = () => {
+				r === f.current && (T(), t.finishEnter());
+			};
+			return v.current = window.setTimeout(() => {
+				a();
+			}, t.openDurationMs), i(n, t.viewOpenEffect, {
+				time: t.openDurationMs,
+				onComplete: a
+			}), i(e, "fadeIn", { time: t.openDurationMs }), () => {
+				r === f.current && T();
+			};
+		};
+		if (t.show && t.phase === "entering" && !o.current) return c();
+		if (t.show && t.phase === "entered" && !o.current) return console.warn("[Modal] starting enter animation on entered phase (likely async portal timing)"), c();
+		if (!t.show && t.phase === "exiting" && !s.current) {
+			let r = ++f.current;
+			s.current = !0, _(e, !0), _(n, !0);
+			let a = () => {
+				r === f.current && (E(), _(e, !1), _(n, !1), t.finishExit(), (S.current !== void 0 || !t.closeRequestedRef.current) && x.current?.(), t.closeRequestedRef.current = !1);
+			};
+			return y.current = window.setTimeout(() => {
+				a();
+			}, t.closeDurationMs), i(n, t.viewCloseEffect, {
+				time: t.closeDurationMs,
+				onComplete: a
+			}), i(e, "fadeOut", { time: t.closeDurationMs }), () => {
+				r === f.current && E();
+			};
+		}
+	}, [
+		E,
+		T,
+		t.closeDurationMs,
+		t.closeRequestedRef,
+		t.finishEnter,
+		t.finishExit,
+		t.openDurationMs,
+		t.phase,
+		t.show,
+		t.viewCloseEffect,
+		t.viewOpenEffect,
+		D
+	]), u(() => () => {
+		T(), E(), D(a.current), D(r.current);
+	}, [
+		E,
+		T,
+		D
+	]), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {
+		ref: C,
+		width: n.width,
+		height: n.height,
+		backgroundColor: t.themedModal.backdropColor ?? 0,
+		alpha: t.themedModal.backdropOpacity ?? .5,
+		onTouch: (e) => {
+			e.stopPropagation(), t.closeOnBackdrop && t.requestClose();
+		},
+		onTouchMove: (e) => {
+			e.stopPropagation();
+		}
+	}), /* @__PURE__ */ h(e, {
+		width: n.width,
+		height: n.height,
+		direction: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		children: /* @__PURE__ */ h(e, {
+			ref: w,
+			onTouch: (e) => e.stopPropagation(),
+			onTouchMove: (e) => e.stopPropagation(),
+			theme: t.nestedTheme,
+			children: t.children
+		})
+	})] });
+}
+function y(e) {
+	let i = f(), { props: o, nestedTheme: c } = s({
+		componentName: "Modal",
+		globalTheme: a(),
+		localTheme: i,
+		knownComponents: r
+	}), p = o, m = e.closeOnBackdrop ?? !0, g = e.closeOnEscape ?? !0, _ = p.openDuration ?? 320, y = p.closeDuration ?? 260, b = n(e.show), x = d(!1), S = e.viewOpenEffect ?? "fadeIn", C = e.viewCloseEffect ?? "fadeOut", w = l(() => {
+		if (x.current = !0, e.onRequestClose) {
+			e.onRequestClose();
+			return;
+		}
+		e.onClosed?.();
+	}, [e.onClosed, e.onRequestClose]);
+	return u(() => {
+		if (!g || !e.show) return;
+		let t = (e) => {
+			e.key === "Escape" && w();
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [
+		g,
+		e.show,
+		w
+	]), b.isPresent ? /* @__PURE__ */ h(t, {
+		...e.key && { key: e.key },
+		depth: e.depth ?? 1e3,
+		blockEvents: !1,
+		children: /* @__PURE__ */ h(v, {
+			show: e.show,
+			phase: b.phase,
+			finishEnter: b.finishEnter,
+			finishExit: b.finishExit,
+			closeOnBackdrop: m,
+			themedModal: p,
+			nestedTheme: c,
+			openDurationMs: _,
+			closeDurationMs: y,
+			viewOpenEffect: S,
+			viewCloseEffect: C,
+			onOpen: e.onOpen,
+			onClosed: e.onClosed,
+			onRequestClose: e.onRequestClose,
+			requestClose: w,
+			closeRequestedRef: x,
+			children: e.children
+		})
+	}) : null;
+}
+//#endregion
+export { y as Modal };

package/dist/Modal.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Modal.test.d.ts.map

package/dist/Modal.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.test.d.ts","sourceRoot":"","sources":["../src/Modal.test.tsx"],"names":[],"mappings":""}

package/dist/NineSlice.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Image.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);function i(e,t,r,i,a,o){return(0,n.computeSourceSlices)(e,t,r,i,a,o).map(e=>({...e}))}function a(){return(0,n.getCurrentOrThrow)().surface?.capabilities?.has(`nineslice`)===!0}function o(e,t=!0){return!(e===`fallback`||!a()||!t)}function s(e,t,r){let i={...e,...t===void 0?{}:{key:t},...r===void 0?{}:{theme:r}};return(0,n.jsx)(n.PRIMITIVE_NODES.NineSlice,i)}function c(t,n,i,a,c,l,u,d,f,p,m){if(o(a))return s({texture:t,frame:n,tint:i,width:l,height:u,leftWidth:d,rightWidth:f,topHeight:p,bottomHeight:m,depth:0});let h=Math.max(0,l-d-f),g=Math.max(0,u-p-m),_=p===0&&m===0,v=(a,o,s,c,l,u)=>(0,r.jsx)(e.Image,{headless:!0,depth:0,x:s,y:c,originX:0,originY:0,texture:t,frame:n,tint:i,sourceRect:o,width:l,height:u,displayWidth:l,displayHeight:u},a);if(_){let e=c[3],t=c[4],n=c[5];return[v(`l`,e,0,0,d,u),v(`c`,t,d,0,h,u),v(`r`,n,l-f,0,f,u)]}let y=c[0],b=c[1],x=c[2],S=c[3],C=c[4],w=c[5],T=c[6],E=c[7],D=c[8];return[v(`tl`,y,0,0,d,p),v(`t`,b,d,0,h,p),v(`tr`,x,l-f,0,f,p),v(`l`,S,0,p,d,g),v(`c`,C,d,p,h,g),v(`r`,w,l-f,p,f,g),v(`bl`,T,0,u-m,d,m),v(`b`,E,d,u-m,h,m),v(`br`,D,l-f,u-m,f,m)]}function l(e,t){let r=(0,n.getCurrentOrThrow)().surface?.textureLoader,[i,a]=(0,n.useState)(null);return(0,n.useEffect)(()=>{if(!r)return;let n;if(t){let i=r.getFrameRect(e,t);i&&(n={w:i.width,h:i.height})}if(!n){let t=r.getTextureSize(e);t&&(n={w:t.width,h:t.height})}a(n??null)},[e,t,r]),i}function u(e){let{texture:t,frame:n,leftWidth:r,rightWidth:i,topHeight:a,bottomHeight:o,width:c,height:l,tint:u,theme:d,key:f}=e;return s({texture:t,frame:n,tint:u,leftWidth:r,rightWidth:i,topHeight:a,bottomHeight:o,width:c,height:l},f,d)}function d(a){if(o(a.renderMode,a.width!==void 0&&a.height!==void 0))return(0,r.jsx)(u,{...a});let{texture:s,frame:c,leftWidth:d,rightWidth:f,topHeight:p,bottomHeight:m,width:h,height:g,tint:_,theme:v,key:y}=a,b=p===0&&m===0,x=l(s,c),S=(0,n.useMemo)(()=>x?i(x.w,x.h,d,f,p,m):null,[x,d,f,p,m]);if(!S)return(0,r.jsx)(t.View,{width:h,height:g,theme:v},y);let C=typeof h==`number`?h:void 0,w=typeof g==`number`?g:void 0,T=C==null?void 0:C-d-f,E=w==null?void 0:w-p-m,D=(e,t,n)=>({texture:s,frame:c,tint:_,sourceRect:e,...t==null?{}:{displayWidth:t},...n==null?{}:{displayHeight:n}});if(b){let i=S[3],a=S[4],o=S[5];return(0,r.jsxs)(t.View,{direction:`row`,width:h,height:g,theme:v,children:[(0,n.createElement)(e.Image,{...D(i,d,w),width:d,height:`100%`,key:`l`}),(0,n.createElement)(e.Image,{...D(a,T,w),flex:1,height:`100%`,key:`c`}),(0,n.createElement)(e.Image,{...D(o,f,w),width:f,height:`100%`,key:`r`})]},y)}let O=S[0],k=S[1],A=S[2],j=S[3],M=S[4],N=S[5],P=S[6],F=S[7],I=S[8];return(0,r.jsxs)(t.View,{direction:`column`,width:h,height:g,theme:v,children:[(0,r.jsxs)(t.View,{direction:`row`,width:`fill`,height:p,children:[(0,n.createElement)(e.Image,{...D(O,d,p),width:d,height:p,key:`tl`}),(0,n.createElement)(e.Image,{...D(k,T,p),flex:1,height:p,key:`t`}),(0,n.createElement)(e.Image,{...D(A,f,p),width:f,height:p,key:`tr`})]},`row-t`),(0,r.jsxs)(t.View,{direction:`row`,width:`fill`,flex:1,children:[(0,n.createElement)(e.Image,{...D(j,d,E),width:d,height:`100%`,key:`l`}),(0,n.createElement)(e.Image,{...D(M,T,E),flex:1,height:`100%`,key:`c`}),(0,n.createElement)(e.Image,{...D(N,f,E),width:f,height:`100%`,key:`r`})]},`row-m`),(0,r.jsxs)(t.View,{direction:`row`,width:`fill`,height:m,children:[(0,n.createElement)(e.Image,{...D(P,d,m),width:d,height:m,key:`bl`}),(0,n.createElement)(e.Image,{...D(F,T,m),flex:1,height:m,key:`b`}),(0,n.createElement)(e.Image,{...D(I,f,m),width:f,height:m,key:`br`})]},`row-b`)]},y)}function f(e){let{texture:a,frame:o,leftWidth:s,rightWidth:u,topHeight:d,bottomHeight:f,width:p,height:m,tint:h,children:g,renderMode:_,alignItems:v=`start`,justifyContent:y=`start`,gap:b,padding:x,theme:S,key:C}=e,w=l(a,o),T=(0,n.useMemo)(()=>w?i(w.w,w.h,s,u,d,f):null,[w,s,u,d,f]),E={left:s+(x?.left??0),right:u+(x?.right??0),top:d+(x?.top??0),bottom:f+(x?.bottom??0)};return(0,r.jsxs)(t.View,{direction:`stack`,width:p,height:m,theme:S,children:[T?c(a,o,h,_,T,p,m,s,u,d,f):null,(0,r.jsx)(t.View,{direction:`column`,depth:1,width:`100%`,height:`100%`,alignItems:v,justifyContent:y,gap:b,padding:E,children:g})]},C)}function p(e){return e.children===void 0?(0,r.jsx)(d,{texture:e.texture,frame:e.frame,leftWidth:e.leftWidth,rightWidth:e.rightWidth,topHeight:e.topHeight??0,bottomHeight:e.bottomHeight??0,width:e.width,height:e.height,tint:e.tint,renderMode:e.renderMode,theme:e.theme},e.key):(0,r.jsx)(f,{texture:e.texture,frame:e.frame,leftWidth:e.leftWidth,rightWidth:e.rightWidth,topHeight:e.topHeight??0,bottomHeight:e.bottomHeight??0,width:e.width,height:e.height,tint:e.tint,renderMode:e.renderMode,children:e.children,alignItems:e.alignItems,justifyContent:e.justifyContent,gap:e.gap,padding:e.padding,theme:e.theme},e.key)}exports.NineSlice=p;

package/dist/NineSlice.d.ts

@@ -0,0 +1,40 @@
+import { ChildrenType, EdgeInsets, GapInsets, SizeValue, VNodeLike } from '@number10/jsx-core';
+import { PortablePartialTheme } from './theme-types';
+type NineSliceAlignItems = 'start' | 'center' | 'end' | 'stretch';
+type NineSliceJustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+type NineSliceRenderMode = 'auto' | 'native' | 'fallback';
+interface NineSliceBaseProps {
+    texture: string;
+    frame?: string | undefined;
+    leftWidth: number;
+    rightWidth: number;
+    topHeight?: number | undefined;
+    bottomHeight?: number | undefined;
+    tint?: number | undefined;
+    /** Select native vs fallback rendering explicitly for testing/debugging. */
+    renderMode?: NineSliceRenderMode | undefined;
+    theme?: PortablePartialTheme | undefined;
+    key?: string | number | undefined;
+}
+interface NineSliceDecorativeProps extends NineSliceBaseProps {
+    width?: SizeValue | undefined;
+    height?: SizeValue | undefined;
+    children?: undefined;
+    alignItems?: undefined;
+    justifyContent?: undefined;
+    gap?: undefined;
+    padding?: undefined;
+}
+interface NineSliceContentProps extends NineSliceBaseProps {
+    width: number;
+    height: number;
+    children: ChildrenType;
+    alignItems?: NineSliceAlignItems | undefined;
+    justifyContent?: NineSliceJustifyContent | undefined;
+    gap?: number | GapInsets | undefined;
+    padding?: EdgeInsets | undefined;
+}
+export type NineSliceProps = NineSliceDecorativeProps | NineSliceContentProps;
+export declare function NineSlice(props: NineSliceProps): VNodeLike;
+export {};
+//# sourceMappingURL=NineSlice.d.ts.map

package/dist/NineSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSlice.d.ts","sourceRoot":"","sources":["../src/NineSlice.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;;;;;GAYG;AAEH,OAAO,EAQL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,oBAAoB,CAAA;AAE3B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AAEzD,KAAK,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;AACjE,KAAK,uBAAuB,GACxB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,GACd,cAAc,CAAA;AAClB,KAAK,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAEzD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IAC5C,KAAK,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAA;IACxC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,qBAAsB,SAAQ,kBAAkB;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,YAAY,CAAA;IACtB,UAAU,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IAC5C,cAAc,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAA;IACpD,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IACpC,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CACjC;AAED,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,qBAAqB,CAAA;AA4Z7E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CAyC1D"}

package/dist/NineSlice.js

@@ -0,0 +1,314 @@
+import { Image as e } from "./primitives/Image.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { PRIMITIVE_NODES as n, computeSourceSlices as r, createElement as i, getCurrentOrThrow as a, jsx as o, useEffect as s, useMemo as c, useState as l } from "@number10/jsx-core";
+import { jsx as u, jsxs as d } from "@number10/jsx-core/jsx-runtime";
+//#region src/NineSlice.tsx
+function f(e, t, n, i, a, o) {
+	return r(e, t, n, i, a, o).map((e) => ({ ...e }));
+}
+function p() {
+	return a().surface?.capabilities?.has("nineslice") === !0;
+}
+function m(e, t = !0) {
+	return !(e === "fallback" || !p() || !t);
+}
+function h(e, t, r) {
+	let i = {
+		...e,
+		...t === void 0 ? {} : { key: t },
+		...r === void 0 ? {} : { theme: r }
+	};
+	return o(n.NineSlice, i);
+}
+function g(t, n, r, i, a, o, s, c, l, d, f) {
+	if (m(i)) return h({
+		texture: t,
+		frame: n,
+		tint: r,
+		width: o,
+		height: s,
+		leftWidth: c,
+		rightWidth: l,
+		topHeight: d,
+		bottomHeight: f,
+		depth: 0
+	});
+	let p = Math.max(0, o - c - l), g = Math.max(0, s - d - f), _ = d === 0 && f === 0, v = (i, a, o, s, c, l) => /* @__PURE__ */ u(e, {
+		headless: !0,
+		depth: 0,
+		x: o,
+		y: s,
+		originX: 0,
+		originY: 0,
+		texture: t,
+		frame: n,
+		tint: r,
+		sourceRect: a,
+		width: c,
+		height: l,
+		displayWidth: c,
+		displayHeight: l
+	}, i);
+	if (_) {
+		let e = a[3], t = a[4], n = a[5];
+		return [
+			v("l", e, 0, 0, c, s),
+			v("c", t, c, 0, p, s),
+			v("r", n, o - l, 0, l, s)
+		];
+	}
+	let y = a[0], b = a[1], x = a[2], S = a[3], C = a[4], w = a[5], T = a[6], E = a[7], D = a[8];
+	return [
+		v("tl", y, 0, 0, c, d),
+		v("t", b, c, 0, p, d),
+		v("tr", x, o - l, 0, l, d),
+		v("l", S, 0, d, c, g),
+		v("c", C, c, d, p, g),
+		v("r", w, o - l, d, l, g),
+		v("bl", T, 0, s - f, c, f),
+		v("b", E, c, s - f, p, f),
+		v("br", D, o - l, s - f, l, f)
+	];
+}
+function _(e, t) {
+	let n = a().surface?.textureLoader, [r, i] = l(null);
+	return s(() => {
+		if (!n) return;
+		let r;
+		if (t) {
+			let i = n.getFrameRect(e, t);
+			i && (r = {
+				w: i.width,
+				h: i.height
+			});
+		}
+		if (!r) {
+			let t = n.getTextureSize(e);
+			t && (r = {
+				w: t.width,
+				h: t.height
+			});
+		}
+		i(r ?? null);
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}
+function v(e) {
+	let { texture: t, frame: n, leftWidth: r, rightWidth: i, topHeight: a, bottomHeight: o, width: s, height: c, tint: l, theme: u, key: d } = e;
+	return h({
+		texture: t,
+		frame: n,
+		tint: l,
+		leftWidth: r,
+		rightWidth: i,
+		topHeight: a,
+		bottomHeight: o,
+		width: s,
+		height: c
+	}, d, u);
+}
+function y(n) {
+	if (m(n.renderMode, n.width !== void 0 && n.height !== void 0)) return /* @__PURE__ */ u(v, { ...n });
+	let { texture: r, frame: a, leftWidth: o, rightWidth: s, topHeight: l, bottomHeight: p, width: h, height: g, tint: y, theme: b, key: x } = n, S = l === 0 && p === 0, C = _(r, a), w = c(() => C ? f(C.w, C.h, o, s, l, p) : null, [
+		C,
+		o,
+		s,
+		l,
+		p
+	]);
+	if (!w) return /* @__PURE__ */ u(t, {
+		width: h,
+		height: g,
+		theme: b
+	}, x);
+	let T = typeof h == "number" ? h : void 0, E = typeof g == "number" ? g : void 0, D = T == null ? void 0 : T - o - s, O = E == null ? void 0 : E - l - p, k = (e, t, n) => ({
+		texture: r,
+		frame: a,
+		tint: y,
+		sourceRect: e,
+		...t == null ? {} : { displayWidth: t },
+		...n == null ? {} : { displayHeight: n }
+	});
+	if (S) {
+		let n = w[3], r = w[4], a = w[5];
+		return /* @__PURE__ */ d(t, {
+			direction: "row",
+			width: h,
+			height: g,
+			theme: b,
+			children: [
+				/* @__PURE__ */ i(e, {
+					...k(n, o, E),
+					width: o,
+					height: "100%",
+					key: "l"
+				}),
+				/* @__PURE__ */ i(e, {
+					...k(r, D, E),
+					flex: 1,
+					height: "100%",
+					key: "c"
+				}),
+				/* @__PURE__ */ i(e, {
+					...k(a, s, E),
+					width: s,
+					height: "100%",
+					key: "r"
+				})
+			]
+		}, x);
+	}
+	let A = w[0], j = w[1], M = w[2], N = w[3], P = w[4], F = w[5], I = w[6], L = w[7], R = w[8];
+	return /* @__PURE__ */ d(t, {
+		direction: "column",
+		width: h,
+		height: g,
+		theme: b,
+		children: [
+			/* @__PURE__ */ d(t, {
+				direction: "row",
+				width: "fill",
+				height: l,
+				children: [
+					/* @__PURE__ */ i(e, {
+						...k(A, o, l),
+						width: o,
+						height: l,
+						key: "tl"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(j, D, l),
+						flex: 1,
+						height: l,
+						key: "t"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(M, s, l),
+						width: s,
+						height: l,
+						key: "tr"
+					})
+				]
+			}, "row-t"),
+			/* @__PURE__ */ d(t, {
+				direction: "row",
+				width: "fill",
+				flex: 1,
+				children: [
+					/* @__PURE__ */ i(e, {
+						...k(N, o, O),
+						width: o,
+						height: "100%",
+						key: "l"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(P, D, O),
+						flex: 1,
+						height: "100%",
+						key: "c"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(F, s, O),
+						width: s,
+						height: "100%",
+						key: "r"
+					})
+				]
+			}, "row-m"),
+			/* @__PURE__ */ d(t, {
+				direction: "row",
+				width: "fill",
+				height: p,
+				children: [
+					/* @__PURE__ */ i(e, {
+						...k(I, o, p),
+						width: o,
+						height: p,
+						key: "bl"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(L, D, p),
+						flex: 1,
+						height: p,
+						key: "b"
+					}),
+					/* @__PURE__ */ i(e, {
+						...k(R, s, p),
+						width: s,
+						height: p,
+						key: "br"
+					})
+				]
+			}, "row-b")
+		]
+	}, x);
+}
+function b(e) {
+	let { texture: n, frame: r, leftWidth: i, rightWidth: a, topHeight: o, bottomHeight: s, width: l, height: p, tint: m, children: h, renderMode: v, alignItems: y = "start", justifyContent: b = "start", gap: x, padding: S, theme: C, key: w } = e, T = _(n, r), E = c(() => T ? f(T.w, T.h, i, a, o, s) : null, [
+		T,
+		i,
+		a,
+		o,
+		s
+	]), D = {
+		left: i + (S?.left ?? 0),
+		right: a + (S?.right ?? 0),
+		top: o + (S?.top ?? 0),
+		bottom: s + (S?.bottom ?? 0)
+	};
+	return /* @__PURE__ */ d(t, {
+		direction: "stack",
+		width: l,
+		height: p,
+		theme: C,
+		children: [E ? g(n, r, m, v, E, l, p, i, a, o, s) : null, /* @__PURE__ */ u(t, {
+			direction: "column",
+			depth: 1,
+			width: "100%",
+			height: "100%",
+			alignItems: y,
+			justifyContent: b,
+			gap: x,
+			padding: D,
+			children: h
+		})]
+	}, w);
+}
+function x(e) {
+	return e.children === void 0 ? /* @__PURE__ */ u(y, {
+		texture: e.texture,
+		frame: e.frame,
+		leftWidth: e.leftWidth,
+		rightWidth: e.rightWidth,
+		topHeight: e.topHeight ?? 0,
+		bottomHeight: e.bottomHeight ?? 0,
+		width: e.width,
+		height: e.height,
+		tint: e.tint,
+		renderMode: e.renderMode,
+		theme: e.theme
+	}, e.key) : /* @__PURE__ */ u(b, {
+		texture: e.texture,
+		frame: e.frame,
+		leftWidth: e.leftWidth,
+		rightWidth: e.rightWidth,
+		topHeight: e.topHeight ?? 0,
+		bottomHeight: e.bottomHeight ?? 0,
+		width: e.width,
+		height: e.height,
+		tint: e.tint,
+		renderMode: e.renderMode,
+		children: e.children,
+		alignItems: e.alignItems,
+		justifyContent: e.justifyContent,
+		gap: e.gap,
+		padding: e.padding,
+		theme: e.theme
+	}, e.key);
+}
+//#endregion
+export { x as NineSlice };

package/dist/NineSlice.props.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NineSlice.props.test.d.ts.map

package/dist/NineSlice.props.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSlice.props.test.d.ts","sourceRoot":"","sources":["../src/NineSlice.props.test.ts"],"names":[],"mappings":""}

package/dist/NineSlice.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NineSlice.test.d.ts.map

package/dist/NineSlice.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSlice.test.d.ts","sourceRoot":"","sources":["../src/NineSlice.test.ts"],"names":[],"mappings":""}

package/dist/NineSliceButton.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const t=require(`./NineSlice.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);function i(i){let{texture:a,frame:o,leftWidth:s,rightWidth:c,topHeight:l=0,bottomHeight:u=0,width:d,height:f,tint:p,onClick:m,disabled:h,children:g,alignItems:_=`center`,justifyContent:v=`center`,gap:y,padding:b,renderMode:x,theme:S,key:C,effect:w,effectConfig:T}=i,E=(0,n.useRef)(null),[D,O]=(0,n.useState)(!1);(0,n.useEffect)(()=>{O(!0)},[]);let k=h?void 0:e=>{let t=(0,n.resolveEffect)({effect:w,effectConfig:T},{});(0,n.applyEffect)(E.current,t.effect,t.effectConfig),m?.()},A=k?{onTouch:k}:{},j=g!=null&&g!==!1;return(0,n.createElement)(e.View,{ref:E,direction:`stack`,width:d,height:f,visible:D,enableGestures:!h,...A,key:C,theme:S},j?(0,r.jsx)(t.NineSlice,{texture:a,frame:o,leftWidth:s,rightWidth:c,topHeight:l,bottomHeight:u,width:d,height:f,tint:p,renderMode:x,alignItems:_,justifyContent:v,gap:y,padding:b,theme:S,children:g}):(0,r.jsx)(t.NineSlice,{texture:a,frame:o,leftWidth:s,rightWidth:c,topHeight:l,bottomHeight:u,width:d,height:f,tint:p,renderMode:x,theme:S}))}exports.NineSliceButton=i;

package/dist/NineSliceButton.d.ts

@@ -0,0 +1,94 @@
+import { ChildrenType, EdgeInsets, EffectConfig, EffectName, GapInsets, VNodeLike } from '@number10/jsx-core';
+import { PortablePartialTheme } from './theme-types';
+type NineSliceRenderMode = 'auto' | 'native' | 'fallback';
+/**
+ * Props for the portable NineSliceButton component.
+ */
+interface NineSliceButtonBaseProps {
+    /** Texture key (atlas name or standalone texture) */
+    texture: string;
+    /** Optional atlas frame name */
+    frame?: string | undefined;
+    /** Width of the left non-stretching edge (source pixels) */
+    leftWidth: number;
+    /** Width of the right non-stretching edge (source pixels) */
+    rightWidth: number;
+    /** Height of the top non-stretching edge (source pixels).
+     *  Omit for 3-slice horizontal-only mode. */
+    topHeight?: number | undefined;
+    /** Height of the bottom non-stretching edge (source pixels).
+     *  Omit for 3-slice horizontal-only mode. */
+    bottomHeight?: number | undefined;
+    /** Optional tint color applied to the NineSlice background */
+    tint?: number | undefined;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disabled state — suppresses click */
+    disabled?: boolean | undefined;
+    /** Inner content horizontal alignment */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | undefined;
+    /** Inner content vertical alignment */
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | undefined;
+    /** Gap between multiple children */
+    gap?: number | GapInsets | undefined;
+    /** Additional inner padding beyond slice margins */
+    padding?: EdgeInsets | undefined;
+    /** Select native vs fallback 9-slice rendering explicitly for testing/debugging. */
+    renderMode?: NineSliceRenderMode | undefined;
+    /** Nested theme for child components */
+    theme?: PortablePartialTheme | undefined;
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /**
+     * Visual effect name (e.g. 'press', 'jello', 'bounce').
+     * Applied on click via @number10/jsx-core effect system.
+     * @default 'press'
+     */
+    effect?: EffectName | undefined;
+    /** Effect configuration (intensity, time, etc.) */
+    effectConfig?: EffectConfig | undefined;
+}
+interface NineSliceButtonDecorativeProps extends NineSliceButtonBaseProps {
+    /** Target display width */
+    width: number;
+    /** Target display height */
+    height: number;
+    /** Content rendered inside the button */
+    children?: undefined;
+}
+interface NineSliceButtonContentProps extends NineSliceButtonBaseProps {
+    /** Target display width */
+    width: number;
+    /** Target display height */
+    height: number;
+    /** Content rendered inside the button */
+    children: ChildrenType;
+}
+export type NineSliceButtonProps = NineSliceButtonDecorativeProps | NineSliceButtonContentProps;
+/**
+ * Portable NineSliceButton component.
+ *
+ * Renders a NineSlice background with a content area inset by the
+ * slice margins. Supports click handling, disabled state, and
+ * inner content layout.
+ *
+ * @example
+ * ```tsx
+ * <NineSliceButton
+ *   texture="ui"
+ *   frame="ButtonRoundGreen"
+ *   width={250}
+ *   height={80}
+ *   leftWidth={20}
+ *   rightWidth={20}
+ *   topHeight={15}
+ *   bottomHeight={15}
+ *   onClick={() => console.log('clicked')}
+ * >
+ *   <Text text="Click Me" />
+ * </NineSliceButton>
+ * ```
+ */
+export declare function NineSliceButton(props: NineSliceButtonProps): VNodeLike;
+export {};
+//# sourceMappingURL=NineSliceButton.d.ts.map

package/dist/NineSliceButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSliceButton.d.ts","sourceRoot":"","sources":["../src/NineSliceButton.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;;GASG;AAEH,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,oBAAoB,CAAA;AAG3B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AAEzD,KAAK,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAMzD;;GAEG;AACH,UAAU,wBAAwB;IAChC,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;IACjB,6DAA6D;IAC7D,UAAU,EAAE,MAAM,CAAA;IAClB;iDAC6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B;iDAC6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAA;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EACX,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,GACd,cAAc,GACd,SAAS,CAAA;IACb,oCAAoC;IACpC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IACpC,oDAAoD;IACpD,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IAC5C,wCAAwC;IACxC,KAAK,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAA;IACxC,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAC/B,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CACxC;AAED,UAAU,8BAA+B,SAAQ,wBAAwB;IACvE,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,UAAU,2BAA4B,SAAQ,wBAAwB;IACpE,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAAG,2BAA2B,CAAA;AAM/F;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,CA+FtE"}