@mindees/atlas 0.1.0 → 0.2.0

package/dist/a11y.d.ts

@@ -8,7 +8,7 @@
  * @module
  */
 /** A WAI-ARIA-ish role, mapped straight to the host `role` attribute on web. */
-type Role = 'button' | 'link' | 'image' | 'heading' | 'list' | 'listitem' | 'text' | 'textbox' | 'checkbox' | 'switch' | 'radio' | 'tab' | 'tabpanel' | 'dialog' | 'alert' | 'status' | 'none' | 'presentation';
+type Role = 'button' | 'link' | 'image' | 'heading' | 'list' | 'listitem' | 'text' | 'textbox' | 'checkbox' | 'switch' | 'radio' | 'tab' | 'tabpanel' | 'dialog' | 'alert' | 'status' | 'separator' | 'progressbar' | 'none' | 'presentation';
 /** Accessibility state, lowered to the matching `aria-*` attributes. */
 interface A11yState {
   disabled?: boolean;

package/dist/a11y.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.d.ts","names":[],"sources":["../src/a11y.ts"],"mappings":";;AAUA;;;;AAAgB;AAqBhB;;;KArBY,IAAA;;UAqBK,SAAA;EACf,QAAA;EACA,QAAA;EACA,OAAA;EACA,QAAA;EACA,IAAA;EACA,MAAA;AAAA;;UAIe,SAAA;EAYE;EAVjB,IAAA,GAAO,IAAA;EAAA;EAEP,KAAA;EAEA;EAAA,UAAA;EAIA;EAFA,WAAA;EAIQ;EAFR,IAAA;EAEiB;EAAjB,KAAA,GAAQ,SAAS;AAAA;;;;;iBAOH,WAAA,CAAY,IAAA,EAAM,SAAA,GAAY,MAAM"}
+{"version":3,"file":"a11y.d.ts","names":[],"sources":["../src/a11y.ts"],"mappings":";;AAUA;;;;AAAgB;AAuBhB;;;KAvBY,IAAA;;UAuBK,SAAA;EACf,QAAA;EACA,QAAA;EACA,OAAA;EACA,QAAA;EACA,IAAA;EACA,MAAA;AAAA;;UAIe,SAAA;EAYE;EAVjB,IAAA,GAAO,IAAA;EAAA;EAEP,KAAA;EAEA;EAAA,UAAA;EAIA;EAFA,WAAA;EAIQ;EAFR,IAAA;EAEiB;EAAjB,KAAA,GAAQ,SAAS;AAAA;;;;;iBAOH,WAAA,CAAY,IAAA,EAAM,SAAA,GAAY,MAAM"}

package/dist/a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.js","names":[],"sources":["../src/a11y.ts"],"sourcesContent":["/**\n * Atlas accessibility — a single typed `A11yProps` surface lowered to `role` + `aria-*`\n * attribute props. The DOM backend passes these through verbatim (`setAttribute`), so web a11y\n * is real; native hosts receive them as serialized props (interpretation is a 🔬 research-track\n * host concern — carried, never silently dropped). See `docs/adr/0022-atlas-primitives.md`.\n *\n * @module\n */\n\n/** A WAI-ARIA-ish role, mapped straight to the host `role` attribute on web. */\nexport type Role =\n  | 'button'\n  | 'link'\n  | 'image'\n  | 'heading'\n  | 'list'\n  | 'listitem'\n  | 'text'\n  | 'textbox'\n  | 'checkbox'\n  | 'switch'\n  | 'radio'\n  | 'tab'\n  | 'tabpanel'\n  | 'dialog'\n  | 'alert'\n  | 'status'\n  | 'none'\n  | 'presentation'\n\n/** Accessibility state, lowered to the matching `aria-*` attributes. */\nexport interface A11yState {\n  disabled?: boolean\n  selected?: boolean\n  checked?: boolean\n  expanded?: boolean\n  busy?: boolean\n  hidden?: boolean\n}\n\n/** The accessibility surface every Atlas primitive accepts. */\nexport interface A11yProps {\n  /** ARIA role (web `role`). */\n  role?: Role\n  /** Accessible name (`aria-label`). */\n  label?: string\n  /** Id(s) of the element(s) labelling this one (`aria-labelledby`). */\n  labelledBy?: string\n  /** Id(s) of the element(s) describing this one (`aria-describedby`). */\n  describedBy?: string\n  /** Live-region politeness (`aria-live`). */\n  live?: 'off' | 'polite' | 'assertive'\n  /** Accessibility state (`aria-disabled`/`-selected`/`-checked`/`-expanded`/`-busy`/`aria-hidden`). */\n  state?: A11yState\n}\n\n/**\n * Lower {@link A11yProps} to a host prop bag of `role` + `aria-*` (only keys that are defined,\n * so omitted props stay omitted — exactOptionalPropertyTypes-safe).\n */\nexport function toA11yProps(a11y: A11yProps): Record<string, string> {\n  const out: Record<string, string> = {}\n  if (a11y.role !== undefined) out.role = a11y.role\n  if (a11y.label !== undefined) out['aria-label'] = a11y.label\n  if (a11y.labelledBy !== undefined) out['aria-labelledby'] = a11y.labelledBy\n  if (a11y.describedBy !== undefined) out['aria-describedby'] = a11y.describedBy\n  if (a11y.live !== undefined) out['aria-live'] = a11y.live\n  const s = a11y.state\n  if (s) {\n    if (s.disabled !== undefined) out['aria-disabled'] = String(s.disabled)\n    if (s.selected !== undefined) out['aria-selected'] = String(s.selected)\n    if (s.checked !== undefined) out['aria-checked'] = String(s.checked)\n    if (s.expanded !== undefined) out['aria-expanded'] = String(s.expanded)\n    if (s.busy !== undefined) out['aria-busy'] = String(s.busy)\n    if (s.hidden !== undefined) out['aria-hidden'] = String(s.hidden)\n  }\n  return out\n}\n"],"mappings":";;;;;AA4DA,SAAgB,YAAY,MAAyC;CACnE,MAAM,MAA8B,CAAC;CACrC,IAAI,KAAK,SAAS,KAAA,GAAW,IAAI,OAAO,KAAK;CAC7C,IAAI,KAAK,UAAU,KAAA,GAAW,IAAI,gBAAgB,KAAK;CACvD,IAAI,KAAK,eAAe,KAAA,GAAW,IAAI,qBAAqB,KAAK;CACjE,IAAI,KAAK,gBAAgB,KAAA,GAAW,IAAI,sBAAsB,KAAK;CACnE,IAAI,KAAK,SAAS,KAAA,GAAW,IAAI,eAAe,KAAK;CACrD,MAAM,IAAI,KAAK;CACf,IAAI,GAAG;EACL,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,YAAY,KAAA,GAAW,IAAI,kBAAkB,OAAO,EAAE,OAAO;EACnE,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,SAAS,KAAA,GAAW,IAAI,eAAe,OAAO,EAAE,IAAI;EAC1D,IAAI,EAAE,WAAW,KAAA,GAAW,IAAI,iBAAiB,OAAO,EAAE,MAAM;CAClE;CACA,OAAO;AACT"}
+{"version":3,"file":"a11y.js","names":[],"sources":["../src/a11y.ts"],"sourcesContent":["/**\n * Atlas accessibility — a single typed `A11yProps` surface lowered to `role` + `aria-*`\n * attribute props. The DOM backend passes these through verbatim (`setAttribute`), so web a11y\n * is real; native hosts receive them as serialized props (interpretation is a 🔬 research-track\n * host concern — carried, never silently dropped). See `docs/adr/0022-atlas-primitives.md`.\n *\n * @module\n */\n\n/** A WAI-ARIA-ish role, mapped straight to the host `role` attribute on web. */\nexport type Role =\n  | 'button'\n  | 'link'\n  | 'image'\n  | 'heading'\n  | 'list'\n  | 'listitem'\n  | 'text'\n  | 'textbox'\n  | 'checkbox'\n  | 'switch'\n  | 'radio'\n  | 'tab'\n  | 'tabpanel'\n  | 'dialog'\n  | 'alert'\n  | 'status'\n  | 'separator'\n  | 'progressbar'\n  | 'none'\n  | 'presentation'\n\n/** Accessibility state, lowered to the matching `aria-*` attributes. */\nexport interface A11yState {\n  disabled?: boolean\n  selected?: boolean\n  checked?: boolean\n  expanded?: boolean\n  busy?: boolean\n  hidden?: boolean\n}\n\n/** The accessibility surface every Atlas primitive accepts. */\nexport interface A11yProps {\n  /** ARIA role (web `role`). */\n  role?: Role\n  /** Accessible name (`aria-label`). */\n  label?: string\n  /** Id(s) of the element(s) labelling this one (`aria-labelledby`). */\n  labelledBy?: string\n  /** Id(s) of the element(s) describing this one (`aria-describedby`). */\n  describedBy?: string\n  /** Live-region politeness (`aria-live`). */\n  live?: 'off' | 'polite' | 'assertive'\n  /** Accessibility state (`aria-disabled`/`-selected`/`-checked`/`-expanded`/`-busy`/`aria-hidden`). */\n  state?: A11yState\n}\n\n/**\n * Lower {@link A11yProps} to a host prop bag of `role` + `aria-*` (only keys that are defined,\n * so omitted props stay omitted — exactOptionalPropertyTypes-safe).\n */\nexport function toA11yProps(a11y: A11yProps): Record<string, string> {\n  const out: Record<string, string> = {}\n  if (a11y.role !== undefined) out.role = a11y.role\n  if (a11y.label !== undefined) out['aria-label'] = a11y.label\n  if (a11y.labelledBy !== undefined) out['aria-labelledby'] = a11y.labelledBy\n  if (a11y.describedBy !== undefined) out['aria-describedby'] = a11y.describedBy\n  if (a11y.live !== undefined) out['aria-live'] = a11y.live\n  const s = a11y.state\n  if (s) {\n    if (s.disabled !== undefined) out['aria-disabled'] = String(s.disabled)\n    if (s.selected !== undefined) out['aria-selected'] = String(s.selected)\n    if (s.checked !== undefined) out['aria-checked'] = String(s.checked)\n    if (s.expanded !== undefined) out['aria-expanded'] = String(s.expanded)\n    if (s.busy !== undefined) out['aria-busy'] = String(s.busy)\n    if (s.hidden !== undefined) out['aria-hidden'] = String(s.hidden)\n  }\n  return out\n}\n"],"mappings":";;;;;AA8DA,SAAgB,YAAY,MAAyC;CACnE,MAAM,MAA8B,CAAC;CACrC,IAAI,KAAK,SAAS,KAAA,GAAW,IAAI,OAAO,KAAK;CAC7C,IAAI,KAAK,UAAU,KAAA,GAAW,IAAI,gBAAgB,KAAK;CACvD,IAAI,KAAK,eAAe,KAAA,GAAW,IAAI,qBAAqB,KAAK;CACjE,IAAI,KAAK,gBAAgB,KAAA,GAAW,IAAI,sBAAsB,KAAK;CACnE,IAAI,KAAK,SAAS,KAAA,GAAW,IAAI,eAAe,KAAK;CACrD,MAAM,IAAI,KAAK;CACf,IAAI,GAAG;EACL,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,YAAY,KAAA,GAAW,IAAI,kBAAkB,OAAO,EAAE,OAAO;EACnE,IAAI,EAAE,aAAa,KAAA,GAAW,IAAI,mBAAmB,OAAO,EAAE,QAAQ;EACtE,IAAI,EAAE,SAAS,KAAA,GAAW,IAAI,eAAe,OAAO,EAAE,IAAI;EAC1D,IAAI,EAAE,WAAW,KAAA,GAAW,IAAI,iBAAiB,OAAO,EAAE,MAAM;CAClE;CACA,OAAO;AACT"}

package/dist/components.d.ts

@@ -0,0 +1,83 @@
+import { StyleInput } from "./style.js";
+import { BaseProps, Reactive } from "./host.js";
+import { Component, MindeesNode } from "@mindees/core";
+
+//#region src/components.d.ts
+/** A surface that groups one coherent unit of content. */
+interface CardProps extends BaseProps {
+  readonly children?: MindeesNode;
+  /** Visual emphasis. `elevated` (default) lifts off the bg; `filled` is a soft tint; `outlined` is a hairline. */
+  readonly variant?: 'elevated' | 'filled' | 'outlined';
+  /** Internal padding (handbook default 16). */
+  readonly padding?: number | string;
+  /** Corner radius (handbook 12–16 for app cards). */
+  readonly radius?: number;
+}
+declare const Card: Component<CardProps>;
+/** A thin rule separating content. */
+interface DividerProps extends BaseProps {
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly thickness?: number;
+  /** Override color (defaults to the theme border). */
+  readonly color?: string;
+}
+declare const Divider: Component<DividerProps>;
+type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** A compact status/count pill. */
+interface BadgeProps extends BaseProps {
+  readonly children?: MindeesNode;
+  readonly tone?: BadgeTone;
+}
+declare const Badge: Component<BadgeProps>;
+/** A circular user image, falling back to initials. */
+interface AvatarProps extends BaseProps {
+  readonly src?: string;
+  readonly name?: string;
+  /** Diameter in px (default 40). */
+  readonly size?: number;
+}
+declare const Avatar: Component<AvatarProps>;
+/** A compact, optionally-selectable token (filter/choice/input). */
+interface ChipProps extends Omit<BaseProps, 'style'> {
+  readonly label: string;
+  readonly selected?: Reactive<boolean>;
+  readonly disabled?: boolean;
+  readonly onPress?: () => void;
+  readonly leading?: MindeesNode;
+  readonly trailing?: MindeesNode;
+  readonly style?: Reactive<StyleInput>;
+}
+declare const Chip: Component<ChipProps>;
+/** A binary on/off toggle (composed track + knob; flips instantly on press). */
+interface SwitchProps extends Omit<BaseProps, 'style'> {
+  /** Controlled state (static or reactive). */
+  readonly value: Reactive<boolean>;
+  readonly onValueChange?: (value: boolean) => void;
+  readonly disabled?: boolean;
+  readonly style?: Reactive<StyleInput>;
+}
+declare const Switch: Component<SwitchProps>;
+/** A container that pads itself by the live safe-area insets (notch, home indicator, …). */
+interface SafeAreaViewProps extends BaseProps {
+  readonly children?: MindeesNode;
+  /** Which edges to inset (default: all four). */
+  readonly edges?: ReadonlyArray<'top' | 'right' | 'bottom' | 'left'>;
+}
+declare const SafeAreaView: Component<SafeAreaViewProps>;
+/** A container that pads its bottom by the live keyboard height so content stays visible. */
+interface KeyboardAvoidingViewProps extends BaseProps {
+  readonly children?: MindeesNode;
+}
+declare const KeyboardAvoidingView: Component<KeyboardAvoidingViewProps>;
+/** A determinate progress bar (track + reactive fill). */
+interface ProgressBarProps extends BaseProps {
+  /** Progress 0..1 (static or reactive). Values outside the range are clamped. */
+  readonly value?: Reactive<number>;
+  readonly trackColor?: string;
+  readonly color?: string;
+  readonly height?: number;
+}
+declare const ProgressBar: Component<ProgressBarProps>;
+//#endregion
+export { Avatar, AvatarProps, Badge, BadgeProps, Card, CardProps, Chip, ChipProps, Divider, DividerProps, KeyboardAvoidingView, KeyboardAvoidingViewProps, ProgressBar, ProgressBarProps, SafeAreaView, SafeAreaViewProps, Switch, SwitchProps };
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","names":[],"sources":["../src/components.ts"],"mappings":";;;;;;UA8CiB,SAAA,SAAkB,SAAS;EAAA,SACjC,QAAA,GAAW,WAAA;EAQT;EAAA,SANF,OAAA;;WAEA,OAAA;EAI2B;EAAA,SAF3B,MAAA;AAAA;AAAA,cAEE,IAAA,EAAM,SAAS,CAAC,SAAA;;UA4BZ,YAAA,SAAqB,SAAS;EAAA,SACpC,WAAA;EAAA,SACA,SAAA;EAEA;EAAA,SAAA,KAAA;AAAA;AAAA,cAEE,OAAA,EAAS,SAAS,CAAC,YAAA;AAAA,KAoBpB,SAAA;;UAUK,UAAA,SAAmB,SAAA;EAAA,SACzB,QAAA,GAAW,WAAA;EAAA,SACX,IAAA,GAAO,SAAA;AAAA;AAAA,cAEL,KAAA,EAAO,SAAS,CAAC,UAAA;;UAwCb,WAAA,SAAoB,SAAS;EAAA,SACnC,GAAA;EAAA,SACA,IAAA;;WAEA,IAAA;AAAA;AAAA,cAEE,MAAA,EAAQ,SAAS,CAAC,WAAA;;UA2Cd,SAAA,SAAkB,IAAA,CAAK,SAAA;EAAA,SAC7B,KAAA;EAAA,SACA,QAAA,GAAW,QAAA;EAAA,SACX,QAAA;EAAA,SACA,OAAA;EAAA,SACA,OAAA,GAAU,WAAA;EAAA,SACV,QAAA,GAAW,WAAA;EAAA,SACX,KAAA,GAAQ,QAAA,CAAS,UAAA;AAAA;AAAA,cAEf,IAAA,EAAM,SAAS,CAAC,SAAA;;UAuDZ,WAAA,SAAoB,IAAA,CAAK,SAAA;EAzJF;EAAA,SA2J7B,KAAA,EAAO,QAAA;EAAA,SACP,aAAA,IAAiB,KAAA;EAAA,SACjB,QAAA;EAAA,SACA,KAAA,GAAQ,QAAA,CAAS,UAAA;AAAA;AAAA,cAEf,MAAA,EAAQ,SAAS,CAAC,WAAA;;UA4Cd,iBAAA,SAA0B,SAAA;EAAA,SAChC,QAAA,GAAW,WAAA;EAjKP;EAAA,SAmKJ,KAAA,GAAQ,aAAA;AAAA;AAAA,cAEN,YAAA,EAAc,SAAS,CAAC,iBAAA;;UAsBpB,yBAAA,SAAkC,SAAS;EAAA,SACjD,QAAA,GAAW,WAAA;AAAA;AAAA,cAET,oBAAA,EAAsB,SAAS,CAAC,yBAAA;;UAY5B,gBAAA,SAAyB,SAAS;EAxJ9B;EAAA,SA0JV,KAAA,GAAQ,QAAA;EAAA,SACR,UAAA;EAAA,SACA,KAAA;EAAA,SACA,MAAA;AAAA;AAAA,cAEE,WAAA,EAAa,SAAS,CAAC,gBAAA"}

package/dist/components.js

@@ -0,0 +1,283 @@
+import { useKeyboard, useSafeAreaInsets } from "./environment.js";
+import { flattenStyle } from "./style.js";
+import { Image, Pressable, Text, View } from "./primitives.js";
+import { fontWeight, radius, space, useTheme } from "./tokens.js";
+import { createElement } from "@mindees/core";
+//#region src/components.ts
+/**
+* Atlas components — higher-level building blocks composed purely from the primitives
+* (View/Text/Pressable/Image) + the device hooks. No new host concepts, so every one
+* renders on web *and* native today, and stays fine-grained: reactive bits are accessor
+* styles, so only the changed node re-runs (no component re-render).
+*
+* Colors come from the design tokens via {@link useTheme}, so components re-theme
+* automatically light↔dark (handbook §23/§31). Spacing/radius/type use the token scales.
+*
+* @module
+*/
+/** Merge a base style with a caller's (possibly reactive) style, staying reactive if either is. */
+function mergeStyle(base, style) {
+	const baseFn = typeof base === "function" ? base : null;
+	const styleFn = typeof style === "function" ? style : null;
+	if (baseFn || styleFn) {
+		const baseVal = base;
+		const styleVal = style;
+		return () => flattenStyle([baseFn ? baseFn() : baseVal, styleFn ? styleFn() : styleVal]);
+	}
+	return flattenStyle([base, style]);
+}
+/** Normalize a `Reactive<T>` to an accessor. */
+function toAccessor(value, fallback) {
+	if (typeof value === "function") return value;
+	return () => value === void 0 ? fallback : value;
+}
+const Card = (props) => {
+	const theme = useTheme();
+	const { variant = "elevated", padding = space.md, radius: radius$1 = radius.lg, style, children, ...rest } = props;
+	const base = () => {
+		const c = theme().color;
+		return {
+			padding,
+			borderRadius: radius$1,
+			...variant === "outlined" ? {
+				borderWidth: 1,
+				borderColor: c.border
+			} : variant === "filled" ? { backgroundColor: c.surfaceVariant } : {
+				backgroundColor: c.surface,
+				borderWidth: 1,
+				borderColor: c.border
+			}
+		};
+	};
+	return createElement(View, {
+		...rest,
+		style: mergeStyle(base, style)
+	}, children);
+};
+const Divider = (props) => {
+	const theme = useTheme();
+	const { orientation = "horizontal", thickness = 1, color, style, ...rest } = props;
+	const base = () => {
+		const bg = color ?? theme().color.border;
+		return orientation === "horizontal" ? {
+			height: thickness,
+			alignSelf: "stretch",
+			backgroundColor: bg
+		} : {
+			width: thickness,
+			alignSelf: "stretch",
+			backgroundColor: bg
+		};
+	};
+	return createElement(View, {
+		...rest,
+		role: rest.role ?? "separator",
+		style: mergeStyle(base, style)
+	});
+};
+/** Resolve a tone to its {bg, fg} in the active theme. */
+function toneColors(tone, theme) {
+	const c = theme.color;
+	if (tone === "neutral") return {
+		bg: c.surfaceVariant,
+		fg: c.text
+	};
+	return {
+		bg: c[tone],
+		fg: c.onTone
+	};
+}
+const Badge = (props) => {
+	const theme = useTheme();
+	const { tone = "neutral", style, children, ...rest } = props;
+	const base = () => ({
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		paddingTop: space["3xs"],
+		paddingBottom: space["3xs"],
+		paddingLeft: space.xs,
+		paddingRight: space.xs,
+		borderRadius: radius.full,
+		backgroundColor: toneColors(tone, theme()).bg
+	});
+	const textStyle = () => ({
+		fontSize: 12,
+		fontWeight: fontWeight.semibold,
+		color: toneColors(tone, theme()).fg
+	});
+	return createElement(View, {
+		...rest,
+		role: rest.role ?? "status",
+		style: mergeStyle(base, style)
+	}, createElement(Text, { style: textStyle }, children));
+};
+/** Up-to-two-letter initials from a name. */
+function initialsOf(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "?";
+	return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "")).toUpperCase();
+}
+const Avatar = (props) => {
+	const theme = useTheme();
+	const { src, name, size = 40, style, ...rest } = props;
+	const base = () => ({
+		width: size,
+		height: size,
+		borderRadius: size / 2,
+		overflow: "hidden",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: theme().color.surfaceVariant
+	});
+	const content = src ? createElement(Image, {
+		src,
+		label: name ?? "",
+		...name ? {} : { decorative: true },
+		style: {
+			width: size,
+			height: size
+		}
+	}) : createElement(Text, { style: () => ({
+		fontSize: Math.round(size * .4),
+		fontWeight: fontWeight.semibold,
+		color: theme().color.text
+	}) }, name ? initialsOf(name) : "?");
+	return createElement(View, {
+		...rest,
+		label: rest.label ?? name,
+		style: mergeStyle(base, style)
+	}, content);
+};
+const Chip = (props) => {
+	const theme = useTheme();
+	const { label, selected = false, disabled, onPress, leading, trailing, style, ...rest } = props;
+	const isSelected = toAccessor(selected, false);
+	const base = () => {
+		const c = theme().color;
+		const on = isSelected();
+		return {
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: space["2xs"],
+			minHeight: 32,
+			paddingTop: space["2xs"],
+			paddingBottom: space["2xs"],
+			paddingLeft: space.sm,
+			paddingRight: space.sm,
+			borderRadius: radius.full,
+			borderWidth: 1,
+			borderColor: on ? c.primary : c.border,
+			backgroundColor: on ? c.primary : "transparent",
+			opacity: disabled ? .5 : 1
+		};
+	};
+	const inner = [
+		leading,
+		createElement(Text, { style: () => ({
+			fontSize: 14,
+			fontWeight: fontWeight.medium,
+			color: isSelected() ? theme().color.onPrimary : theme().color.text
+		}) }, label),
+		trailing
+	].filter((n) => n != null);
+	return createElement(Pressable, {
+		...rest,
+		role: rest.role ?? "button",
+		...onPress ? { onPress } : {},
+		...disabled ? { disabled: true } : {},
+		style: mergeStyle(base, style)
+	}, inner);
+};
+const Switch = (props) => {
+	const theme = useTheme();
+	const { value, onValueChange, disabled, style, ...rest } = props;
+	const isOn = toAccessor(value, false);
+	const track = () => ({
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: isOn() ? "flex-end" : "flex-start",
+		width: 52,
+		height: 32,
+		borderRadius: radius.full,
+		padding: 3,
+		backgroundColor: isOn() ? theme().color.primary : theme().color.textMuted,
+		opacity: disabled ? .5 : 1
+	});
+	const knob = createElement(View, { style: () => ({
+		width: 26,
+		height: 26,
+		borderRadius: 13,
+		backgroundColor: theme().color.onPrimary
+	}) });
+	const handlePress = onValueChange && !disabled ? () => onValueChange(!isOn()) : void 0;
+	return createElement(Pressable, {
+		...rest,
+		role: rest.role ?? "switch",
+		state: {
+			...rest.state ?? {},
+			checked: isOn()
+		},
+		...disabled ? { disabled: true } : {},
+		...handlePress ? { onPress: handlePress } : {},
+		style: mergeStyle(track, style)
+	}, knob);
+};
+const SafeAreaView = (props) => {
+	const insets = useSafeAreaInsets();
+	const { edges, style, children, ...rest } = props;
+	const wants = (edge) => !edges || edges.includes(edge);
+	const base = () => {
+		const i = insets();
+		return {
+			paddingTop: wants("top") ? i.top : 0,
+			paddingRight: wants("right") ? i.right : 0,
+			paddingBottom: wants("bottom") ? i.bottom : 0,
+			paddingLeft: wants("left") ? i.left : 0
+		};
+	};
+	return createElement(View, {
+		...rest,
+		style: mergeStyle(base, style)
+	}, children);
+};
+const KeyboardAvoidingView = (props) => {
+	const keyboard = useKeyboard();
+	const { style, children, ...rest } = props;
+	const base = () => ({ paddingBottom: keyboard().height });
+	return createElement(View, {
+		...rest,
+		style: mergeStyle(base, style)
+	}, children);
+};
+const ProgressBar = (props) => {
+	const theme = useTheme();
+	const { value = 0, trackColor, color, height = 6, style, ...rest } = props;
+	const progress = toAccessor(value, 0);
+	const track = () => ({
+		width: "100%",
+		height,
+		borderRadius: height / 2,
+		overflow: "hidden",
+		backgroundColor: trackColor ?? theme().color.surfaceVariant
+	});
+	const fill = () => ({
+		height,
+		borderRadius: height / 2,
+		backgroundColor: color ?? theme().color.primary,
+		width: `${Math.max(0, Math.min(1, progress())) * 100}%`
+	});
+	return createElement(View, {
+		...rest,
+		role: rest.role ?? "progressbar",
+		style: mergeStyle(track, style)
+	}, createElement(View, { style: fill }));
+};
+//#endregion
+export { Avatar, Badge, Card, Chip, Divider, KeyboardAvoidingView, ProgressBar, SafeAreaView, Switch };
+
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","names":["radiusScale","radius"],"sources":["../src/components.ts"],"sourcesContent":["/**\n * Atlas components — higher-level building blocks composed purely from the primitives\n * (View/Text/Pressable/Image) + the device hooks. No new host concepts, so every one\n * renders on web *and* native today, and stays fine-grained: reactive bits are accessor\n * styles, so only the changed node re-runs (no component re-render).\n *\n * Colors come from the design tokens via {@link useTheme}, so components re-theme\n * automatically light↔dark (handbook §23/§31). Spacing/radius/type use the token scales.\n *\n * @module\n */\n\nimport { type Accessor, type Component, createElement, type MindeesNode } from '@mindees/core'\nimport { useKeyboard, useSafeAreaInsets } from './environment'\nimport type { BaseProps, Reactive } from './host'\nimport { Image, Pressable, Text, View } from './primitives'\nimport { flattenStyle, type StyleInput } from './style'\nimport { fontWeight, radius as radiusScale, space, type Theme, useTheme } from './tokens'\n\n/** Merge a base style with a caller's (possibly reactive) style, staying reactive if either is. */\nfunction mergeStyle(\n  base: StyleInput | Accessor<StyleInput>,\n  style: Reactive<StyleInput> | undefined,\n): Reactive<StyleInput> {\n  const baseFn = typeof base === 'function' ? (base as Accessor<StyleInput>) : null\n  const styleFn = typeof style === 'function' ? (style as Accessor<StyleInput>) : null\n  if (baseFn || styleFn) {\n    // In each branch the non-fn side isn't a function, so the StyleInput cast is sound.\n    const baseVal = base as StyleInput\n    const styleVal = style as StyleInput\n    return () => flattenStyle([baseFn ? baseFn() : baseVal, styleFn ? styleFn() : styleVal])\n  }\n  return flattenStyle([base as StyleInput, style as StyleInput])\n}\n\n/** Normalize a `Reactive<T>` to an accessor. */\nfunction toAccessor<T>(value: Reactive<T>, fallback: T): Accessor<T> {\n  if (typeof value === 'function') return value as Accessor<T>\n  return () => (value === undefined ? fallback : value)\n}\n\n// ---------------------------------------------------------------------------\n// Card\n// ---------------------------------------------------------------------------\n\n/** A surface that groups one coherent unit of content. */\nexport interface CardProps extends BaseProps {\n  readonly children?: MindeesNode\n  /** Visual emphasis. `elevated` (default) lifts off the bg; `filled` is a soft tint; `outlined` is a hairline. */\n  readonly variant?: 'elevated' | 'filled' | 'outlined'\n  /** Internal padding (handbook default 16). */\n  readonly padding?: number | string\n  /** Corner radius (handbook 12–16 for app cards). */\n  readonly radius?: number\n}\nexport const Card: Component<CardProps> = (props) => {\n  const theme = useTheme()\n  const {\n    variant = 'elevated',\n    padding = space.md,\n    radius = radiusScale.lg,\n    style,\n    children,\n    ...rest\n  } = props\n  const base: Accessor<StyleInput> = () => {\n    const c = theme().color\n    const surface: StyleInput =\n      variant === 'outlined'\n        ? { borderWidth: 1, borderColor: c.border }\n        : variant === 'filled'\n          ? { backgroundColor: c.surfaceVariant }\n          : { backgroundColor: c.surface, borderWidth: 1, borderColor: c.border }\n    return { padding, borderRadius: radius, ...surface }\n  }\n  return createElement(View, { ...rest, style: mergeStyle(base, style) }, children)\n}\n\n// ---------------------------------------------------------------------------\n// Divider\n// ---------------------------------------------------------------------------\n\n/** A thin rule separating content. */\nexport interface DividerProps extends BaseProps {\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly thickness?: number\n  /** Override color (defaults to the theme border). */\n  readonly color?: string\n}\nexport const Divider: Component<DividerProps> = (props) => {\n  const theme = useTheme()\n  const { orientation = 'horizontal', thickness = 1, color, style, ...rest } = props\n  const base: Accessor<StyleInput> = () => {\n    const bg = color ?? theme().color.border\n    return orientation === 'horizontal'\n      ? { height: thickness, alignSelf: 'stretch', backgroundColor: bg }\n      : { width: thickness, alignSelf: 'stretch', backgroundColor: bg }\n  }\n  return createElement(View, {\n    ...rest,\n    role: rest.role ?? 'separator',\n    style: mergeStyle(base, style),\n  })\n}\n\n// ---------------------------------------------------------------------------\n// Badge\n// ---------------------------------------------------------------------------\n\nexport type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'\n\n/** Resolve a tone to its {bg, fg} in the active theme. */\nfunction toneColors(tone: BadgeTone, theme: Theme): { bg: string; fg: string } {\n  const c = theme.color\n  if (tone === 'neutral') return { bg: c.surfaceVariant, fg: c.text }\n  return { bg: c[tone], fg: c.onTone }\n}\n\n/** A compact status/count pill. */\nexport interface BadgeProps extends BaseProps {\n  readonly children?: MindeesNode\n  readonly tone?: BadgeTone\n}\nexport const Badge: Component<BadgeProps> = (props) => {\n  const theme = useTheme()\n  const { tone = 'neutral', style, children, ...rest } = props\n  const base: Accessor<StyleInput> = () => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingTop: space['3xs'],\n    paddingBottom: space['3xs'],\n    paddingLeft: space.xs,\n    paddingRight: space.xs,\n    borderRadius: radiusScale.full,\n    backgroundColor: toneColors(tone, theme()).bg,\n  })\n  const textStyle: Accessor<StyleInput> = () => ({\n    fontSize: 12,\n    fontWeight: fontWeight.semibold,\n    color: toneColors(tone, theme()).fg,\n  })\n  return createElement(\n    View,\n    { ...rest, role: rest.role ?? 'status', style: mergeStyle(base, style) },\n    createElement(Text, { style: textStyle }, children),\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Avatar\n// ---------------------------------------------------------------------------\n\n/** Up-to-two-letter initials from a name. */\nfunction initialsOf(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return '?'\n  const first = parts[0]?.[0] ?? ''\n  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''\n  return (first + last).toUpperCase()\n}\n\n/** A circular user image, falling back to initials. */\nexport interface AvatarProps extends BaseProps {\n  readonly src?: string\n  readonly name?: string\n  /** Diameter in px (default 40). */\n  readonly size?: number\n}\nexport const Avatar: Component<AvatarProps> = (props) => {\n  const theme = useTheme()\n  const { src, name, size = 40, style, ...rest } = props\n  const base: Accessor<StyleInput> = () => ({\n    width: size,\n    height: size,\n    borderRadius: size / 2,\n    overflow: 'hidden',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: theme().color.surfaceVariant,\n  })\n  const content = src\n    ? createElement(Image, {\n        src,\n        label: name ?? '',\n        ...(name ? {} : { decorative: true }),\n        style: { width: size, height: size },\n      })\n    : createElement(\n        Text,\n        {\n          style: () => ({\n            fontSize: Math.round(size * 0.4),\n            fontWeight: fontWeight.semibold,\n            color: theme().color.text,\n          }),\n        },\n        name ? initialsOf(name) : '?',\n      )\n  return createElement(\n    View,\n    { ...rest, label: rest.label ?? name, style: mergeStyle(base, style) },\n    content,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Chip\n// ---------------------------------------------------------------------------\n\n/** A compact, optionally-selectable token (filter/choice/input). */\nexport interface ChipProps extends Omit<BaseProps, 'style'> {\n  readonly label: string\n  readonly selected?: Reactive<boolean>\n  readonly disabled?: boolean\n  readonly onPress?: () => void\n  readonly leading?: MindeesNode\n  readonly trailing?: MindeesNode\n  readonly style?: Reactive<StyleInput>\n}\nexport const Chip: Component<ChipProps> = (props) => {\n  const theme = useTheme()\n  const { label, selected = false, disabled, onPress, leading, trailing, style, ...rest } = props\n  const isSelected = toAccessor(selected, false)\n  const base: Accessor<StyleInput> = () => {\n    const c = theme().color\n    const on = isSelected()\n    return {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: space['2xs'],\n      minHeight: 32,\n      paddingTop: space['2xs'],\n      paddingBottom: space['2xs'],\n      paddingLeft: space.sm,\n      paddingRight: space.sm,\n      borderRadius: radiusScale.full,\n      borderWidth: 1,\n      borderColor: on ? c.primary : c.border,\n      backgroundColor: on ? c.primary : 'transparent',\n      opacity: disabled ? 0.5 : 1,\n    }\n  }\n  const text = createElement(\n    Text,\n    {\n      style: () => ({\n        fontSize: 14,\n        fontWeight: fontWeight.medium,\n        color: isSelected() ? theme().color.onPrimary : theme().color.text,\n      }),\n    },\n    label,\n  )\n  const inner: MindeesNode = [leading, text, trailing].filter((n) => n != null) as MindeesNode\n  return createElement(\n    Pressable,\n    {\n      ...rest,\n      role: rest.role ?? 'button',\n      ...(onPress ? { onPress } : {}),\n      ...(disabled ? { disabled: true } : {}),\n      style: mergeStyle(base, style),\n    },\n    inner,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Switch\n// ---------------------------------------------------------------------------\n\n/** A binary on/off toggle (composed track + knob; flips instantly on press). */\nexport interface SwitchProps extends Omit<BaseProps, 'style'> {\n  /** Controlled state (static or reactive). */\n  readonly value: Reactive<boolean>\n  readonly onValueChange?: (value: boolean) => void\n  readonly disabled?: boolean\n  readonly style?: Reactive<StyleInput>\n}\nexport const Switch: Component<SwitchProps> = (props) => {\n  const theme = useTheme()\n  const { value, onValueChange, disabled, style, ...rest } = props\n  const isOn = toAccessor(value, false)\n  const track: Accessor<StyleInput> = () => ({\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: isOn() ? 'flex-end' : 'flex-start',\n    width: 52,\n    height: 32,\n    borderRadius: radiusScale.full,\n    padding: 3,\n    backgroundColor: isOn() ? theme().color.primary : theme().color.textMuted,\n    opacity: disabled ? 0.5 : 1,\n  })\n  const knob = createElement(View, {\n    style: () => ({\n      width: 26,\n      height: 26,\n      borderRadius: 13,\n      backgroundColor: theme().color.onPrimary,\n    }),\n  })\n  const handlePress = onValueChange && !disabled ? () => onValueChange(!isOn()) : undefined\n  return createElement(\n    Pressable,\n    {\n      ...rest,\n      role: rest.role ?? 'switch',\n      state: { ...(rest.state ?? {}), checked: isOn() },\n      ...(disabled ? { disabled: true } : {}),\n      ...(handlePress ? { onPress: handlePress } : {}),\n      style: mergeStyle(track, style),\n    },\n    knob,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SafeAreaView\n// ---------------------------------------------------------------------------\n\n/** A container that pads itself by the live safe-area insets (notch, home indicator, …). */\nexport interface SafeAreaViewProps extends BaseProps {\n  readonly children?: MindeesNode\n  /** Which edges to inset (default: all four). */\n  readonly edges?: ReadonlyArray<'top' | 'right' | 'bottom' | 'left'>\n}\nexport const SafeAreaView: Component<SafeAreaViewProps> = (props) => {\n  const insets = useSafeAreaInsets()\n  const { edges, style, children, ...rest } = props\n  const wants = (edge: 'top' | 'right' | 'bottom' | 'left'): boolean =>\n    !edges || edges.includes(edge)\n  const base: Accessor<StyleInput> = () => {\n    const i = insets()\n    return {\n      paddingTop: wants('top') ? i.top : 0,\n      paddingRight: wants('right') ? i.right : 0,\n      paddingBottom: wants('bottom') ? i.bottom : 0,\n      paddingLeft: wants('left') ? i.left : 0,\n    }\n  }\n  return createElement(View, { ...rest, style: mergeStyle(base, style) }, children)\n}\n\n// ---------------------------------------------------------------------------\n// KeyboardAvoidingView\n// ---------------------------------------------------------------------------\n\n/** A container that pads its bottom by the live keyboard height so content stays visible. */\nexport interface KeyboardAvoidingViewProps extends BaseProps {\n  readonly children?: MindeesNode\n}\nexport const KeyboardAvoidingView: Component<KeyboardAvoidingViewProps> = (props) => {\n  const keyboard = useKeyboard()\n  const { style, children, ...rest } = props\n  const base: Accessor<StyleInput> = () => ({ paddingBottom: keyboard().height })\n  return createElement(View, { ...rest, style: mergeStyle(base, style) }, children)\n}\n\n// ---------------------------------------------------------------------------\n// ProgressBar (determinate)\n// ---------------------------------------------------------------------------\n\n/** A determinate progress bar (track + reactive fill). */\nexport interface ProgressBarProps extends BaseProps {\n  /** Progress 0..1 (static or reactive). Values outside the range are clamped. */\n  readonly value?: Reactive<number>\n  readonly trackColor?: string\n  readonly color?: string\n  readonly height?: number\n}\nexport const ProgressBar: Component<ProgressBarProps> = (props) => {\n  const theme = useTheme()\n  const { value = 0, trackColor, color, height = 6, style, ...rest } = props\n  const progress = toAccessor(value, 0)\n  const track: Accessor<StyleInput> = () => ({\n    width: '100%',\n    height,\n    borderRadius: height / 2,\n    overflow: 'hidden',\n    backgroundColor: trackColor ?? theme().color.surfaceVariant,\n  })\n  const fill: Accessor<StyleInput> = () => ({\n    height,\n    borderRadius: height / 2,\n    backgroundColor: color ?? theme().color.primary,\n    width: `${Math.max(0, Math.min(1, progress())) * 100}%`,\n  })\n  return createElement(\n    View,\n    { ...rest, role: rest.role ?? 'progressbar', style: mergeStyle(track, style) },\n    createElement(View, { style: fill }),\n  )\n}\n"],"mappings":"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"}

package/dist/environment.d.ts

@@ -0,0 +1,66 @@
+//#region src/environment.d.ts
+/**
+ * Platform environment + device hooks — the signal-backed equivalents of React
+ * Native's `useWindowDimensions`, `useColorScheme`, `useSafeAreaInsets`, `Keyboard`.
+ *
+ * The environment is a small set of signals the host/runtime feeds via
+ * {@link setEnvironment} (e.g. the native host on launch/rotation/theme change, or a
+ * web adapter wired to `window`/`matchMedia`). The hooks return Quantum-style reactive
+ * **accessors**, so reads are fine-grained — only the nodes that use a value re-run
+ * when it changes (e.g. rotating the device updates exactly the layout that reads
+ * window size), with no whole-tree re-render.
+ *
+ * @module
+ */
+/** Logical window size + density (RN's `useWindowDimensions`). */
+interface WindowDimensions {
+  /** Logical width (dp/pt). */
+  readonly width: number;
+  /** Logical height (dp/pt). */
+  readonly height: number;
+  /** Device pixel ratio. */
+  readonly scale: number;
+  /** User font-scaling factor (Dynamic Type / font size setting). */
+  readonly fontScale: number;
+}
+/** Safe-area insets in dp/pt (notch, status bar, home indicator, gesture areas). */
+interface SafeAreaInsets {
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly left: number;
+}
+/** Soft-keyboard state. */
+interface KeyboardState {
+  readonly visible: boolean;
+  /** Keyboard height in dp/pt when visible, else 0. */
+  readonly height: number;
+}
+/** The active color scheme (RN's `useColorScheme`). */
+type ColorScheme = 'light' | 'dark';
+/** The full platform environment. */
+interface PlatformEnvironment {
+  readonly window: WindowDimensions;
+  readonly colorScheme: ColorScheme;
+  readonly safeAreaInsets: SafeAreaInsets;
+  readonly keyboard: KeyboardState;
+}
+/**
+ * Update the platform environment. The host/runtime calls this — once on launch and
+ * again on changes (rotation, theme switch, keyboard show/hide). Only provided fields
+ * change; each is a fine-grained signal write, so only the readers of that field re-run.
+ */
+declare function setEnvironment(env: Partial<PlatformEnvironment>): void;
+/** A snapshot of the current environment (non-reactive; for one-off reads). */
+declare function getEnvironment(): PlatformEnvironment;
+/** Reactive accessor for the window dimensions (updates on resize/rotation). */
+declare function useWindowDimensions(): () => WindowDimensions;
+/** Reactive accessor for the active color scheme (updates on theme change). */
+declare function useColorScheme(): () => ColorScheme;
+/** Reactive accessor for the safe-area insets. */
+declare function useSafeAreaInsets(): () => SafeAreaInsets;
+/** Reactive accessor for the soft-keyboard state. */
+declare function useKeyboard(): () => KeyboardState;
+//#endregion
+export { ColorScheme, KeyboardState, PlatformEnvironment, SafeAreaInsets, WindowDimensions, getEnvironment, setEnvironment, useColorScheme, useKeyboard, useSafeAreaInsets, useWindowDimensions };
+//# sourceMappingURL=environment.d.ts.map

package/dist/environment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment.d.ts","names":[],"sources":["../src/environment.ts"],"mappings":";;AAiBA;;;;;;;;;AAQoB;AAIpB;;;UAZiB,gBAAA;EAaN;EAAA,SAXA,KAAA;EAaA;EAAA,SAXA,MAAA;EAYI;EAAA,SAVJ,KAAA;EAcM;EAAA,SAZN,SAAA;AAAA;;UAIM,cAAA;EAAA,SACN,GAAA;EAAA,SACA,KAAA;EAAA,SACA,MAAA;EAAA,SACA,IAAA;AAAA;AAcX;AAAA,UAViB,aAAA;EAAA,SACN,OAAA;EAUQ;EAAA,SARR,MAAM;AAAA;;KAIL,WAAA;;UAGK,mBAAA;EAAA,SACN,MAAA,EAAQ,gBAAA;EAAA,SACR,WAAA,EAAa,WAAA;EAAA,SACb,cAAA,EAAgB,cAAA;EAAA,SAChB,QAAA,EAAU,aAAA;AAAA;;;;AAAa;AAalC;iBAAgB,cAAA,CAAe,GAAA,EAAK,OAAO,CAAC,mBAAA;;iBAQ5B,cAAA,IAAkB,mBAAmB;;iBAUrC,mBAAA,UAA6B,gBAAgB;;iBAK7C,cAAA,UAAwB,WAAW;AAvBa;AAAA,iBA4BhD,iBAAA,UAA2B,cAAc;;iBAKzC,WAAA,UAAqB,aAAa"}

package/dist/environment.js

@@ -0,0 +1,72 @@
+import { signal } from "@mindees/core";
+//#region src/environment.ts
+/**
+* Platform environment + device hooks — the signal-backed equivalents of React
+* Native's `useWindowDimensions`, `useColorScheme`, `useSafeAreaInsets`, `Keyboard`.
+*
+* The environment is a small set of signals the host/runtime feeds via
+* {@link setEnvironment} (e.g. the native host on launch/rotation/theme change, or a
+* web adapter wired to `window`/`matchMedia`). The hooks return Quantum-style reactive
+* **accessors**, so reads are fine-grained — only the nodes that use a value re-run
+* when it changes (e.g. rotating the device updates exactly the layout that reads
+* window size), with no whole-tree re-render.
+*
+* @module
+*/
+const windowSignal = signal({
+	width: 0,
+	height: 0,
+	scale: 1,
+	fontScale: 1
+});
+const colorSchemeSignal = signal("light");
+const safeAreaSignal = signal({
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+});
+const keyboardSignal = signal({
+	visible: false,
+	height: 0
+});
+/**
+* Update the platform environment. The host/runtime calls this — once on launch and
+* again on changes (rotation, theme switch, keyboard show/hide). Only provided fields
+* change; each is a fine-grained signal write, so only the readers of that field re-run.
+*/
+function setEnvironment(env) {
+	if (env.window) windowSignal.set(env.window);
+	if (env.colorScheme) colorSchemeSignal.set(env.colorScheme);
+	if (env.safeAreaInsets) safeAreaSignal.set(env.safeAreaInsets);
+	if (env.keyboard) keyboardSignal.set(env.keyboard);
+}
+/** A snapshot of the current environment (non-reactive; for one-off reads). */
+function getEnvironment() {
+	return {
+		window: windowSignal(),
+		colorScheme: colorSchemeSignal(),
+		safeAreaInsets: safeAreaSignal(),
+		keyboard: keyboardSignal()
+	};
+}
+/** Reactive accessor for the window dimensions (updates on resize/rotation). */
+function useWindowDimensions() {
+	return windowSignal;
+}
+/** Reactive accessor for the active color scheme (updates on theme change). */
+function useColorScheme() {
+	return colorSchemeSignal;
+}
+/** Reactive accessor for the safe-area insets. */
+function useSafeAreaInsets() {
+	return safeAreaSignal;
+}
+/** Reactive accessor for the soft-keyboard state. */
+function useKeyboard() {
+	return keyboardSignal;
+}
+//#endregion
+export { getEnvironment, setEnvironment, useColorScheme, useKeyboard, useSafeAreaInsets, useWindowDimensions };
+
+//# sourceMappingURL=environment.js.map

package/dist/environment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment.js","names":[],"sources":["../src/environment.ts"],"sourcesContent":["/**\n * Platform environment + device hooks — the signal-backed equivalents of React\n * Native's `useWindowDimensions`, `useColorScheme`, `useSafeAreaInsets`, `Keyboard`.\n *\n * The environment is a small set of signals the host/runtime feeds via\n * {@link setEnvironment} (e.g. the native host on launch/rotation/theme change, or a\n * web adapter wired to `window`/`matchMedia`). The hooks return Quantum-style reactive\n * **accessors**, so reads are fine-grained — only the nodes that use a value re-run\n * when it changes (e.g. rotating the device updates exactly the layout that reads\n * window size), with no whole-tree re-render.\n *\n * @module\n */\n\nimport { signal } from '@mindees/core'\n\n/** Logical window size + density (RN's `useWindowDimensions`). */\nexport interface WindowDimensions {\n  /** Logical width (dp/pt). */\n  readonly width: number\n  /** Logical height (dp/pt). */\n  readonly height: number\n  /** Device pixel ratio. */\n  readonly scale: number\n  /** User font-scaling factor (Dynamic Type / font size setting). */\n  readonly fontScale: number\n}\n\n/** Safe-area insets in dp/pt (notch, status bar, home indicator, gesture areas). */\nexport interface SafeAreaInsets {\n  readonly top: number\n  readonly right: number\n  readonly bottom: number\n  readonly left: number\n}\n\n/** Soft-keyboard state. */\nexport interface KeyboardState {\n  readonly visible: boolean\n  /** Keyboard height in dp/pt when visible, else 0. */\n  readonly height: number\n}\n\n/** The active color scheme (RN's `useColorScheme`). */\nexport type ColorScheme = 'light' | 'dark'\n\n/** The full platform environment. */\nexport interface PlatformEnvironment {\n  readonly window: WindowDimensions\n  readonly colorScheme: ColorScheme\n  readonly safeAreaInsets: SafeAreaInsets\n  readonly keyboard: KeyboardState\n}\n\nconst windowSignal = signal<WindowDimensions>({ width: 0, height: 0, scale: 1, fontScale: 1 })\nconst colorSchemeSignal = signal<ColorScheme>('light')\nconst safeAreaSignal = signal<SafeAreaInsets>({ top: 0, right: 0, bottom: 0, left: 0 })\nconst keyboardSignal = signal<KeyboardState>({ visible: false, height: 0 })\n\n/**\n * Update the platform environment. The host/runtime calls this — once on launch and\n * again on changes (rotation, theme switch, keyboard show/hide). Only provided fields\n * change; each is a fine-grained signal write, so only the readers of that field re-run.\n */\nexport function setEnvironment(env: Partial<PlatformEnvironment>): void {\n  if (env.window) windowSignal.set(env.window)\n  if (env.colorScheme) colorSchemeSignal.set(env.colorScheme)\n  if (env.safeAreaInsets) safeAreaSignal.set(env.safeAreaInsets)\n  if (env.keyboard) keyboardSignal.set(env.keyboard)\n}\n\n/** A snapshot of the current environment (non-reactive; for one-off reads). */\nexport function getEnvironment(): PlatformEnvironment {\n  return {\n    window: windowSignal(),\n    colorScheme: colorSchemeSignal(),\n    safeAreaInsets: safeAreaSignal(),\n    keyboard: keyboardSignal(),\n  }\n}\n\n/** Reactive accessor for the window dimensions (updates on resize/rotation). */\nexport function useWindowDimensions(): () => WindowDimensions {\n  return windowSignal\n}\n\n/** Reactive accessor for the active color scheme (updates on theme change). */\nexport function useColorScheme(): () => ColorScheme {\n  return colorSchemeSignal\n}\n\n/** Reactive accessor for the safe-area insets. */\nexport function useSafeAreaInsets(): () => SafeAreaInsets {\n  return safeAreaSignal\n}\n\n/** Reactive accessor for the soft-keyboard state. */\nexport function useKeyboard(): () => KeyboardState {\n  return keyboardSignal\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsDA,MAAM,eAAe,OAAyB;CAAE,OAAO;CAAG,QAAQ;CAAG,OAAO;CAAG,WAAW;AAAE,CAAC;AAC7F,MAAM,oBAAoB,OAAoB,OAAO;AACrD,MAAM,iBAAiB,OAAuB;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAG,MAAM;AAAE,CAAC;AACtF,MAAM,iBAAiB,OAAsB;CAAE,SAAS;CAAO,QAAQ;AAAE,CAAC;;;;;;AAO1E,SAAgB,eAAe,KAAyC;CACtE,IAAI,IAAI,QAAQ,aAAa,IAAI,IAAI,MAAM;CAC3C,IAAI,IAAI,aAAa,kBAAkB,IAAI,IAAI,WAAW;CAC1D,IAAI,IAAI,gBAAgB,eAAe,IAAI,IAAI,cAAc;CAC7D,IAAI,IAAI,UAAU,eAAe,IAAI,IAAI,QAAQ;AACnD;;AAGA,SAAgB,iBAAsC;CACpD,OAAO;EACL,QAAQ,aAAa;EACrB,aAAa,kBAAkB;EAC/B,gBAAgB,eAAe;EAC/B,UAAU,eAAe;CAC3B;AACF;;AAGA,SAAgB,sBAA8C;CAC5D,OAAO;AACT;;AAGA,SAAgB,iBAAoC;CAClD,OAAO;AACT;;AAGA,SAAgB,oBAA0C;CACxD,OAAO;AACT;;AAGA,SAAgB,cAAmC;CACjD,OAAO;AACT"}

package/dist/index.d.ts

@@ -1,14 +1,17 @@
 import { A11yProps, A11yState, Role, toA11yProps } from "./a11y.js";
 import { StyleInput, StyleObject, StyleValue, flattenStyle } from "./style.js";
 import { BaseProps, Reactive, resolveStyle, toHostProps } from "./host.js";
+import { Avatar, AvatarProps, Badge, BadgeProps, Card, CardProps, Chip, ChipProps, Divider, DividerProps, KeyboardAvoidingView, KeyboardAvoidingViewProps, ProgressBar, ProgressBarProps, SafeAreaView, SafeAreaViewProps, Switch, SwitchProps } from "./components.js";
+import { ColorScheme, KeyboardState, PlatformEnvironment, SafeAreaInsets, WindowDimensions, getEnvironment, setEnvironment, useColorScheme, useKeyboard, useSafeAreaInsets, useWindowDimensions } from "./environment.js";
 import { Button, ButtonProps, Column, Image, ImageProps, InteractionState, Pressable, PressableProps, Row, ScrollView, ScrollViewProps, Spacer, SpacerProps, Stack, StackProps, Text, TextInput, TextInputProps, TextProps, View, ViewProps, usePressable } from "./primitives.js";
+import { Theme, ThemeColors, duration, easing, fontSize, fontWeight, getTheme, lineHeight, palette, radius, space, tokens, useTheme } from "./tokens.js";
 import { Maturity, NotImplementedError, PackageInfo, notImplemented } from "@mindees/core";
 
 //#region src/index.d.ts
 /** The npm package name. */
 declare const name = "@mindees/atlas";
 /** The package version. All `@mindees/*` packages share one locked version line. */
-declare const VERSION = "0.1.0";
+declare const VERSION = "0.2.0";
 /** Current maturity of this package. See the repository `STATUS.md`. */
 declare const maturity: Maturity;
 /**
@@ -18,5 +21,5 @@ declare const maturity: Maturity;
  */
 declare const info: PackageInfo;
 //#endregion
-export { type A11yProps, type A11yState, type BaseProps, Button, type ButtonProps, Column, Image, type ImageProps, type InteractionState, type Maturity, NotImplementedError, type PackageInfo, Pressable, type PressableProps, type Reactive, type Role, Row, ScrollView, type ScrollViewProps, Spacer, type SpacerProps, Stack, type StackProps, type StyleInput, type StyleObject, type StyleValue, Text, TextInput, type TextInputProps, type TextProps, VERSION, View, type ViewProps, flattenStyle, info, maturity, name, notImplemented, resolveStyle, toA11yProps, toHostProps, usePressable };
+export { type A11yProps, type A11yState, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, type ColorScheme, Column, Divider, type DividerProps, Image, type ImageProps, type InteractionState, KeyboardAvoidingView, type KeyboardAvoidingViewProps, type KeyboardState, type Maturity, NotImplementedError, type PackageInfo, type PlatformEnvironment, Pressable, type PressableProps, ProgressBar, type ProgressBarProps, type Reactive, type Role, Row, type SafeAreaInsets, SafeAreaView, type SafeAreaViewProps, ScrollView, type ScrollViewProps, Spacer, type SpacerProps, Stack, type StackProps, type StyleInput, type StyleObject, type StyleValue, Switch, type SwitchProps, Text, TextInput, type TextInputProps, type TextProps, type Theme, type ThemeColors, VERSION, View, type ViewProps, type WindowDimensions, duration, easing, flattenStyle, fontSize, fontWeight, getEnvironment, getTheme, info, lineHeight, maturity, name, notImplemented, palette, radius, resolveStyle, setEnvironment, space, toA11yProps, toHostProps, tokens, useColorScheme, useKeyboard, usePressable, useSafeAreaInsets, useTheme, useWindowDimensions };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;AAkBA;AAAA,cAHa,IAAA;;cAGA,OAAA;AAAO;AAAA,cAGP,QAAA,EAAU,QAAyB;;;;AAAA;AAOhD;cAAa,IAAA,EAAM,WAAiE"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;;;;;cAea,IAAA;AAAI;AAAA,cAGJ,OAAA;;cAGA,QAAA,EAAU,QAAyB;;AAH5B;AAGpB;;;cAOa,IAAA,EAAM,WAAiE"}