@niche-works/style-layouts 0.2.0

package/core/matrix/matrix.cjs

@@ -0,0 +1,110 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_core_constants = require('../constants.cjs');
+const require_core__constants = require('../_constants.cjs');
+const require_core__internal_hasValue = require('../_internal/hasValue.cjs');
+const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
+const require_core__internal_unit = require('../_internal/unit.cjs');
+const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
+const require_core__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
+let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
+_niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/core/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+*/
+const matrix = (options) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY, childCountX, childCountY, tracksX, tracksY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	require_core__internal_applyGap(result, gap, gapX, gapY);
+	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
+	return require_core__internal_mergeLayoutResults([
+		result,
+		_getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
+		_getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
+	]);
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param childSize 子要素のサイズ
+* @param childCount 子要素数
+* @param child 子要素数 & サイズ
+* @returns
+*/
+function _getGridTemplate(axis, adjust, childSize, childCount, child) {
+	let template;
+	if (Array.isArray(child)) {
+		const pxTotal = child.reduce((sum, value) => {
+			const px = _extractPx(value);
+			return px !== null ? sum + px : sum;
+		}, 0);
+		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
+	} else {
+		const hasChildSize = require_core__internal_hasValue(childSize);
+		const hasCount = require_core__internal_hasValue(childCount);
+		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${require_core__internal_unit(childSize)}), 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require_core__internal_unit(childSize)}), 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${require_core__internal_unit(childSize)}))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${require_core__internal_unit(childSize)}))`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${require_core__internal_unit(childSize)})`;
+		else if (hasChildSize) template = `repeat(auto-fit, ${require_core__internal_unit(childSize)})`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+	}
+	return { style: { [require_core__constants.varLayoutTemplate[axis]]: template } };
+}
+/**
+* tracksX/tracksYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
+	const childSize = require_core__internal_unit(size);
+	const isFr = typeof size === "string" && size.trim().endsWith("fr");
+	const pxValue = _extractPx(size);
+	const isPx = pxValue !== null;
+	if (adjust === "fit") {
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1))))`;
+		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	}
+	return childSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(childSize) {
+	if (typeof childSize === "number") return childSize;
+	const match = childSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+module.exports = matrix;

package/core/matrix/matrix.d.cts

@@ -0,0 +1,11 @@
+import { StyleLayout } from "../types.cjs";
+import { MatrixLayoutOptions } from "./types.cjs";
+
+//#region src/core/matrix/matrix.d.ts
+/**
+ * matrixレイアウト
+ *
+ * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ */
+declare const matrix: StyleLayout<MatrixLayoutOptions>;
+export = matrix;

package/core/matrix/matrix.d.mts

@@ -0,0 +1,12 @@
+import { StyleLayout } from "../types.mjs";
+import { MatrixLayoutOptions } from "./types.mjs";
+
+//#region src/core/matrix/matrix.d.ts
+/**
+ * matrixレイアウト
+ *
+ * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ */
+declare const matrix: StyleLayout<MatrixLayoutOptions>;
+//#endregion
+export { matrix as default };

package/core/matrix/matrix.mjs

@@ -0,0 +1,107 @@
+import { clsLayoutMatrix } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection, varLayoutGap, varLayoutTemplate } from "../_constants.mjs";
+import hasValue from "../_internal/hasValue.mjs";
+import applyChildRatio from "../_internal/applyChildRatio.mjs";
+import unit from "../_internal/unit.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/core/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+*/
+const matrix = (options) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY, childCountX, childCountY, tracksX, tracksY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutMatrix, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyChildRatio(result, childRatioX, childRatioY);
+	return mergeLayoutResults([
+		result,
+		_getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
+		_getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
+	]);
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param childSize 子要素のサイズ
+* @param childCount 子要素数
+* @param child 子要素数 & サイズ
+* @returns
+*/
+function _getGridTemplate(axis, adjust, childSize, childCount, child) {
+	let template;
+	if (Array.isArray(child)) {
+		const pxTotal = child.reduce((sum, value) => {
+			const px = _extractPx(value);
+			return px !== null ? sum + px : sum;
+		}, 0);
+		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
+	} else {
+		const hasChildSize = hasValue(childSize);
+		const hasCount = hasValue(childCount);
+		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${unit(childSize)}), 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${unit(childSize)}, 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${unit(childSize)}))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${unit(childSize)})`;
+		else if (hasChildSize) template = `repeat(auto-fit, ${unit(childSize)})`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+	}
+	return { style: { [varLayoutTemplate[axis]]: template } };
+}
+/**
+* tracksX/tracksYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
+	const childSize = unit(size);
+	const isFr = typeof size === "string" && size.trim().endsWith("fr");
+	const pxValue = _extractPx(size);
+	const isPx = pxValue !== null;
+	if (adjust === "fit") {
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayoutGap[axis]}) * (${childCount} - 1))))`;
+		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	}
+	return childSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(childSize) {
+	if (typeof childSize === "number") return childSize;
+	const match = childSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+export { matrix as default };

package/core/matrix/styles.css

@@ -0,0 +1,63 @@
+.nws-layout-matrix {
+  --nws-layout-gapX: 0px;
+  --nws-layout-gapY: 0px;
+  --nws-layout-childRatio: auto;
+  --nws-layout-templateX: none;
+  --nws-layout-templateY: none;
+  display: grid;
+}
+.nws-layout-matrix.nws-layout-direction-x {
+  grid-auto-flow: row;
+  grid-template-columns: var(--nws-layout-templateX);
+  grid-template-rows: var(--nws-layout-templateY);
+}
+.nws-layout-matrix.nws-layout-direction-y {
+  grid-auto-flow: column;
+  grid-template-columns: var(--nws-layout-templateX);
+  grid-template-rows: var(--nws-layout-templateY);
+}
+.nws-layout-matrix.nws-layout-alignX-left {
+  justify-content: flex-start;
+}
+.nws-layout-matrix.nws-layout-alignX-center {
+  justify-content: center;
+}
+.nws-layout-matrix.nws-layout-alignX-right {
+  justify-content: flex-end;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-matrix.nws-layout-alignY-top {
+  align-content: flex-start;
+}
+.nws-layout-matrix.nws-layout-alignY-middle {
+  align-content: center;
+}
+.nws-layout-matrix.nws-layout-alignY-bottom {
+  align-content: flex-end;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+.nws-layout-matrix.nws-layout-childRatio > * {
+  aspect-ratio: var(--nws-layout-childRatio);
+}
+.nws-layout-matrix.nws-layout-gapX {
+  column-gap: var(--nws-layout-gapX);
+}
+.nws-layout-matrix.nws-layout-gapY {
+  row-gap: var(--nws-layout-gapY);
+}

package/core/matrix/types.d.cts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions } from "../_types.cjs";
+
+//#region src/core/matrix/types.d.ts
+type MatrixLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & ChildRatioOptions & GapOptions & MatrixAxisXOptions & MatrixAxisYOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  childCountX: ChildCountOptions['childCountX'];
+  childSizeX?: ChildSizeOptions['childSizeX'];
+  tracksX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  childCountX?: never;
+  childSizeX?: never;
+  tracksX: TracksOptions['tracksX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  childCountY: ChildCountOptions['childCountY'];
+  childSizeY?: ChildSizeOptions['childSizeY'];
+  tracksY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  childCountY?: never;
+  childSizeY?: never;
+  tracksY: TracksOptions['tracksY'];
+};
+/**
+ * 縦軸用オプション
+ */
+type MatrixAxisYOptions = MatrixAxisYWithCountOptions | MatrixAxisYWithTemplateOptions;
+//#endregion
+export { MatrixLayoutOptions };

package/core/matrix/types.d.mts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions } from "../_types.mjs";
+
+//#region src/core/matrix/types.d.ts
+type MatrixLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & ChildRatioOptions & GapOptions & MatrixAxisXOptions & MatrixAxisYOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  childCountX: ChildCountOptions['childCountX'];
+  childSizeX?: ChildSizeOptions['childSizeX'];
+  tracksX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  childCountX?: never;
+  childSizeX?: never;
+  tracksX: TracksOptions['tracksX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  childCountY: ChildCountOptions['childCountY'];
+  childSizeY?: ChildSizeOptions['childSizeY'];
+  tracksY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  childCountY?: never;
+  childSizeY?: never;
+  tracksY: TracksOptions['tracksY'];
+};
+/**
+ * 縦軸用オプション
+ */
+type MatrixAxisYOptions = MatrixAxisYWithCountOptions | MatrixAxisYWithTemplateOptions;
+//#endregion
+export { MatrixLayoutOptions };

package/core/matrix/types.mjs

@@ -0,0 +1 @@
+export {  };

package/core/pack/index.cjs

@@ -0,0 +1,3 @@
+const require_core_pack_pack = require('./pack.cjs');
+
+module.exports = require_core_pack_pack;

package/core/pack/index.d.cts

@@ -0,0 +1,3 @@
+import { PackLayoutOptions } from "./types.cjs";
+import pack from "./pack.cjs";
+export { PackLayoutOptions, pack as default };

package/core/pack/index.d.mts

@@ -0,0 +1,3 @@
+import { PackLayoutOptions } from "./types.mjs";
+import pack from "./pack.mjs";
+export { PackLayoutOptions, pack as default };

package/core/pack/index.mjs

@@ -0,0 +1,3 @@
+import pack from "./pack.mjs";
+
+export { pack as default };

package/core/pack/pack.cjs

@@ -0,0 +1,27 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_core_constants = require('../constants.cjs');
+const require_core__constants = require('../_constants.cjs');
+const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
+let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
+_niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/core/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, gap, gapX, gapY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutPack, require_core__constants.clsLayoutDirection[direction]),
+		style: {}
+	};
+	require_core__internal_applyGap(result, gap, gapX, gapY);
+	return result;
+};
+
+//#endregion
+module.exports = pack;

package/core/pack/pack.d.cts

@@ -0,0 +1,11 @@
+import { StyleLayout } from "../types.cjs";
+import { PackLayoutOptions } from "./types.cjs";
+
+//#region src/core/pack/pack.d.ts
+/**
+ * packレイアウト
+ *
+ * - 子要素で親要素を満たす
+ */
+declare const pack: StyleLayout<PackLayoutOptions>;
+export = pack;

package/core/pack/pack.d.mts

@@ -0,0 +1,12 @@
+import { StyleLayout } from "../types.mjs";
+import { PackLayoutOptions } from "./types.mjs";
+
+//#region src/core/pack/pack.d.ts
+/**
+ * packレイアウト
+ *
+ * - 子要素で親要素を満たす
+ */
+declare const pack: StyleLayout<PackLayoutOptions>;
+//#endregion
+export { pack as default };

package/core/pack/pack.mjs

@@ -0,0 +1,24 @@
+import { clsLayoutPack } from "../constants.mjs";
+import { clsLayoutDirection } from "../_constants.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/core/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, gap, gapX, gapY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutPack, clsLayoutDirection[direction]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	return result;
+};
+
+//#endregion
+export { pack as default };

package/core/pack/styles.css

@@ -0,0 +1,36 @@
+.nws-layout-pack {
+  --nws-layout-gapX: 0px;
+  --nws-layout-gapY: 0px;
+  --nws-layout-childRatio: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.nws-layout-pack.nws-layout-direction-x {
+  flex-direction: row;
+}
+.nws-layout-pack.nws-layout-direction-x > * {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+  min-height: 100%;
+  max-height: 100%;
+}
+.nws-layout-pack.nws-layout-direction-y {
+  flex-direction: column;
+}
+.nws-layout-pack.nws-layout-direction-y > * {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-height: 0;
+  min-width: 100%;
+  max-width: 100%;
+}
+.nws-layout-pack.nws-layout-gapX {
+  column-gap: var(--nws-layout-gapX);
+}
+.nws-layout-pack.nws-layout-gapY {
+  row-gap: var(--nws-layout-gapY);
+}

package/core/pack/types.d.cts

@@ -0,0 +1,6 @@
+import { DirectionOptions, GapOptions } from "../_types.cjs";
+
+//#region src/core/pack/types.d.ts
+type PackLayoutOptions = DirectionOptions & GapOptions;
+//#endregion
+export { PackLayoutOptions };

package/core/pack/types.d.mts

@@ -0,0 +1,6 @@
+import { DirectionOptions, GapOptions } from "../_types.mjs";
+
+//#region src/core/pack/types.d.ts
+type PackLayoutOptions = DirectionOptions & GapOptions;
+//#endregion
+export { PackLayoutOptions };

package/core/pack/types.mjs

@@ -0,0 +1 @@
+export {  };

package/core/pin/index.cjs

@@ -0,0 +1,3 @@
+const require_core_pin_pin = require('./pin.cjs');
+
+module.exports = require_core_pin_pin;

package/core/pin/index.d.cts

@@ -0,0 +1,3 @@
+import { PinLayoutOptions } from "./types.cjs";
+import pin from "./pin.cjs";
+export { PinLayoutOptions, pin as default };

package/core/pin/index.d.mts

@@ -0,0 +1,3 @@
+import { PinLayoutOptions } from "./types.mjs";
+import pin from "./pin.mjs";
+export { PinLayoutOptions, pin as default };

package/core/pin/index.mjs

@@ -0,0 +1,3 @@
+import pin from "./pin.mjs";
+
+export { pin as default };

package/core/pin/pin.cjs

@@ -0,0 +1,23 @@
+const require_core_constants = require('../constants.cjs');
+const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
+const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
+
+//#region src/core/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { childSizeX, childSizeY, childRatioX, childRatioY } = options;
+	const result = {
+		className: require_core_constants.clsLayoutPin,
+		style: {}
+	};
+	require_core__internal_applyChildSize(result, childSizeX, childSizeY);
+	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
+	return result;
+};
+
+//#endregion
+module.exports = pin;

package/core/pin/pin.d.cts

@@ -0,0 +1,11 @@
+import { StyleLayout } from "../types.cjs";
+import { PinLayoutOptions } from "./types.cjs";
+
+//#region src/core/pin/pin.d.ts
+/**
+ * pinレイアウト
+ *
+ * - 子要素のtop,left,bottom,rightに従い配置する
+ */
+declare const pin: StyleLayout<PinLayoutOptions>;
+export = pin;

package/core/pin/pin.d.mts

@@ -0,0 +1,12 @@
+import { StyleLayout } from "../types.mjs";
+import { PinLayoutOptions } from "./types.mjs";
+
+//#region src/core/pin/pin.d.ts
+/**
+ * pinレイアウト
+ *
+ * - 子要素のtop,left,bottom,rightに従い配置する
+ */
+declare const pin: StyleLayout<PinLayoutOptions>;
+//#endregion
+export { pin as default };

package/core/pin/pin.mjs

@@ -0,0 +1,23 @@
+import { clsLayoutPin } from "../constants.mjs";
+import applyChildRatio from "../_internal/applyChildRatio.mjs";
+import applyChildSize from "../_internal/applyChildSize.mjs";
+
+//#region src/core/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { childSizeX, childSizeY, childRatioX, childRatioY } = options;
+	const result = {
+		className: clsLayoutPin,
+		style: {}
+	};
+	applyChildSize(result, childSizeX, childSizeY);
+	applyChildRatio(result, childRatioX, childRatioY);
+	return result;
+};
+
+//#endregion
+export { pin as default };