@octane-xplat/smooth-corners 0.11.0 → 0.11.1

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "a73ede6a-87a6-4e23-b24a-5ffcf68b06a4",
+  "buildId": "d3b248bd-af3e-48e8-a61d-6ca4b8a2cd10",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/packages/smooth-corners/src/SmoothCorners.tsrx.js

@@ -1,6 +1,7 @@
 import { applySmoothClip, applySmoothShadow } from "./apply.ios.js";
 import { applySmoothClip as applySmoothClip$1, applySmoothShadow as applySmoothShadow$1 } from "./apply.android.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { outerLayoutProps, paintedStyle } from "./layout-child.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
 import { isIOS } from "@nativescript/core";
 //#region src/SmoothCorners.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(6);
@@ -13,7 +14,7 @@ var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
-	"bindings": [["ref", 0]],
+	"propsSlot": 0,
 	"children": [{
 		"kind": "host",
 		"type": "gridlayout",
@@ -60,11 +61,15 @@ var SmoothCorners = defineUniversalComponent("nativescript", function SmoothCorn
 	const bindOuter = useRef(bind("outer"), _h$4);
 	useEffect(() => apply(), [apply], _h$5);
 	return universalValue(__octaneUniversalPlan0, [
-		bindOuter.current,
+		universalProps([[
+			"set",
+			"ref",
+			bindOuter.current
+		], ["spread", outerLayoutProps(props)]]),
 		bindInner.current,
 		props.id,
 		props.className,
-		props.style,
+		paintedStyle(props.style),
 		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });

package/dist/native/packages/smooth-corners/src/layout-child.js

@@ -0,0 +1,61 @@
+//#region src/layout-child.ts
+var OUTER_STYLE_KEYS = [
+	"width",
+	"height",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft"
+];
+var MARGIN_KEYS = [
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft"
+];
+/** The inner box's `style` — everything except margins, which belong to the
+*  element's border box and move out to the wrapper. Width/height stay: the
+*  AppKit inner stack cannot stretch along its parent's main axis, so it
+*  must keep its own size. */
+function paintedStyle(style) {
+	if (!style || typeof style !== "object") return style;
+	const next = { ...style };
+	for (const key of MARGIN_KEYS) delete next[key];
+	return next;
+}
+var CHILD_PROPS_ALWAYS = [
+	"row",
+	"col",
+	"rowSpan",
+	"colSpan",
+	"left",
+	"top",
+	"horizontalAlignment",
+	"verticalAlignment",
+	"flexGrow",
+	"flexShrink",
+	"alignSelf",
+	"order"
+];
+var CHILD_PROPS_IF_SET = [
+	"dock",
+	"right",
+	"bottom"
+];
+/** Parent-layout metadata — must land on the OUTER wrapper, the node the
+*  parent layout reads as its child. Values forward under the host's own
+*  attribute names. */
+function outerLayoutProps(props) {
+	const result = {};
+	for (const key of CHILD_PROPS_ALWAYS) result[key] = props[key];
+	for (const key of CHILD_PROPS_IF_SET) if (props[key] !== void 0) result[key] = props[key];
+	const source = props.style && typeof props.style === "object" ? props.style : {};
+	const style = {};
+	for (const key of OUTER_STYLE_KEYS) if (source[key] !== void 0) style[key] = source[key];
+	result.style = Object.keys(style).length > 0 ? style : void 0;
+	return result;
+}
+//#endregion
+export { outerLayoutProps, paintedStyle };

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "64149c71-b12b-459c-92f1-7c1b0088c73e",
+  "buildId": "7a7269e8-3ddf-49fe-9789-f0e9d6622a7c",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/packages/smooth-corners/src/SmoothCorners.web.tsrx.js

@@ -1,3 +1,4 @@
+import { innerLayoutProps, outerLayoutProps, paintedStyle } from "./layout-child.web.js";
 import { smoothPathD } from "./path.js";
 import { createElement, createScopedElement, createScopedValue, hookSlots, positionalChildren, useLayoutEffect, useRef, useState } from "octane";
 //#region src/SmoothCorners.web.tsrx
@@ -24,13 +25,18 @@ var SmoothCorners = function SmoothCorners(props, __s, __extra) {
 		return () => ro.disconnect();
 	}, [], _hs$ + 2);
 	const d = smoothPathD(size.w, size.h, props.corners);
+	const shadow = props.shadow;
+	const inner = innerLayoutProps(props).style;
+	const outer = outerLayoutProps(props).style;
 	const box = createScopedValue(() => createScopedElement("div", {
 		ref,
 		id: props.id,
 		className: props.className,
 		style: {
 			position: "relative",
-			...props.style,
+			...paintedStyle(props.style),
+			...inner,
+			...shadow ? {} : outer,
 			clipPath: size.w > 0 ? `path("${d}")` : void 0
 		}
 	}, () => positionalChildren([props.children, props.border && size.w > 0 && createScopedValue(() => createScopedElement("svg", {
@@ -50,11 +56,11 @@ var SmoothCorners = function SmoothCorners(props, __s, __extra) {
 		stroke: props.border.color,
 		strokeWidth: props.border.width * 2
 	}))))])));
-	const shadow = props.shadow;
 	if (!shadow) return box ?? null;
 	const filter = `drop-shadow(${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 0}px ${shadow.blur ?? 0}px ${shadow.color ?? "rgba(0,0,0,0.35)"})`;
 	return createScopedValue(() => createScopedElement("div", { style: {
 		display: "grid",
+		...outer,
 		filter
 	} }, () => box));
 };

package/dist/web/packages/smooth-corners/src/layout-child.web.js

@@ -0,0 +1,94 @@
+//#region src/layout-child.web.ts
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var JUSTIFY_SELF = {
+	left: "start",
+	center: "center",
+	middle: "center",
+	right: "end",
+	stretch: "stretch"
+};
+var ALIGN_SELF = {
+	top: "start",
+	center: "center",
+	middle: "center",
+	bottom: "end",
+	stretch: "stretch"
+};
+var OUTER_STYLE_KEYS = [
+	"width",
+	"height",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft"
+];
+var MARGIN_KEYS = [
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft"
+];
+/** The inner box's `style` — everything except margins, which belong to the
+*  element's border box and move out to the wrapper. */
+function paintedStyle(style) {
+	if (!style || typeof style !== "object") return style;
+	const next = { ...style };
+	for (const key of MARGIN_KEYS) delete next[key];
+	return next;
+}
+/** Parent-layout metadata folded into CSS on the outermost element — the
+*  shadow wrapper when present, the clipped box otherwise. Native's `dock`
+*  has no CSS equivalent and is ignored on web. Grid indices are zero-based
+*  in the shared API, matching NativeScript. */
+function outerLayoutProps(props) {
+	const style = {};
+	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
+	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
+	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
+	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
+	for (const key of [
+		"left",
+		"top",
+		"right",
+		"bottom"
+	]) if (props[key] !== void 0) style[key] = props[key];
+	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
+	if (props.order !== void 0) style.order = props.order;
+	if (props.horizontalAlignment !== void 0) style.justifySelf = JUSTIFY_SELF[props.horizontalAlignment] ?? props.horizontalAlignment;
+	if (props.verticalAlignment !== void 0) style.alignSelf = ALIGN_SELF[props.verticalAlignment] ?? props.verticalAlignment;
+	if (props.style && typeof props.style === "object") {
+		for (const key of OUTER_STYLE_KEYS) if (props.style[key] !== void 0) style[key] = props.style[key];
+	}
+	return { style };
+}
+/** Flex-container props folded into the inner box's style. Emits
+*  `display: flex` only when a flex prop is present so a bare SmoothCorners
+*  keeps normal block flow; the default direction is column to match the
+*  renderers' stack default. */
+function innerLayoutProps(props) {
+	if (!(props.flexDirection !== void 0 || props.justifyContent !== void 0 || props.alignItems !== void 0 || props.flexWrap !== void 0 || props.gap !== void 0 || props.rowGap !== void 0 || props.columnGap !== void 0)) return { style: {} };
+	const style = {
+		display: "flex",
+		flexDirection: props.flexDirection ?? "column"
+	};
+	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) style.gap = props.gap;
+	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+	return { style };
+}
+//#endregion
+export { innerLayoutProps, outerLayoutProps, paintedStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/smooth-corners",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Exact-match smooth corners for Octane xplat — one generated curve (Rosenfeld continuous, Figma squircle, superellipse, clothoid) clipped natively on web, iOS, Android, and macOS",
   "keywords": [
     "clip-path",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.2",
-    "@octane-xplat/macos-renderer": "0.11.0",
+    "@octane-xplat/macos-renderer": "0.11.1",
     "@octanejs/vite-plugin": "0.1.61",
     "@tsrx/typescript-plugin": "0.4.11",
     "octane": "0.6.3",

package/src/SmoothCorners.macos.tsrx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @octane-xplat/macos-renderer */
 import { useCallback, useRef } from 'octane';
+import { innerLayoutProps, outerLayoutProps, paintedStyle } from './layout-child';
 import { flipCommandsY, generateCommands } from './path';
 import type { PathCommand } from './path';
 import type { SmoothCornersProps } from './props';
@@ -145,7 +146,10 @@ function applyOuter(view: any, w: number, h: number, props: SmoothCornersProps):
 }
 
 /** SmoothCorners on the AppKit renderer — NSBezierPath → CAShapeLayer mask
- *  on the inner box; the outer view carries the drop shadow. */
+ *  on the inner box; the outer view carries the drop shadow. Parent layouts
+ *  read positioning metadata (left/top/row/col/…) off the outer wrapper's
+ *  props; flex-container props (flexDirection/gap/…) land on the inner
+ *  stack that owns the children. */
 export function SmoothCorners(props: SmoothCornersProps) @{
 	const state = useRef<{ props: SmoothCornersProps }>({ props });
 	state.current.props = props;
@@ -163,12 +167,13 @@ export function SmoothCorners(props: SmoothCornersProps) @{
 	);
 
 	return (
-		<flexboxlayout onLayoutChanged={outerLayout}>
+		<flexboxlayout {...outerLayoutProps(props)} onLayoutChanged={outerLayout}>
 			<flexboxlayout
+				{...innerLayoutProps(props)}
 				onLayoutChanged={innerLayout}
 				id={props.id}
 				className={props.className}
-				style={props.style}
+				style={paintedStyle(props.style)}
 			>
 				{props.children}
 			</flexboxlayout>

package/src/SmoothCorners.tsrx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from 'octane';
 import { isIOS } from '@nativescript/core';
 import { applySmoothClip as applyIosClip, applySmoothShadow as applyIosShadow } from './apply.ios';
 import { applySmoothClip as applyAndroidClip, applySmoothShadow as applyAndroidShadow } from './apply.android';
+import { outerLayoutProps, paintedStyle } from './layout-child';
 import type { SmoothCornersProps } from './props';
 
 const applyClip = isIOS ? applyIosClip : applyAndroidClip;
@@ -12,7 +13,10 @@ const applyShadow = isIOS ? applyIosShadow : applyAndroidShadow;
  *  Two nested gridlayouts: the inner carries the clip (layer mask on iOS,
  *  drawable+outline on Android); the outer carries the iOS drop shadow
  *  (a masked layer can't show its own). Radius comes from `corners`, not
- *  `border-radius`. */
+ *  `border-radius`. Parent-layout metadata lands on the outer grid — the
+ *  node the parent reads as its child. The flex-container props are
+ *  web/macOS-only here: the inner host is a gridlayout, which has no flex
+ *  vocabulary. */
 export function SmoothCorners(props: SmoothCornersProps) @{
 	const state = useRef<{ inner: any; outer: any; props: SmoothCornersProps }>({
 		inner: null,
@@ -53,12 +57,12 @@ export function SmoothCorners(props: SmoothCornersProps) @{
 	useEffect(() => apply());
 
 	return (
-		<gridlayout ref={bindOuter.current}>
+		<gridlayout ref={bindOuter.current} {...outerLayoutProps(props)}>
 			<gridlayout
 				ref={bindInner.current}
 				id={props.id}
 				className={props.className}
-				style={props.style}
+				style={paintedStyle(props.style)}
 			>
 				{props.children}
 			</gridlayout>

package/src/SmoothCorners.web.tsrx

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'octane';
+import { innerLayoutProps, outerLayoutProps, paintedStyle } from './layout-child.web';
 import { smoothPathD } from './path';
 import type { SmoothCornersProps } from './props';
 
@@ -26,6 +27,12 @@ export function SmoothCorners(props: SmoothCornersProps) @{
 	}, []);
 
 	const d = smoothPathD(size.w, size.h, props.corners);
+	const shadow = props.shadow;
+	// Flex props style the clipped box; parent-layout metadata styles the
+	// outermost element — the shadow wrapper when present, the box itself
+	// otherwise.
+	const inner = innerLayoutProps(props).style;
+	const outer = outerLayoutProps(props).style;
 
 	const box = (
 		<div
@@ -34,7 +41,9 @@ export function SmoothCorners(props: SmoothCornersProps) @{
 			className={props.className}
 			style={{
 				position: 'relative',
-				...props.style,
+				...paintedStyle(props.style),
+				...inner,
+				...(shadow ? {} : outer),
 				clipPath: size.w > 0 ? `path("${d}")` : undefined,
 			}}
 		>
@@ -64,8 +73,7 @@ export function SmoothCorners(props: SmoothCornersProps) @{
 		</div>
 	);
 
-	const shadow = props.shadow;
 	if (!shadow) return box;
 	const filter = `drop-shadow(${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 0}px ${shadow.blur ?? 0}px ${shadow.color ?? 'rgba(0,0,0,0.35)'})`;
-	return <div style={{ display: 'grid', filter }}>{box}</div>;
+	return <div style={{ display: 'grid', ...outer, filter }}>{box}</div>;
 }

package/src/layout-child.ts

@@ -0,0 +1,137 @@
+import type { FlexContainerProps, LayoutChildProps, SmoothCornersProps } from './props'
+
+// start/end shorthand → flex-start/flex-end (NativeScript's value names; the
+// AppKit renderer accepts both forms).
+const FLEX_JUSTIFY: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
+const FLEX_ALIGN: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
+
+// The element's box geometry — parent layouts read the child's own style for
+// size and margins, so these keys must land on the outer wrapper. The rest
+// of `style` stays on the inner box (it is the clipped, painted surface).
+const OUTER_STYLE_KEYS = [
+	'width',
+	'height',
+	'margin',
+	'marginTop',
+	'marginRight',
+	'marginBottom',
+	'marginLeft',
+] as const
+
+const MARGIN_KEYS = [
+	'margin',
+	'marginTop',
+	'marginRight',
+	'marginBottom',
+	'marginLeft',
+] as const
+
+/** The inner box's `style` — everything except margins, which belong to the
+ *  element's border box and move out to the wrapper. Width/height stay: the
+ *  AppKit inner stack cannot stretch along its parent's main axis, so it
+ *  must keep its own size. */
+export function paintedStyle(style: any) {
+	if (!style || typeof style !== 'object') {
+		return style
+	}
+
+	const next = { ...style }
+	for (const key of MARGIN_KEYS) {
+		delete next[key]
+	}
+
+	return next
+}
+
+// Whitelisted by the AppKit flexboxlayout prop handler — safe to emit even
+// as `undefined`, which is how removals propagate: the hosts merge update
+// bags over the node's recorded props, so a vanished key would keep its
+// stale value and parent layouts would never see the removal.
+const CHILD_PROPS_ALWAYS = [
+	'row',
+	'col',
+	'rowSpan',
+	'colSpan',
+	'left',
+	'top',
+	'horizontalAlignment',
+	'verticalAlignment',
+	'flexGrow',
+	'flexShrink',
+	'alignSelf',
+	'order',
+] as const
+
+// Not whitelisted on the AppKit host (the prop-warning gap, GH#9/#10) —
+// emitted only when set so a bare SmoothCorners does not warn every mount.
+const CHILD_PROPS_IF_SET = ['dock', 'right', 'bottom'] as const
+
+/** Parent-layout metadata — must land on the OUTER wrapper, the node the
+ *  parent layout reads as its child. Values forward under the host's own
+ *  attribute names. */
+export function outerLayoutProps(props: LayoutChildProps & { style?: any }) {
+	const result: Record<string, any> = {}
+	for (const key of CHILD_PROPS_ALWAYS) {
+		result[key] = props[key]
+	}
+
+	for (const key of CHILD_PROPS_IF_SET) {
+		if (props[key] !== undefined) {
+			result[key] = props[key]
+		}
+	}
+
+	const source = props.style && typeof props.style === 'object' ? props.style : {}
+	const style: Record<string, any> = {}
+	for (const key of OUTER_STYLE_KEYS) {
+		if (source[key] !== undefined) {
+			style[key] = source[key]
+		}
+	}
+
+	// Explicit undefined clears a previously mirrored geometry bag on update.
+	result.style = Object.keys(style).length > 0 ? style : undefined
+	return result
+}
+
+/** Flex-container props — land on the INNER host that owns the children.
+ *  Used by the macOS leaf (inner flexboxlayout); the native leaf's inner
+ *  gridlayout has no flex vocabulary and does not consume these. */
+export function innerLayoutProps(
+	props: FlexContainerProps & Pick<SmoothCornersProps, 'flexDirection'>,
+) {
+	const result: Record<string, any> = {}
+	// Explicit undefined so removals propagate through the merge-style update.
+	result.flexDirection = props.flexDirection
+	result.justifyContent =
+		props.justifyContent === undefined
+			? undefined
+			: (FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent)
+
+	result.alignItems =
+		props.alignItems === undefined
+			? undefined
+			: (FLEX_ALIGN[props.alignItems] ?? props.alignItems)
+
+	result.flexWrap =
+		props.flexWrap === undefined
+			? undefined
+			: props.flexWrap === true
+				? 'wrap'
+				: props.flexWrap === false
+					? 'nowrap'
+					: props.flexWrap
+
+	result.gap = props.gap
+	// rowGap/columnGap have no AppKit stack equivalent and are not whitelisted
+	// — emit only when set, matching the child-prop treatment above.
+	if (props.rowGap !== undefined) {
+		result.rowGap = props.rowGap
+	}
+
+	if (props.columnGap !== undefined) {
+		result.columnGap = props.columnGap
+	}
+
+	return result
+}

package/src/layout-child.web.ts

@@ -0,0 +1,171 @@
+import type { FlexContainerProps, LayoutChildProps, SmoothCornersProps } from './props'
+
+// start/end shorthand → flex-start/flex-end (valid in both engines).
+const FLEX_JUSTIFY: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
+const FLEX_ALIGN: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
+
+// Grid-cell alignment vocabulary → CSS self-alignment.
+const JUSTIFY_SELF: Record<string, string> = {
+	left: 'start',
+	center: 'center',
+	middle: 'center',
+	right: 'end',
+	stretch: 'stretch',
+}
+
+const ALIGN_SELF: Record<string, string> = {
+	top: 'start',
+	center: 'center',
+	middle: 'center',
+	bottom: 'end',
+	stretch: 'stretch',
+}
+
+// The element's box geometry — belongs on the outermost element so parent
+// layouts size the whole component, not the clipped box inside it.
+const OUTER_STYLE_KEYS = [
+	'width',
+	'height',
+	'margin',
+	'marginTop',
+	'marginRight',
+	'marginBottom',
+	'marginLeft',
+] as const
+
+const MARGIN_KEYS = [
+	'margin',
+	'marginTop',
+	'marginRight',
+	'marginBottom',
+	'marginLeft',
+] as const
+
+/** The inner box's `style` — everything except margins, which belong to the
+ *  element's border box and move out to the wrapper. */
+export function paintedStyle(style: any) {
+	if (!style || typeof style !== 'object') {
+		return style
+	}
+
+	const next = { ...style }
+	for (const key of MARGIN_KEYS) {
+		delete next[key]
+	}
+
+	return next
+}
+
+/** Parent-layout metadata folded into CSS on the outermost element — the
+ *  shadow wrapper when present, the clipped box otherwise. Native's `dock`
+ *  has no CSS equivalent and is ignored on web. Grid indices are zero-based
+ *  in the shared API, matching NativeScript. */
+export function outerLayoutProps(props: LayoutChildProps & { style?: any }) {
+	const style: Record<string, any> = {}
+	if (props.row !== undefined) {
+		style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`
+	} else if (props.rowSpan !== undefined) {
+		style.gridRow = `span ${props.rowSpan}`
+	}
+
+	if (props.col !== undefined) {
+		style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`
+	} else if (props.colSpan !== undefined) {
+		style.gridColumn = `span ${props.colSpan}`
+	}
+
+	for (const key of ['left', 'top', 'right', 'bottom'] as const) {
+		if (props[key] !== undefined) {
+			style[key] = props[key]
+		}
+	}
+
+	if (props.flexGrow !== undefined) {
+		style.flexGrow = props.flexGrow
+	}
+
+	if (props.flexShrink !== undefined) {
+		style.flexShrink = props.flexShrink
+	}
+
+	if (props.alignSelf !== undefined) {
+		style.alignSelf = props.alignSelf
+	}
+
+	if (props.order !== undefined) {
+		style.order = props.order
+	}
+
+	if (props.horizontalAlignment !== undefined) {
+		style.justifySelf = JUSTIFY_SELF[props.horizontalAlignment] ?? props.horizontalAlignment
+	}
+
+	// CSS align-self is shared by flex and grid children — the grid-specific
+	// prop wins when both are set.
+	if (props.verticalAlignment !== undefined) {
+		style.alignSelf = ALIGN_SELF[props.verticalAlignment] ?? props.verticalAlignment
+	}
+
+	if (props.style && typeof props.style === 'object') {
+		for (const key of OUTER_STYLE_KEYS) {
+			if (props.style[key] !== undefined) {
+				style[key] = props.style[key]
+			}
+		}
+	}
+
+	return { style }
+}
+
+/** Flex-container props folded into the inner box's style. Emits
+ *  `display: flex` only when a flex prop is present so a bare SmoothCorners
+ *  keeps normal block flow; the default direction is column to match the
+ *  renderers' stack default. */
+export function innerLayoutProps(
+	props: FlexContainerProps & Pick<SmoothCornersProps, 'flexDirection'>,
+) {
+	const hasFlex =
+		props.flexDirection !== undefined ||
+		props.justifyContent !== undefined ||
+		props.alignItems !== undefined ||
+		props.flexWrap !== undefined ||
+		props.gap !== undefined ||
+		props.rowGap !== undefined ||
+		props.columnGap !== undefined
+
+	if (!hasFlex) {
+		return { style: {} }
+	}
+
+	const style: Record<string, any> = {
+		display: 'flex',
+		flexDirection: props.flexDirection ?? 'column',
+	}
+
+	if (props.justifyContent !== undefined) {
+		style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent
+	}
+
+	if (props.alignItems !== undefined) {
+		style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems
+	}
+
+	if (props.flexWrap !== undefined) {
+		style.flexWrap =
+			props.flexWrap === true ? 'wrap' : props.flexWrap === false ? 'nowrap' : props.flexWrap
+	}
+
+	if (props.gap !== undefined) {
+		style.gap = props.gap
+	}
+
+	if (props.rowGap !== undefined) {
+		style.rowGap = props.rowGap
+	}
+
+	if (props.columnGap !== undefined) {
+		style.columnGap = props.columnGap
+	}
+
+	return { style }
+}

package/src/props.ts

@@ -49,7 +49,45 @@ export interface SmoothShadowConfig {
 	spread?: number
 }
 
-export interface SmoothCornersProps {
+/** Metadata read by parent layouts — the shared LayoutChildProps contract,
+ *  plus the edges and grid-cell alignments the AppKit absolute/grid parents
+ *  consume (`right`/`bottom`, `horizontalAlignment`/`verticalAlignment`).
+ *  On SmoothCorners these land on the outer wrapper — the node the parent
+ *  layout sees as its child. Native forwards the attached attributes;
+ *  `right`/`bottom` are honored by the AppKit absolute layout and web CSS
+ *  only (NativeScript AbsoluteLayout reads left/top). */
+export interface LayoutChildProps {
+	row?: number
+	col?: number
+	rowSpan?: number
+	colSpan?: number
+	dock?: 'left' | 'top' | 'right' | 'bottom'
+	left?: number
+	top?: number
+	right?: number
+	bottom?: number
+	horizontalAlignment?: 'left' | 'center' | 'middle' | 'right' | 'stretch'
+	verticalAlignment?: 'top' | 'center' | 'middle' | 'bottom' | 'stretch'
+	flexGrow?: number
+	flexShrink?: number
+	alignSelf?: string
+	order?: number
+}
+
+/** Flex-container props for the element's own children — RN vocabulary,
+ *  applied to the inner flex host on web and the AppKit macOS leaf.
+ *  The native leaf's inner container is a gridlayout, so these are
+ *  web/macOS-only there. `gap` is a dip number (px on web). */
+export interface FlexContainerProps {
+	justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
+	alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+	flexWrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse'
+	gap?: number | string
+	rowGap?: number | string
+	columnGap?: number | string
+}
+
+export interface SmoothCornersProps extends LayoutChildProps, FlexContainerProps {
 	/** Radius/curve configuration — the single source of truth. `border-radius`
 	 *  in `style`/`className` is ignored on this element on every target. */
 	corners: CornerOptions
@@ -59,6 +97,9 @@ export interface SmoothCornersProps {
 	 *  offsets/spread); iOS/macOS use `shadowPath`; web uses
 	 *  `filter: drop-shadow` (no spread). */
 	shadow?: SmoothShadowConfig
+	/** Main-axis direction of the inner flex host — the renderer default is
+	 *  column. Web/macOS-only like the rest of FlexContainerProps. */
+	flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
 	className?: any
 	style?: any
 	id?: string

package/types/props.d.ts

@@ -42,7 +42,43 @@ export interface SmoothShadowConfig {
     /** Spread is web/iOS/macOS only — Android elevation cannot express it. */
     spread?: number;
 }
-export interface SmoothCornersProps {
+/** Metadata read by parent layouts — the shared LayoutChildProps contract,
+ *  plus the edges and grid-cell alignments the AppKit absolute/grid parents
+ *  consume (`right`/`bottom`, `horizontalAlignment`/`verticalAlignment`).
+ *  On SmoothCorners these land on the outer wrapper — the node the parent
+ *  layout sees as its child. Native forwards the attached attributes;
+ *  `right`/`bottom` are honored by the AppKit absolute layout and web CSS
+ *  only (NativeScript AbsoluteLayout reads left/top). */
+export interface LayoutChildProps {
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
+    dock?: 'left' | 'top' | 'right' | 'bottom';
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    horizontalAlignment?: 'left' | 'center' | 'middle' | 'right' | 'stretch';
+    verticalAlignment?: 'top' | 'center' | 'middle' | 'bottom' | 'stretch';
+    flexGrow?: number;
+    flexShrink?: number;
+    alignSelf?: string;
+    order?: number;
+}
+/** Flex-container props for the element's own children — RN vocabulary,
+ *  applied to the inner flex host on web and the AppKit macOS leaf.
+ *  The native leaf's inner container is a gridlayout, so these are
+ *  web/macOS-only there. `gap` is a dip number (px on web). */
+export interface FlexContainerProps {
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    flexWrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+}
+export interface SmoothCornersProps extends LayoutChildProps, FlexContainerProps {
     /** Radius/curve configuration — the single source of truth. `border-radius`
      *  in `style`/`className` is ignored on this element on every target. */
     corners: CornerOptions;
@@ -52,6 +88,9 @@ export interface SmoothCornersProps {
      *  offsets/spread); iOS/macOS use `shadowPath`; web uses
      *  `filter: drop-shadow` (no spread). */
     shadow?: SmoothShadowConfig;
+    /** Main-axis direction of the inner flex host — the renderer default is
+     *  column. Web/macOS-only like the rest of FlexContainerProps. */
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     className?: any;
     style?: any;
     id?: string;