@lattice-ui/system 0.1.1

package/out/density/DensityProvider.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { DensityContextValue, DensityProviderProps } from "./types";
+export declare function DensityProvider(props: DensityProviderProps): React.JSX.Element;
+export declare function useDensity(): DensityContextValue;

package/out/density/DensityProvider.luau

@@ -0,0 +1,62 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local createStrictContext = _core.createStrictContext
+local React = _core.React
+local useControllableState = _core.useControllableState
+local ThemeProvider = TS.import(script, TS.getModule(script, "@lattice-ui", "style").out).ThemeProvider
+local useSystemBaseThemeContext = TS.import(script, script.Parent.Parent, "system", "baseThemeContext").useSystemBaseThemeContext
+local SystemThemeContextProvider = TS.import(script, script.Parent.Parent, "system", "systemThemeContext").SystemThemeContextProvider
+local applyDensity = TS.import(script, script.Parent, "density").applyDensity
+local _binding = createStrictContext("DensityProvider")
+local DensityContextProvider = _binding[1]
+local useDensityContext = _binding[2]
+local DEFAULT_DENSITY = "comfortable"
+local function DensityProvider(props)
+	local _binding_1 = useSystemBaseThemeContext()
+	local baseTheme = _binding_1.baseTheme
+	local setBaseTheme = _binding_1.setBaseTheme
+	local _binding_2 = useControllableState({
+		value = props.density,
+		defaultValue = props.defaultDensity or DEFAULT_DENSITY,
+		onChange = props.onDensityChange,
+	})
+	local densityValue = _binding_2[1]
+	local setDensityValue = _binding_2[2]
+	-- Read-path contract: resolvedTheme is derived from baseTheme + current density.
+	local resolvedTheme = React.useMemo(function()
+		return applyDensity(baseTheme, densityValue)
+	end, { baseTheme, densityValue })
+	local setDensity = React.useCallback(function(nextDensity)
+		setDensityValue(nextDensity)
+	end, { setDensityValue })
+	local densityContextValue = React.useMemo(function()
+		return {
+			density = densityValue,
+			setDensity = setDensity,
+		}
+	end, { densityValue, setDensity })
+	local systemThemeContextValue = React.useMemo(function()
+		return {
+			theme = resolvedTheme,
+			baseTheme = baseTheme,
+			density = densityValue,
+			setBaseTheme = setBaseTheme,
+			setDensity = setDensity,
+		}
+	end, { baseTheme, densityValue, resolvedTheme, setBaseTheme, setDensity })
+	return React.createElement(DensityContextProvider, {
+		value = densityContextValue,
+	}, React.createElement(SystemThemeContextProvider, {
+		value = systemThemeContextValue,
+	}, React.createElement(ThemeProvider, {
+		theme = resolvedTheme,
+	}, props.children)))
+end
+local function useDensity()
+	return useDensityContext()
+end
+return {
+	DensityProvider = DensityProvider,
+	useDensity = useDensity,
+}

package/out/density/density.d.ts

@@ -0,0 +1,12 @@
+import type { Theme } from "@lattice-ui/style";
+import type { DensityToken } from "./types";
+/**
+ * M1 limitation: density is a pure theme transformer.
+ * It does not create layout or child instances.
+ */
+export declare function applyDensity(theme: Theme, token: DensityToken): Theme;
+/**
+ * M1 limitation: this helper only returns a theme transformer.
+ * It does not modify instance graphs or perform runtime layout composition.
+ */
+export declare function density(token: DensityToken): (theme: Theme) => Theme;

package/out/density/density.luau

@@ -0,0 +1,99 @@
+-- Compiled with roblox-ts v3.0.0
+local DENSITY_SCALES = {
+	compact = {
+		space = 0.85,
+		radius = 0.9,
+		typography = 0.92,
+	},
+	comfortable = {
+		space = 1,
+		radius = 1,
+		typography = 1,
+	},
+	spacious = {
+		space = 1.15,
+		radius = 1.1,
+		typography = 1.08,
+	},
+}
+local function scaleNonNegative(value, factor)
+	return math.max(0, math.round(value * factor))
+end
+local function scaleTextSize(value, factor)
+	return math.max(10, math.round(value * factor))
+end
+local function scaleSpace(theme, factor)
+	return {
+		[0] = scaleNonNegative(theme.space[0], factor),
+		[2] = scaleNonNegative(theme.space[2], factor),
+		[4] = scaleNonNegative(theme.space[4], factor),
+		[6] = scaleNonNegative(theme.space[6], factor),
+		[8] = scaleNonNegative(theme.space[8], factor),
+		[10] = scaleNonNegative(theme.space[10], factor),
+		[12] = scaleNonNegative(theme.space[12], factor),
+		[14] = scaleNonNegative(theme.space[14], factor),
+		[16] = scaleNonNegative(theme.space[16], factor),
+		[20] = scaleNonNegative(theme.space[20], factor),
+		[24] = scaleNonNegative(theme.space[24], factor),
+		[32] = scaleNonNegative(theme.space[32], factor),
+	}
+end
+local function scaleRadius(theme, factor)
+	return {
+		none = scaleNonNegative(theme.radius.none, factor),
+		sm = scaleNonNegative(theme.radius.sm, factor),
+		md = scaleNonNegative(theme.radius.md, factor),
+		lg = scaleNonNegative(theme.radius.lg, factor),
+		xl = scaleNonNegative(theme.radius.xl, factor),
+		full = scaleNonNegative(theme.radius.full, factor),
+	}
+end
+local function scaleTypography(theme, factor)
+	return {
+		labelSm = {
+			font = theme.typography.labelSm.font,
+			textSize = scaleTextSize(theme.typography.labelSm.textSize, factor),
+		},
+		bodyMd = {
+			font = theme.typography.bodyMd.font,
+			textSize = scaleTextSize(theme.typography.bodyMd.textSize, factor),
+		},
+		titleMd = {
+			font = theme.typography.titleMd.font,
+			textSize = scaleTextSize(theme.typography.titleMd.textSize, factor),
+		},
+	}
+end
+--[[
+	*
+	 * M1 limitation: density is a pure theme transformer.
+	 * It does not create layout or child instances.
+	 
+]]
+local function applyDensity(theme, token)
+	local scale = DENSITY_SCALES[token]
+	local _object = {}
+	local _left = "colors"
+	local _object_1 = table.clone(theme.colors)
+	setmetatable(_object_1, nil)
+	_object[_left] = _object_1
+	_object.space = scaleSpace(theme, scale.space)
+	_object.radius = scaleRadius(theme, scale.radius)
+	_object.typography = scaleTypography(theme, scale.typography)
+	return _object
+end
+--[[
+	*
+	 * M1 limitation: this helper only returns a theme transformer.
+	 * It does not modify instance graphs or perform runtime layout composition.
+	 
+]]
+local function density(token)
+	return function(theme)
+		return applyDensity(theme, token)
+	end
+end
+return {
+	applyDensity = applyDensity,
+	density = density,
+}

package/out/density/types.d.ts

@@ -0,0 +1,12 @@
+import type React from "@rbxts/react";
+export type DensityToken = "compact" | "comfortable" | "spacious";
+export type DensityProviderProps = {
+    density?: DensityToken;
+    defaultDensity?: DensityToken;
+    onDensityChange?: (next: DensityToken) => void;
+    children?: React.ReactNode;
+};
+export type DensityContextValue = {
+    density: DensityToken;
+    setDensity: (next: DensityToken) => void;
+};

package/out/density/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,12 @@
+export { DensityProvider, useDensity } from "./density/DensityProvider";
+export { applyDensity, density } from "./density/density";
+export type { DensityContextValue, DensityProviderProps, DensityToken } from "./density/types";
+export { Row } from "./layout/Row";
+export { Stack } from "./layout/Stack";
+export type { LayoutDirection, RowProps, SpaceToken, SpaceValue, StackAlign, StackAutoSize, StackJustify, StackPadding, StackProps, } from "./layout/types";
+export type { SurfaceToken } from "./surface/surface";
+export { surface } from "./surface/surface";
+export type { SurfaceProps } from "./surface/surfacePrimitive";
+export { Surface } from "./surface/surfacePrimitive";
+export { SystemProvider, useSystemTheme } from "./system/SystemProvider";
+export type { SystemProviderProps, SystemThemeContextValue } from "./system/types";

package/out/init.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _DensityProvider = TS.import(script, script, "density", "DensityProvider")
+exports.DensityProvider = _DensityProvider.DensityProvider
+exports.useDensity = _DensityProvider.useDensity
+local _density = TS.import(script, script, "density", "density")
+exports.applyDensity = _density.applyDensity
+exports.density = _density.density
+exports.Row = TS.import(script, script, "layout", "Row").Row
+exports.Stack = TS.import(script, script, "layout", "Stack").Stack
+exports.surface = TS.import(script, script, "surface", "surface").surface
+exports.Surface = TS.import(script, script, "surface", "surfacePrimitive").Surface
+local _SystemProvider = TS.import(script, script, "system", "SystemProvider")
+exports.SystemProvider = _SystemProvider.SystemProvider
+exports.useSystemTheme = _SystemProvider.useSystemTheme
+return exports

package/out/layout/Row.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { RowProps } from "./types";
+export declare function Row(props: RowProps): React.JSX.Element;

package/out/layout/Row.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local Stack = TS.import(script, script.Parent, "Stack").Stack
+local function Row(props)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.direction = "horizontal"
+	return React.createElement(Stack, _attributes)
+end
+return {
+	Row = Row,
+}

package/out/layout/Stack.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { StackProps } from "./types";
+export declare function Stack(props: StackProps): React.JSX.Element;

package/out/layout/Stack.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _style = TS.import(script, TS.getModule(script, "@lattice-ui", "style").out)
+local mergeGuiProps = _style.mergeGuiProps
+local resolveSx = _style.resolveSx
+local useTheme = _style.useTheme
+local _space = TS.import(script, script.Parent, "space")
+local resolvePadding = _space.resolvePadding
+local resolveSpace = _space.resolveSpace
+local function toHorizontalAlignment(value)
+	repeat
+		local _fallthrough = false
+		if value == "center" then
+			return Enum.HorizontalAlignment.Center
+		end
+		if value == "end" then
+			return Enum.HorizontalAlignment.Right
+		end
+		if value == "start" then
+		end
+		return Enum.HorizontalAlignment.Left
+	until true
+end
+local function toVerticalAlignment(value)
+	repeat
+		local _fallthrough = false
+		if value == "center" then
+			return Enum.VerticalAlignment.Center
+		end
+		if value == "end" then
+			return Enum.VerticalAlignment.Bottom
+		end
+		if value == "start" then
+		end
+		return Enum.VerticalAlignment.Top
+	until true
+end
+local function toAutomaticSize(autoSize, direction)
+	if autoSize == nil or autoSize == false then
+		return Enum.AutomaticSize.None
+	end
+	if autoSize == true then
+		return if direction == "vertical" then Enum.AutomaticSize.Y else Enum.AutomaticSize.X
+	end
+	repeat
+		if autoSize == "x" then
+			return Enum.AutomaticSize.X
+		end
+		if autoSize == "y" then
+			return Enum.AutomaticSize.Y
+		end
+		if autoSize == "xy" then
+			return Enum.AutomaticSize.XY
+		end
+		return Enum.AutomaticSize.None
+	until true
+end
+local function Stack(props)
+	local direction = props.direction or "vertical"
+	local _condition = props.gap
+	if _condition == nil then
+		_condition = 0
+	end
+	local gap = _condition
+	local align = props.align or "start"
+	local justify = props.justify or "start"
+	local autoSize = props.autoSize
+	local sx = props.sx
+	local children = props.children
+	local asChild = props.asChild
+	if asChild ~= nil then
+		error("[Stack] `asChild` is not supported in M3.")
+	end
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "direction" or rawKey == "gap" or rawKey == "align" or rawKey == "justify" or rawKey == "autoSize" or rawKey == "sx" or rawKey == "asChild" or rawKey == "padding" or rawKey == "paddingX" or rawKey == "paddingY" or rawKey == "paddingTop" or rawKey == "paddingRight" or rawKey == "paddingBottom" or rawKey == "paddingLeft" or rawKey == "children" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local sxProps = resolveSx(sx, theme)
+	local baseProps = {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutomaticSize = toAutomaticSize(autoSize, direction),
+	}
+	local mergedProps = mergeGuiProps(baseProps, sxProps, restProps)
+	local resolvedGap = resolveSpace(theme, gap)
+	local padding = resolvePadding(theme, props)
+	local hasPadding = padding.top > 0 or padding.right > 0 or padding.bottom > 0 or padding.left > 0
+	local vertical = direction == "vertical"
+	local horizontalAlignment = if vertical then toHorizontalAlignment(align) else toHorizontalAlignment(justify)
+	local verticalAlignment = if vertical then toVerticalAlignment(justify) else toVerticalAlignment(align)
+	local _attributes = table.clone(mergedProps)
+	setmetatable(_attributes, nil)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", {
+		FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+		HorizontalAlignment = horizontalAlignment,
+		Padding = UDim.new(0, resolvedGap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		VerticalAlignment = verticalAlignment,
+	}), if hasPadding then (React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, padding.bottom),
+		PaddingLeft = UDim.new(0, padding.left),
+		PaddingRight = UDim.new(0, padding.right),
+		PaddingTop = UDim.new(0, padding.top),
+	})) else nil, children)
+end
+return {
+	Stack = Stack,
+}

package/out/layout/space.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "@lattice-ui/style";
+import type { SpaceValue, StackPadding } from "./types";
+type ResolvedPadding = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare function resolveSpace(theme: Theme, value?: SpaceValue): number;
+export declare function resolvePadding(theme: Theme, value: StackPadding): ResolvedPadding;
+export {};

package/out/layout/space.luau

@@ -0,0 +1,94 @@
+-- Compiled with roblox-ts v3.0.0
+local function spaceTokenValue(theme, value)
+	repeat
+		if value == 0 then
+			return theme.space[0]
+		end
+		if value == 2 then
+			return theme.space[2]
+		end
+		if value == 4 then
+			return theme.space[4]
+		end
+		if value == 6 then
+			return theme.space[6]
+		end
+		if value == 8 then
+			return theme.space[8]
+		end
+		if value == 10 then
+			return theme.space[10]
+		end
+		if value == 12 then
+			return theme.space[12]
+		end
+		if value == 14 then
+			return theme.space[14]
+		end
+		if value == 16 then
+			return theme.space[16]
+		end
+		if value == 20 then
+			return theme.space[20]
+		end
+		if value == 24 then
+			return theme.space[24]
+		end
+		if value == 32 then
+			return theme.space[32]
+		end
+		return nil
+	until true
+end
+local function clampSpace(value)
+	return math.max(0, value)
+end
+local function resolveSpace(theme, value)
+	if value == nil then
+		return 0
+	end
+	local tokenValue = spaceTokenValue(theme, value)
+	if tokenValue ~= nil then
+		return clampSpace(tokenValue)
+	end
+	return clampSpace(value)
+end
+local function resolvePadding(theme, value)
+	local base = resolveSpace(theme, value.padding)
+	local top = base
+	local right = base
+	local bottom = base
+	local left = base
+	if value.paddingX ~= nil then
+		local axis = resolveSpace(theme, value.paddingX)
+		left = axis
+		right = axis
+	end
+	if value.paddingY ~= nil then
+		local axis = resolveSpace(theme, value.paddingY)
+		top = axis
+		bottom = axis
+	end
+	if value.paddingTop ~= nil then
+		top = resolveSpace(theme, value.paddingTop)
+	end
+	if value.paddingRight ~= nil then
+		right = resolveSpace(theme, value.paddingRight)
+	end
+	if value.paddingBottom ~= nil then
+		bottom = resolveSpace(theme, value.paddingBottom)
+	end
+	if value.paddingLeft ~= nil then
+		left = resolveSpace(theme, value.paddingLeft)
+	end
+	return {
+		top = top,
+		right = right,
+		bottom = bottom,
+		left = left,
+	}
+end
+return {
+	resolveSpace = resolveSpace,
+	resolvePadding = resolvePadding,
+}

package/out/layout/types.d.ts

@@ -0,0 +1,29 @@
+import type { Sx, Theme } from "@lattice-ui/style";
+import type React from "@rbxts/react";
+export type LayoutDirection = "vertical" | "horizontal";
+export type StackAlign = "start" | "center" | "end";
+export type StackJustify = "start" | "center" | "end";
+export type StackAutoSize = boolean | "x" | "y" | "xy";
+export type SpaceToken = keyof Theme["space"];
+export type SpaceValue = SpaceToken | number;
+export type StackPadding = {
+    padding?: SpaceValue;
+    paddingX?: SpaceValue;
+    paddingY?: SpaceValue;
+    paddingTop?: SpaceValue;
+    paddingRight?: SpaceValue;
+    paddingBottom?: SpaceValue;
+    paddingLeft?: SpaceValue;
+};
+type StyleProps = React.Attributes & Record<string, unknown>;
+export type StackProps = {
+    direction?: LayoutDirection;
+    gap?: SpaceValue;
+    align?: StackAlign;
+    justify?: StackJustify;
+    autoSize?: StackAutoSize;
+    sx?: Sx<StyleProps>;
+    children?: React.ReactNode;
+} & StackPadding & StyleProps;
+export type RowProps = Omit<StackProps, "direction">;
+export {};

package/out/layout/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/surface/surface.d.ts

@@ -0,0 +1,10 @@
+import type { Sx } from "@lattice-ui/style";
+type GuiPropRecord = Record<string, unknown>;
+export type SurfaceToken = "surface" | "elevated" | "sunken" | "overlay";
+/**
+ * Props-only surface helper.
+ * Use this when you only want host props (including host border props).
+ * It does not create child instances like UICorner/UIStroke/shadow nodes.
+ */
+export declare function surface<Props extends GuiPropRecord>(token: SurfaceToken): Sx<Props>;
+export {};

package/out/surface/surface.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local function asSxProps(value)
+	return value
+end
+--[[
+	*
+	 * Props-only surface helper.
+	 * Use this when you only want host props (including host border props).
+	 * It does not create child instances like UICorner/UIStroke/shadow nodes.
+	 
+]]
+local function surface(token)
+	return function(theme)
+		repeat
+			if token == "surface" then
+				return asSxProps({
+					BackgroundColor3 = theme.colors.surface,
+					BorderColor3 = theme.colors.border,
+					BorderSizePixel = 1,
+				})
+			end
+			if token == "elevated" then
+				return asSxProps({
+					BackgroundColor3 = theme.colors.surfaceElevated,
+					BorderColor3 = theme.colors.border,
+					BorderSizePixel = 1,
+				})
+			end
+			if token == "sunken" then
+				return asSxProps({
+					BackgroundColor3 = theme.colors.background,
+					BorderColor3 = theme.colors.border,
+					BorderSizePixel = 1,
+				})
+			end
+			if token == "overlay" then
+				return asSxProps({
+					BackgroundColor3 = theme.colors.overlay,
+					BackgroundTransparency = 0.35,
+					BorderSizePixel = 0,
+				})
+			end
+		until true
+	end
+end
+return {
+	surface = surface,
+}

package/out/surface/surfacePrimitive.d.ts

@@ -0,0 +1,17 @@
+import { React } from "@lattice-ui/core";
+import type { Sx } from "@lattice-ui/style";
+import type { SurfaceToken } from "./surface";
+type StyleProps = React.Attributes & Record<string, unknown>;
+export type SurfaceProps = {
+    tone?: SurfaceToken;
+    sx?: Sx<StyleProps>;
+    children?: React.ReactNode;
+} & StyleProps;
+/**
+ * Decorated surface host primitive.
+ * Unlike `surface()`, this renders instance-graph decoration via UICorner/UIStroke.
+ * Host border props are not the canonical border representation here.
+ * `asChild` is intentionally not supported in this milestone.
+ */
+export declare function Surface(props: SurfaceProps): React.JSX.Element;
+export {};

package/out/surface/surfacePrimitive.luau

@@ -0,0 +1,55 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _style = TS.import(script, TS.getModule(script, "@lattice-ui", "style").out)
+local mergeGuiProps = _style.mergeGuiProps
+local resolveSx = _style.resolveSx
+local useTheme = _style.useTheme
+local surface = TS.import(script, script.Parent, "surface").surface
+--[[
+	*
+	 * Decorated surface host primitive.
+	 * Unlike `surface()`, this renders instance-graph decoration via UICorner/UIStroke.
+	 * Host border props are not the canonical border representation here.
+	 * `asChild` is intentionally not supported in this milestone.
+	 
+]]
+local function Surface(props)
+	local tone = props.tone or "surface"
+	local sx = props.sx
+	local children = props.children
+	local asChild = props.asChild
+	if asChild ~= nil then
+		error("[Surface] `asChild` is not supported in M2.")
+	end
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "tone" or rawKey == "sx" or rawKey == "children" or rawKey == "asChild" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local toneProps = resolveSx(surface(tone), theme)
+	local sxProps = resolveSx(sx, theme)
+	local baseProps = if tone == "overlay" then toneProps else mergeGuiProps(toneProps, {
+		BorderSizePixel = 0,
+	})
+	local mergedProps = mergeGuiProps(baseProps, sxProps, restProps)
+	local decorated = tone ~= "overlay"
+	local _attributes = table.clone(mergedProps)
+	setmetatable(_attributes, nil)
+	return React.createElement("frame", _attributes, if decorated then React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, theme.radius.lg),
+	}) else nil, if decorated then React.createElement("uistroke", {
+		Color = theme.colors.border,
+		Thickness = 1,
+	}) else nil, children)
+end
+return {
+	Surface = Surface,
+}

package/out/system/SystemProvider.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { SystemProviderProps, SystemThemeContextValue } from "./types";
+export declare function SystemProvider(props: SystemProviderProps): React.JSX.Element;
+export declare function useSystemTheme(): SystemThemeContextValue;