@openiot-devteam/layout 0.3.0

package/dist/native/overlays.mjs

@@ -0,0 +1,170 @@
+import { LAYOUT } from "../tokens.mjs";
+import { acquireDim, releaseDim } from "../dim-bridge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+//#region src/native/overlays.tsx
+/**
+* 네이티브 앱에서는 딤을 이 Modal 이 직접 그리므로 브릿지 호출이 필요 없지만,
+* 웹뷰 셸이 자기 화면 위에 RN 오버레이를 겹칠 때를 위해 신호는 동일하게 올린다.
+*/
+function useDim(open) {
+	useEffect(() => {
+		if (!open) return;
+		acquireDim();
+		return releaseDim;
+	}, [open]);
+}
+/**
+* 아래에서 올라오는 시트 (RN) — 웹의 `BottomSheet` 와 같은 prop 계약.
+*
+* 안드로이드 하드웨어 back 은 `onRequestClose` 로 처리된다.
+*/
+function BottomSheet({ open, onOpenChange, dismissible = true, label, children, style }) {
+	const insets = useSafeAreaInsets();
+	useDim(open);
+	const close = () => onOpenChange(false);
+	return /* @__PURE__ */ jsxs(Modal, {
+		visible: open,
+		transparent: true,
+		animationType: "slide",
+		statusBarTranslucent: true,
+		onRequestClose: close,
+		children: [/* @__PURE__ */ jsx(Pressable, {
+			style: styles.dim,
+			accessibilityLabel: "닫기",
+			onPress: dismissible ? close : void 0
+		}), /* @__PURE__ */ jsx(View, {
+			style: styles.sheetAnchor,
+			pointerEvents: "box-none",
+			children: /* @__PURE__ */ jsx(View, {
+				accessibilityViewIsModal: true,
+				accessibilityLabel: label,
+				style: [
+					styles.sheet,
+					{ paddingBottom: 24 + insets.bottom },
+					style
+				],
+				children
+			})
+		})]
+	});
+}
+/**
+* 중앙 다이얼로그 (RN) — 웹의 `Dialog` 와 같은 prop 계약.
+*
+* 기본 버튼은 구조만 제공한다. 색·타이포는 앱의 버튼 컴포넌트를 `children` 으로 넣어
+* 맞추는 것을 권장한다.
+*/
+function Dialog({ open, onOpenChange, dismissible = true, title, description, cancel, confirm, children, style }) {
+	useDim(open);
+	const close = () => onOpenChange(false);
+	return /* @__PURE__ */ jsxs(Modal, {
+		visible: open,
+		transparent: true,
+		animationType: "fade",
+		statusBarTranslucent: true,
+		onRequestClose: close,
+		children: [/* @__PURE__ */ jsx(Pressable, {
+			style: styles.dim,
+			accessibilityLabel: "닫기",
+			onPress: dismissible ? close : void 0
+		}), /* @__PURE__ */ jsx(View, {
+			style: styles.dialogAnchor,
+			pointerEvents: "box-none",
+			children: /* @__PURE__ */ jsxs(View, {
+				accessibilityViewIsModal: true,
+				style: [styles.dialog, style],
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						style: styles.title,
+						children: title
+					}),
+					typeof description === "string" ? /* @__PURE__ */ jsx(Text, {
+						style: styles.description,
+						children: description
+					}) : description,
+					children ?? /* @__PURE__ */ jsxs(View, {
+						style: styles.buttons,
+						children: [cancel && /* @__PURE__ */ jsx(Pressable, {
+							style: styles.button,
+							accessibilityRole: "button",
+							onPress: () => {
+								cancel.onPress?.();
+								close();
+							},
+							children: /* @__PURE__ */ jsx(Text, { children: cancel.label })
+						}), confirm && /* @__PURE__ */ jsx(Pressable, {
+							style: styles.button,
+							accessibilityRole: "button",
+							onPress: () => {
+								confirm.onPress?.();
+								close();
+							},
+							children: /* @__PURE__ */ jsx(Text, { children: confirm.label })
+						})]
+					})
+				]
+			})
+		})]
+	});
+}
+const styles = StyleSheet.create({
+	dim: {
+		...StyleSheet.absoluteFillObject,
+		backgroundColor: `rgba(0,0,0,${LAYOUT.dimOpacity})`
+	},
+	sheetAnchor: {
+		...StyleSheet.absoluteFillObject,
+		justifyContent: "flex-end"
+	},
+	sheet: {
+		width: "100%",
+		borderTopLeftRadius: LAYOUT.sheetRadius,
+		borderTopRightRadius: LAYOUT.sheetRadius,
+		paddingHorizontal: LAYOUT.content.paddingX,
+		paddingTop: 12,
+		gap: 16
+	},
+	dialogAnchor: {
+		...StyleSheet.absoluteFillObject,
+		justifyContent: "center",
+		alignItems: "center",
+		paddingHorizontal: LAYOUT.dialog.insetX
+	},
+	dialog: {
+		width: "100%",
+		borderRadius: LAYOUT.dialog.radius,
+		paddingHorizontal: 22,
+		paddingTop: 26,
+		paddingBottom: 18,
+		gap: 12
+	},
+	title: {
+		fontSize: 18,
+		fontWeight: "700",
+		textAlign: "center"
+	},
+	description: {
+		fontSize: 14,
+		lineHeight: 21,
+		textAlign: "center"
+	},
+	buttons: {
+		flexDirection: "row",
+		gap: 10,
+		marginTop: 6
+	},
+	button: {
+		flex: 1,
+		height: 48,
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 10
+	}
+});
+//#endregion
+export { BottomSheet, Dialog };
+
+//# sourceMappingURL=overlays.mjs.map

package/dist/native/overlays.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.mjs","names":[],"sources":["../../src/native/overlays.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport {\n  Modal,\n  Pressable,\n  StyleSheet,\n  Text,\n  View,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { acquireDim, releaseDim } from '../dim-bridge.js'\nimport { LAYOUT } from '../tokens.js'\nimport type { BottomSheetBaseProps, DialogBaseProps } from '../types.js'\n\n/**\n * 네이티브 앱에서는 딤을 이 Modal 이 직접 그리므로 브릿지 호출이 필요 없지만,\n * 웹뷰 셸이 자기 화면 위에 RN 오버레이를 겹칠 때를 위해 신호는 동일하게 올린다.\n */\nfunction useDim(open: boolean) {\n  useEffect(() => {\n    if (!open) return\n    acquireDim()\n    return releaseDim\n  }, [open])\n}\n\nexport interface BottomSheetProps extends BottomSheetBaseProps {\n  style?: StyleProp<ViewStyle>\n}\n\n/**\n * 아래에서 올라오는 시트 (RN) — 웹의 `BottomSheet` 와 같은 prop 계약.\n *\n * 안드로이드 하드웨어 back 은 `onRequestClose` 로 처리된다.\n */\nexport function BottomSheet({\n  open,\n  onOpenChange,\n  dismissible = true,\n  label,\n  children,\n  style,\n}: BottomSheetProps) {\n  const insets = useSafeAreaInsets()\n  useDim(open)\n\n  const close = () => onOpenChange(false)\n\n  return (\n    <Modal\n      visible={open}\n      transparent\n      animationType=\"slide\"\n      statusBarTranslucent\n      onRequestClose={close}\n    >\n      <Pressable\n        style={styles.dim}\n        accessibilityLabel=\"닫기\"\n        onPress={dismissible ? close : undefined}\n      />\n      <View style={styles.sheetAnchor} pointerEvents=\"box-none\">\n        <View\n          accessibilityViewIsModal\n          accessibilityLabel={label}\n          style={[styles.sheet, { paddingBottom: 24 + insets.bottom }, style]}\n        >\n          {children}\n        </View>\n      </View>\n    </Modal>\n  )\n}\n\nexport interface DialogProps extends DialogBaseProps {\n  style?: StyleProp<ViewStyle>\n}\n\n/**\n * 중앙 다이얼로그 (RN) — 웹의 `Dialog` 와 같은 prop 계약.\n *\n * 기본 버튼은 구조만 제공한다. 색·타이포는 앱의 버튼 컴포넌트를 `children` 으로 넣어\n * 맞추는 것을 권장한다.\n */\nexport function Dialog({\n  open,\n  onOpenChange,\n  dismissible = true,\n  title,\n  description,\n  cancel,\n  confirm,\n  children,\n  style,\n}: DialogProps) {\n  useDim(open)\n\n  const close = () => onOpenChange(false)\n\n  return (\n    <Modal\n      visible={open}\n      transparent\n      animationType=\"fade\"\n      statusBarTranslucent\n      onRequestClose={close}\n    >\n      <Pressable\n        style={styles.dim}\n        accessibilityLabel=\"닫기\"\n        onPress={dismissible ? close : undefined}\n      />\n      <View style={styles.dialogAnchor} pointerEvents=\"box-none\">\n        <View accessibilityViewIsModal style={[styles.dialog, style]}>\n          <Text style={styles.title}>{title}</Text>\n          {typeof description === 'string' ? (\n            <Text style={styles.description}>{description}</Text>\n          ) : (\n            description\n          )}\n\n          {children ?? (\n            <View style={styles.buttons}>\n              {cancel && (\n                <Pressable\n                  style={styles.button}\n                  accessibilityRole=\"button\"\n                  onPress={() => {\n                    cancel.onPress?.()\n                    close()\n                  }}\n                >\n                  <Text>{cancel.label}</Text>\n                </Pressable>\n              )}\n              {confirm && (\n                <Pressable\n                  style={styles.button}\n                  accessibilityRole=\"button\"\n                  onPress={() => {\n                    confirm.onPress?.()\n                    close()\n                  }}\n                >\n                  <Text>{confirm.label}</Text>\n                </Pressable>\n              )}\n            </View>\n          )}\n        </View>\n      </View>\n    </Modal>\n  )\n}\n\nconst styles = StyleSheet.create({\n  dim: { ...StyleSheet.absoluteFillObject, backgroundColor: `rgba(0,0,0,${LAYOUT.dimOpacity})` },\n  sheetAnchor: { ...StyleSheet.absoluteFillObject, justifyContent: 'flex-end' },\n  sheet: {\n    width: '100%',\n    borderTopLeftRadius: LAYOUT.sheetRadius,\n    borderTopRightRadius: LAYOUT.sheetRadius,\n    paddingHorizontal: LAYOUT.content.paddingX,\n    paddingTop: 12,\n    gap: 16,\n  },\n  dialogAnchor: {\n    ...StyleSheet.absoluteFillObject,\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingHorizontal: LAYOUT.dialog.insetX,\n  },\n  dialog: {\n    width: '100%',\n    borderRadius: LAYOUT.dialog.radius,\n    paddingHorizontal: 22,\n    paddingTop: 26,\n    paddingBottom: 18,\n    gap: 12,\n  },\n  title: { fontSize: 18, fontWeight: '700', textAlign: 'center' },\n  description: { fontSize: 14, lineHeight: 21, textAlign: 'center' },\n  buttons: { flexDirection: 'row', gap: 10, marginTop: 6 },\n  button: { flex: 1, height: 48, alignItems: 'center', justifyContent: 'center', borderRadius: 10 },\n})\n"],"mappings":"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"}

package/dist/native.d.mts

@@ -0,0 +1,7 @@
+import { BottomSheetBaseProps, DialogBaseProps, FitLayoutBaseProps, FitRegion, OverlayBaseProps, ScreenLayoutBaseProps } from "./types.mjs";
+import { LAYOUT, LayoutTokens } from "./tokens.mjs";
+import { setDimHandler } from "./dim-bridge.mjs";
+import { ScreenLayout, ScreenLayoutProps, Stack, StackProps } from "./native/ScreenLayout.mjs";
+import { FitLayout, FitLayoutProps } from "./native/FitLayout.mjs";
+import { BottomSheet, BottomSheetProps, Dialog, DialogProps } from "./native/overlays.mjs";
+export { BottomSheet, type BottomSheetBaseProps, type BottomSheetProps, Dialog, type DialogBaseProps, type DialogProps, FitLayout, type FitLayoutBaseProps, type FitLayoutProps, type FitRegion, LAYOUT, type LayoutTokens, type OverlayBaseProps, ScreenLayout, type ScreenLayoutBaseProps, type ScreenLayoutProps, Stack, type StackProps, setDimHandler };

package/dist/native.mjs

@@ -0,0 +1,6 @@
+import { LAYOUT } from "./tokens.mjs";
+import { setDimHandler } from "./dim-bridge.mjs";
+import { ScreenLayout, Stack } from "./native/ScreenLayout.mjs";
+import { FitLayout } from "./native/FitLayout.mjs";
+import { BottomSheet, Dialog } from "./native/overlays.mjs";
+export { BottomSheet, Dialog, FitLayout, LAYOUT, ScreenLayout, Stack, setDimHandler };

package/dist/tokens.d.mts

@@ -0,0 +1,43 @@
+//#region src/tokens.d.ts
+/**
+ * 레이아웃 수치. 사내 앱 6곳(openiot-203-webview · openiot-008-app · 202-app-client ·
+ * 203-karking-guest-app · openiot-203-app · openiot-sample-app-react-native)에서
+ * 반복 등장하던 값을 한 곳으로 모은 것이다.
+ *
+ * 웹과 RN 컴포넌트가 **같은 상수를 읽어** 두 플랫폼이 갈라지지 않게 한다.
+ * 지금까지는 같은 숫자가 각 레포에 복사돼 있어서 조용히 어긋날 수 있었다.
+ */
+declare const LAYOUT: {
+  /** 모바일 콘텐츠 최대 폭. 데스크톱 브라우저에서 가운데 정렬 기준. */readonly maxWidth: 428; /** 헤더. 높이는 최소값이며 내용에 따라 늘어난다(2단 헤더 등). */
+  readonly header: {
+    readonly minHeight: 40;
+  }; /** 본문 — px 20 / pt 24 / pb 32 / 섹션 간 gap 48. */
+  readonly content: {
+    readonly paddingX: 20;
+    readonly paddingTop: 24;
+    readonly paddingBottom: 32;
+    readonly gap: 48;
+  }; /** 하단 액션 영역 (CTA 버튼 한 줄). */
+  readonly footer: {
+    readonly height: 96;
+    readonly paddingX: 20;
+    readonly paddingY: 24;
+  }; /** 탭바 — 웹은 고정 60, RN 은 68 + safe-area. */
+  readonly tabBar: {
+    readonly web: 60;
+    readonly native: 68;
+  }; /** 섹션 묶음 간격 (구 ContentLayout). */
+  readonly stackGap: 16; /** 바텀시트 상단 라운드. */
+  readonly sheetRadius: 20; /** 다이얼로그 — 라운드와 좌우 여백. */
+  readonly dialog: {
+    readonly radius: 16;
+    readonly insetX: 32;
+  }; /** FitLayout 의 sheet 구획 상단 라운드. */
+  readonly fitSheetRadius: 16; /** 오버레이 딤 불투명도. */
+  readonly dimOpacity: 0.62;
+};
+/** 로고·브랜드 규칙과 무관한 순수 구조 수치라 색상은 포함하지 않는다. */
+type LayoutTokens = typeof LAYOUT;
+//#endregion
+export { LAYOUT, LayoutTokens };
+//# sourceMappingURL=tokens.d.mts.map

package/dist/tokens.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.mts","names":[],"sources":["../src/tokens.ts"],"mappings":";;AAQA;;;;;;;cAAa,MAAA;;;;;;;;;;;;;;;;;;;KAiC2B;EAAA;;;;;;;;;;KAA5B,YAAA,UAAsB,MAAM"}

package/dist/tokens.mjs

@@ -0,0 +1,50 @@
+//#region src/tokens.ts
+/**
+* 레이아웃 수치. 사내 앱 6곳(openiot-203-webview · openiot-008-app · 202-app-client ·
+* 203-karking-guest-app · openiot-203-app · openiot-sample-app-react-native)에서
+* 반복 등장하던 값을 한 곳으로 모은 것이다.
+*
+* 웹과 RN 컴포넌트가 **같은 상수를 읽어** 두 플랫폼이 갈라지지 않게 한다.
+* 지금까지는 같은 숫자가 각 레포에 복사돼 있어서 조용히 어긋날 수 있었다.
+*/
+const LAYOUT = {
+	/** 모바일 콘텐츠 최대 폭. 데스크톱 브라우저에서 가운데 정렬 기준. */
+	maxWidth: 428,
+	/** 헤더. 높이는 최소값이며 내용에 따라 늘어난다(2단 헤더 등). */
+	header: { minHeight: 40 },
+	/** 본문 — px 20 / pt 24 / pb 32 / 섹션 간 gap 48. */
+	content: {
+		paddingX: 20,
+		paddingTop: 24,
+		paddingBottom: 32,
+		gap: 48
+	},
+	/** 하단 액션 영역 (CTA 버튼 한 줄). */
+	footer: {
+		height: 96,
+		paddingX: 20,
+		paddingY: 24
+	},
+	/** 탭바 — 웹은 고정 60, RN 은 68 + safe-area. */
+	tabBar: {
+		web: 60,
+		native: 68
+	},
+	/** 섹션 묶음 간격 (구 ContentLayout). */
+	stackGap: 16,
+	/** 바텀시트 상단 라운드. */
+	sheetRadius: 20,
+	/** 다이얼로그 — 라운드와 좌우 여백. */
+	dialog: {
+		radius: 16,
+		insetX: 32
+	},
+	/** FitLayout 의 sheet 구획 상단 라운드. */
+	fitSheetRadius: 16,
+	/** 오버레이 딤 불투명도. */
+	dimOpacity: .62
+};
+//#endregion
+export { LAYOUT };
+
+//# sourceMappingURL=tokens.mjs.map

package/dist/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.mjs","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * 레이아웃 수치. 사내 앱 6곳(openiot-203-webview · openiot-008-app · 202-app-client ·\n * 203-karking-guest-app · openiot-203-app · openiot-sample-app-react-native)에서\n * 반복 등장하던 값을 한 곳으로 모은 것이다.\n *\n * 웹과 RN 컴포넌트가 **같은 상수를 읽어** 두 플랫폼이 갈라지지 않게 한다.\n * 지금까지는 같은 숫자가 각 레포에 복사돼 있어서 조용히 어긋날 수 있었다.\n */\nexport const LAYOUT = {\n  /** 모바일 콘텐츠 최대 폭. 데스크톱 브라우저에서 가운데 정렬 기준. */\n  maxWidth: 428,\n\n  /** 헤더. 높이는 최소값이며 내용에 따라 늘어난다(2단 헤더 등). */\n  header: { minHeight: 40 },\n\n  /** 본문 — px 20 / pt 24 / pb 32 / 섹션 간 gap 48. */\n  content: { paddingX: 20, paddingTop: 24, paddingBottom: 32, gap: 48 },\n\n  /** 하단 액션 영역 (CTA 버튼 한 줄). */\n  footer: { height: 96, paddingX: 20, paddingY: 24 },\n\n  /** 탭바 — 웹은 고정 60, RN 은 68 + safe-area. */\n  tabBar: { web: 60, native: 68 },\n\n  /** 섹션 묶음 간격 (구 ContentLayout). */\n  stackGap: 16,\n\n  /** 바텀시트 상단 라운드. */\n  sheetRadius: 20,\n\n  /** 다이얼로그 — 라운드와 좌우 여백. */\n  dialog: { radius: 16, insetX: 32 },\n\n  /** FitLayout 의 sheet 구획 상단 라운드. */\n  fitSheetRadius: 16,\n\n  /** 오버레이 딤 불투명도. */\n  dimOpacity: 0.62,\n} as const\n\n/** 로고·브랜드 규칙과 무관한 순수 구조 수치라 색상은 포함하지 않는다. */\nexport type LayoutTokens = typeof LAYOUT\n"],"mappings":";;;;;;;;;AAQA,MAAa,SAAS;;CAEpB,UAAU;;CAGV,QAAQ,EAAE,WAAW,GAAG;;CAGxB,SAAS;EAAE,UAAU;EAAI,YAAY;EAAI,eAAe;EAAI,KAAK;CAAG;;CAGpE,QAAQ;EAAE,QAAQ;EAAI,UAAU;EAAI,UAAU;CAAG;;CAGjD,QAAQ;EAAE,KAAK;EAAI,QAAQ;CAAG;;CAG9B,UAAU;;CAGV,aAAa;;CAGb,QAAQ;EAAE,QAAQ;EAAI,QAAQ;CAAG;;CAGjC,gBAAgB;;CAGhB,YAAY;AACd"}

package/dist/types.d.mts

@@ -0,0 +1,91 @@
+import { ReactNode } from "react";
+
+//#region src/types.d.ts
+/**
+ * 웹·RN 컴포넌트가 공유하는 prop 계약.
+ *
+ * 두 구현이 이 타입을 각각 확장하므로, 한쪽에만 prop 을 추가하면 타입은 통과하지만
+ * 계약이 갈라진다. 새 prop 은 반드시 여기에 먼저 추가한다.
+ */
+/** 화면 하단에 무엇이 오는가. */
+interface ScreenLayoutBaseProps {
+  /** 상단 고정 영역. 높이는 최소 40px 이고 내용에 따라 늘어난다. */
+  header?: ReactNode;
+  /** 스크롤되는 본문. */
+  children: ReactNode;
+  /**
+   * 하단 고정 영역 — CTA 버튼이나 탭바.
+   * 탭바를 넣을 때는 `safeBottom={false}` 로 두어 탭바가 safe-area 를 직접 처리하게 한다.
+   */
+  footer?: ReactNode;
+  /** footer 아래 배너 슬롯 (구 BasicLayout 의 bannerChildren). */
+  banner?: ReactNode;
+  /**
+   * 하단 safe-area 여백을 레이아웃이 넣을지 (기본 true).
+   * 탭바처럼 자체적으로 inset 을 처리하는 footer 를 쓸 때 false.
+   */
+  safeBottom?: boolean;
+  /**
+   * 콘텐츠 최대 폭 (기본 428). `false` 면 폭 제한 없이 꽉 채운다.
+   * RN 에서는 항상 화면 폭이라 무시된다.
+   */
+  maxWidth?: number | false;
+}
+/** FitLayout 의 구획 하나. */
+interface FitRegion {
+  /** 고정 높이(px) 또는 남은 공간을 채우는 `'fill'`. */
+  height: number | 'fill';
+  /**
+   * `'sheet'` 면 상단 라운드 16 + 배경 전환이 붙어 기기제어형 시트가 된다.
+   * 보통 마지막 `'fill'` 구획에 준다.
+   */
+  variant?: 'plain' | 'sheet';
+  /** 구획 내용. */
+  node: ReactNode;
+  /** React 리스트 key (미지정 시 인덱스). */
+  key?: string;
+}
+/** 스크롤 없이 한 화면에 배분하는 레이아웃. */
+interface FitLayoutBaseProps {
+  header?: ReactNode;
+  /** 위에서 아래로 배치할 구획들. `'fill'` 은 하나만 두는 것을 권장한다. */
+  regions: FitRegion[];
+  /** 하단 액션 영역 (96px). */
+  action?: ReactNode;
+  /** sheet 구획 배경색. 지정하지 않으면 투명이라 부모 배경이 비친다. */
+  sheetBackground?: string;
+  safeBottom?: boolean;
+  maxWidth?: number | false;
+}
+/** 열림 상태를 밖에서 제어하는 오버레이 공통 prop. */
+interface OverlayBaseProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 배경(딤) 탭으로 닫히지 않게 하려면 false (기본 true). */
+  dismissible?: boolean;
+}
+interface BottomSheetBaseProps extends OverlayBaseProps {
+  children: ReactNode;
+  /** 스크린리더용 제목. 시각적 제목은 children 안에 직접 넣는다. */
+  label: string;
+}
+interface DialogBaseProps extends OverlayBaseProps {
+  title: string;
+  description?: ReactNode;
+  /** 왼쪽 보조 버튼. */
+  cancel?: {
+    label: string;
+    onPress?: () => void;
+  };
+  /** 오른쪽 주요 버튼. `tone: 'danger'` 면 파괴적 동작으로 표시된다. */
+  confirm?: {
+    label: string;
+    onPress?: () => void;
+    tone?: 'default' | 'danger';
+  };
+  /** 버튼 대신 직접 채우고 싶을 때. */
+  children?: ReactNode;
+}
+//#endregion
+export { BottomSheetBaseProps, DialogBaseProps, FitLayoutBaseProps, FitRegion, OverlayBaseProps, ScreenLayoutBaseProps };
+//# sourceMappingURL=types.d.mts.map

package/dist/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;AAUA;;;;;UAAiB,qBAAA;EAWN;EATT,MAAA,GAAS,SAAA;EASS;EAPlB,QAAA,EAAU,SAAA;EAFD;;;;EAOT,MAAA,GAAS,SAAA;EAET;EAAA,MAAA,GAAS,SAAA;EAKT;;;AAKQ;EALR,UAAA;EASwB;;;;EAJxB,QAAA;AAAA;;UAIe,SAAA;EAWZ;EATH,MAAA;EAae;;;;EARf,OAAA;EAaS;EAXT,IAAA,EAAM,SAAS;EAWG;EATlB,GAAA;AAAA;;UAIe,kBAAA;EACf,MAAA,GAAS,SAAA;EAIA;EAFT,OAAA,EAAS,SAAA;EAKT;EAHA,MAAA,GAAS,SAAA;EAID;EAFR,eAAA;EACA,UAAA;EACA,QAAA;AAAA;;UAIe,gBAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;EAEf;EAAA,WAAA;AAAA;AAAA,UAGe,oBAAA,SAA6B,gBAAgB;EAC5D,QAAA,EAAU,SAAA;;EAEV,KAAA;AAAA;AAAA,UAGe,eAAA,SAAwB,gBAAA;EACvC,KAAA;EACA,WAAA,GAAc,SAAA;EALT;EAOL,MAAA;IAAW,KAAA;IAAe,OAAA;EAAA;EAFZ;EAId,OAAA;IAAY,KAAA;IAAe,OAAA;IAAsB,IAAA;EAAA;EALjD;EAOA,QAAA,GAAW,SAAA;AAAA"}

package/dist/web/FitLayout.d.mts

@@ -0,0 +1,55 @@
+import { FitLayoutBaseProps } from "../types.mjs";
+import { CSSProperties } from "react";
+
+//#region src/web/FitLayout.d.ts
+interface FitLayoutProps extends FitLayoutBaseProps {
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * 고정형 화면 골격 — 스크롤 없이 구획을 배분한다.
+ *
+ * 구 `DeviceConnectLayout`(가이드 160 / 이미지 328 / 정보 fill)과
+ * `DeviceControlLayout`(서머리 336 / 시트 fill)을 대체한다. 둘의 차이는 구획 비율과
+ * 마지막 구획의 시트 여부뿐이라 `regions` 배열로 흡수된다.
+ *
+ * 단계가 바뀌어도 액션 버튼 위치가 흔들리지 않는 것이 이 레이아웃의 핵심이다.
+ * 내용 길이가 가변이면 `ScreenLayout` 을 쓴다.
+ *
+ * @example
+ * ```tsx
+ * // 기기 연결 마법사
+ * <FitLayout
+ *   header={<Header onBackPress={back} />}
+ *   regions={[
+ *     { height: 160, node: <Guide /> },
+ *     { height: 328, node: <DeviceImage /> },
+ *     { height: 'fill', node: <Info /> },
+ *   ]}
+ *   action={<Button>기기 연결하기</Button>}
+ * />
+ *
+ * // 기기 제어 — 마지막 구획을 시트로
+ * <FitLayout
+ *   header={<Header title="거실 공기청정기" onBackPress={back} />}
+ *   regions={[
+ *     { height: 336, node: <Summary /> },
+ *     { height: 'fill', variant: 'sheet', node: <Controls /> },
+ *   ]}
+ *   sheetBackground="#292E36"
+ * />
+ * ```
+ */
+declare function FitLayout({
+  header,
+  regions,
+  action,
+  sheetBackground,
+  safeBottom,
+  maxWidth,
+  className,
+  style
+}: FitLayoutProps): import("react").JSX.Element;
+//#endregion
+export { FitLayout, FitLayoutProps };
+//# sourceMappingURL=FitLayout.d.mts.map

package/dist/web/FitLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitLayout.d.mts","names":[],"sources":["../../src/web/FitLayout.tsx"],"mappings":";;;;UAIiB,cAAA,SAAuB,kBAAkB;EACxD,SAAA;EACA,KAAA,GAAQ,aAAA;AAAA;;;;;;;;AAAa;AAqDvB;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,SAAA;EACd,MAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,cAAA,mBAAc,GAAA,CAAA,OAAA"}

package/dist/web/FitLayout.mjs

@@ -0,0 +1,111 @@
+import { LAYOUT } from "../tokens.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/web/FitLayout.tsx
+function regionStyle(region, sheetBackground) {
+	const base = region.height === "fill" ? {
+		flex: 1,
+		minHeight: 0
+	} : {
+		flex: "none",
+		height: region.height
+	};
+	if (region.variant !== "sheet") return {
+		...base,
+		width: "100%"
+	};
+	return {
+		...base,
+		width: "100%",
+		borderTopLeftRadius: LAYOUT.fitSheetRadius,
+		borderTopRightRadius: LAYOUT.fitSheetRadius,
+		overflow: "hidden",
+		...sheetBackground ? { backgroundColor: sheetBackground } : null
+	};
+}
+/**
+* 고정형 화면 골격 — 스크롤 없이 구획을 배분한다.
+*
+* 구 `DeviceConnectLayout`(가이드 160 / 이미지 328 / 정보 fill)과
+* `DeviceControlLayout`(서머리 336 / 시트 fill)을 대체한다. 둘의 차이는 구획 비율과
+* 마지막 구획의 시트 여부뿐이라 `regions` 배열로 흡수된다.
+*
+* 단계가 바뀌어도 액션 버튼 위치가 흔들리지 않는 것이 이 레이아웃의 핵심이다.
+* 내용 길이가 가변이면 `ScreenLayout` 을 쓴다.
+*
+* @example
+* ```tsx
+* // 기기 연결 마법사
+* <FitLayout
+*   header={<Header onBackPress={back} />}
+*   regions={[
+*     { height: 160, node: <Guide /> },
+*     { height: 328, node: <DeviceImage /> },
+*     { height: 'fill', node: <Info /> },
+*   ]}
+*   action={<Button>기기 연결하기</Button>}
+* />
+*
+* // 기기 제어 — 마지막 구획을 시트로
+* <FitLayout
+*   header={<Header title="거실 공기청정기" onBackPress={back} />}
+*   regions={[
+*     { height: 336, node: <Summary /> },
+*     { height: 'fill', variant: 'sheet', node: <Controls /> },
+*   ]}
+*   sheetBackground="#292E36"
+* />
+* ```
+*/
+function FitLayout({ header, regions, action, sheetBackground, safeBottom = true, maxWidth = LAYOUT.maxWidth, className, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			width: "100%"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				width: "100%",
+				height: "100dvh",
+				overflow: "hidden",
+				...maxWidth === false ? null : { maxWidth },
+				...style
+			},
+			children: [
+				header !== void 0 && /* @__PURE__ */ jsx("header", {
+					style: {
+						flex: "none",
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						width: "100%",
+						minHeight: LAYOUT.header.minHeight
+					},
+					children: header
+				}),
+				regions.map((region, i) => /* @__PURE__ */ jsx("div", {
+					style: regionStyle(region, sheetBackground),
+					children: region.node
+				}, region.key ?? i)),
+				action !== void 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						flex: "none",
+						width: "100%",
+						paddingLeft: LAYOUT.footer.paddingX,
+						paddingRight: LAYOUT.footer.paddingX,
+						paddingTop: LAYOUT.footer.paddingY,
+						paddingBottom: safeBottom ? `calc(${LAYOUT.footer.paddingY}px + env(safe-area-inset-bottom))` : LAYOUT.footer.paddingY
+					},
+					children: action
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { FitLayout };
+
+//# sourceMappingURL=FitLayout.mjs.map

package/dist/web/FitLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitLayout.mjs","names":[],"sources":["../../src/web/FitLayout.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { LAYOUT } from '../tokens.js'\nimport type { FitLayoutBaseProps, FitRegion } from '../types.js'\n\nexport interface FitLayoutProps extends FitLayoutBaseProps {\n  className?: string\n  style?: CSSProperties\n}\n\nfunction regionStyle(region: FitRegion, sheetBackground?: string): CSSProperties {\n  const base: CSSProperties =\n    region.height === 'fill' ? { flex: 1, minHeight: 0 } : { flex: 'none', height: region.height }\n\n  if (region.variant !== 'sheet') return { ...base, width: '100%' }\n\n  return {\n    ...base,\n    width: '100%',\n    borderTopLeftRadius: LAYOUT.fitSheetRadius,\n    borderTopRightRadius: LAYOUT.fitSheetRadius,\n    overflow: 'hidden',\n    ...(sheetBackground ? { backgroundColor: sheetBackground } : null),\n  }\n}\n\n/**\n * 고정형 화면 골격 — 스크롤 없이 구획을 배분한다.\n *\n * 구 `DeviceConnectLayout`(가이드 160 / 이미지 328 / 정보 fill)과\n * `DeviceControlLayout`(서머리 336 / 시트 fill)을 대체한다. 둘의 차이는 구획 비율과\n * 마지막 구획의 시트 여부뿐이라 `regions` 배열로 흡수된다.\n *\n * 단계가 바뀌어도 액션 버튼 위치가 흔들리지 않는 것이 이 레이아웃의 핵심이다.\n * 내용 길이가 가변이면 `ScreenLayout` 을 쓴다.\n *\n * @example\n * ```tsx\n * // 기기 연결 마법사\n * <FitLayout\n *   header={<Header onBackPress={back} />}\n *   regions={[\n *     { height: 160, node: <Guide /> },\n *     { height: 328, node: <DeviceImage /> },\n *     { height: 'fill', node: <Info /> },\n *   ]}\n *   action={<Button>기기 연결하기</Button>}\n * />\n *\n * // 기기 제어 — 마지막 구획을 시트로\n * <FitLayout\n *   header={<Header title=\"거실 공기청정기\" onBackPress={back} />}\n *   regions={[\n *     { height: 336, node: <Summary /> },\n *     { height: 'fill', variant: 'sheet', node: <Controls /> },\n *   ]}\n *   sheetBackground=\"#292E36\"\n * />\n * ```\n */\nexport function FitLayout({\n  header,\n  regions,\n  action,\n  sheetBackground,\n  safeBottom = true,\n  maxWidth = LAYOUT.maxWidth,\n  className,\n  style,\n}: FitLayoutProps) {\n  const column: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100dvh',\n    overflow: 'hidden',\n    ...(maxWidth === false ? null : { maxWidth }),\n  }\n\n  return (\n    <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>\n      <div className={className} style={{ ...column, ...style }}>\n        {header !== undefined && (\n          <header\n            style={{\n              flex: 'none',\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'center',\n              width: '100%',\n              minHeight: LAYOUT.header.minHeight,\n            }}\n          >\n            {header}\n          </header>\n        )}\n\n        {regions.map((region, i) => (\n          <div key={region.key ?? i} style={regionStyle(region, sheetBackground)}>\n            {region.node}\n          </div>\n        ))}\n\n        {action !== undefined && (\n          <div\n            style={{\n              flex: 'none',\n              width: '100%',\n              paddingLeft: LAYOUT.footer.paddingX,\n              paddingRight: LAYOUT.footer.paddingX,\n              paddingTop: LAYOUT.footer.paddingY,\n              paddingBottom: safeBottom\n                ? `calc(${LAYOUT.footer.paddingY}px + env(safe-area-inset-bottom))`\n                : LAYOUT.footer.paddingY,\n            }}\n          >\n            {action}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;AASA,SAAS,YAAY,QAAmB,iBAAyC;CAC/E,MAAM,OACJ,OAAO,WAAW,SAAS;EAAE,MAAM;EAAG,WAAW;CAAE,IAAI;EAAE,MAAM;EAAQ,QAAQ,OAAO;CAAO;CAE/F,IAAI,OAAO,YAAY,SAAS,OAAO;EAAE,GAAG;EAAM,OAAO;CAAO;CAEhE,OAAO;EACL,GAAG;EACH,OAAO;EACP,qBAAqB,OAAO;EAC5B,sBAAsB,OAAO;EAC7B,UAAU;EACV,GAAI,kBAAkB,EAAE,iBAAiB,gBAAgB,IAAI;CAC/D;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,UAAU,EACxB,QACA,SACA,QACA,iBACA,aAAa,MACb,WAAW,OAAO,UAClB,WACA,SACiB;CAUjB,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAAQ,gBAAgB;GAAU,OAAO;EAAO;YACrE,qBAAC,OAAD;GAAgB;GAAW,OAAO;IAVpC,SAAS;IACT,eAAe;IACf,OAAO;IACP,QAAQ;IACR,UAAU;IACV,GAAI,aAAa,QAAQ,OAAO,EAAE,SAAS;IAKM,GAAG;GAAM;aAAxD;IACG,WAAW,KAAA,KACV,oBAAC,UAAD;KACE,OAAO;MACL,MAAM;MACN,SAAS;MACT,eAAe;MACf,gBAAgB;MAChB,OAAO;MACP,WAAW,OAAO,OAAO;KAC3B;eAEC;IACK,CAAA;IAGT,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAA2B,OAAO,YAAY,QAAQ,eAAe;eAClE,OAAO;IACL,GAFK,OAAO,OAAO,CAEnB,CACN;IAEA,WAAW,KAAA,KACV,oBAAC,OAAD;KACE,OAAO;MACL,MAAM;MACN,OAAO;MACP,aAAa,OAAO,OAAO;MAC3B,cAAc,OAAO,OAAO;MAC5B,YAAY,OAAO,OAAO;MAC1B,eAAe,aACX,QAAQ,OAAO,OAAO,SAAS,qCAC/B,OAAO,OAAO;KACpB;eAEC;IACE,CAAA;GAEJ;;CACF,CAAA;AAET"}

package/dist/web/ScreenLayout.d.mts

@@ -0,0 +1,61 @@
+import { ScreenLayoutBaseProps } from "../types.mjs";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/web/ScreenLayout.d.ts
+interface ScreenLayoutProps extends ScreenLayoutBaseProps {
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * 스크롤형 화면 골격 — 헤더 고정 + 본문 스크롤 + 하단 슬롯.
+ *
+ * 구 `BasicLayout` · `TabsLayout` · `ContentLayout` 의 하단 CTA · smart-key 의 full-bleed
+ * 조립을 모두 대체한다. 하단에 무엇이 오느냐(`footer`)만 달랐던 것들이라 prop 하나로 흡수된다.
+ *
+ * 하단 CTA 를 그릴 수 있는 곳은 여기 `footer` 하나뿐이다. 예전에는 BasicLayout 과
+ * ContentLayout 양쪽에서 그릴 수 있어 같은 화면에 CTA 가 두 번 잡히는 일이 있었다.
+ *
+ * @example
+ * ```tsx
+ * <ScreenLayout header={<Header title="방문차량 등록" onBackPress={back} />}
+ *               footer={<Button>등록하기</Button>}>
+ *   <Stack>…</Stack>
+ * </ScreenLayout>
+ *
+ * // 탭 하위 화면 — 탭바가 safe-area 를 직접 처리한다
+ * <ScreenLayout header={<Header leftIcon={<Logo />} />}
+ *               footer={<TabBar />} safeBottom={false}>
+ *   …
+ * </ScreenLayout>
+ * ```
+ */
+declare function ScreenLayout({
+  header,
+  children,
+  footer,
+  banner,
+  safeBottom,
+  maxWidth,
+  className,
+  style
+}: ScreenLayoutProps): import("react").JSX.Element;
+interface StackProps {
+  children: ReactNode;
+  /** 항목 간격 (기본 16). */
+  gap?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * 섹션을 일정 간격으로 쌓는 유틸. 구 `ContentLayout` 의 실체이며,
+ * 레이아웃이 아니라 간격 유틸이라 하단 CTA 슬롯은 갖지 않는다 — 그건 `ScreenLayout.footer` 다.
+ */
+declare function Stack({
+  children,
+  gap,
+  className,
+  style
+}: StackProps): import("react").JSX.Element;
+//#endregion
+export { ScreenLayout, ScreenLayoutProps, Stack, StackProps };
+//# sourceMappingURL=ScreenLayout.d.mts.map

package/dist/web/ScreenLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenLayout.d.mts","names":[],"sources":["../../src/web/ScreenLayout.tsx"],"mappings":";;;;UAIiB,iBAAA,SAA0B,qBAAqB;EAC9D,SAAA;EACA,KAAA,GAAQ,aAAA;AAAA;;;;;;;;AAAa;AA0BvB;;;;;;;;;;;;;;;iBAAgB,YAAA;EACd,MAAA;EACA,QAAA;EACA,MAAA;EACA,MAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,iBAAA,mBAAiB,GAAA,CAAA,OAAA;AAAA,UA6EH,UAAA;EACf,QAAA,EAAU,SAAA;EApFV;EAsFA,GAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAa;AAAA;;;;;iBAOP,KAAA;EAAQ,QAAA;EAAU,GAAA;EAAuB,SAAA;EAAW;AAAA,GAAS,UAAA,mBAAU,GAAA,CAAA,OAAA"}