@lattice-ui/system 0.1.1 → 0.3.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 astra-void
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/out/index.d.ts

@@ -1,9 +1,10 @@
 export { DensityProvider, useDensity } from "./density/DensityProvider";
 export { applyDensity, density } from "./density/density";
 export type { DensityContextValue, DensityProviderProps, DensityToken } from "./density/types";
+export { Grid } from "./layout/Grid";
 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 { GridProps, 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";

package/out/init.luau

@@ -7,6 +7,7 @@ exports.useDensity = _DensityProvider.useDensity
 local _density = TS.import(script, script, "density", "density")
 exports.applyDensity = _density.applyDensity
 exports.density = _density.density
+exports.Grid = TS.import(script, script, "layout", "Grid").Grid
 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

package/out/layout/Grid.d.ts

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

package/out/layout/Grid.luau

@@ -0,0 +1,147 @@
+-- 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 _gridMath = TS.import(script, script.Parent, "gridMath")
+local resolveGridCellWidth = _gridMath.resolveGridCellWidth
+local resolveGridColumns = _gridMath.resolveGridColumns
+local _space = TS.import(script, script.Parent, "space")
+local resolvePadding = _space.resolvePadding
+local resolveSpace = _space.resolveSpace
+local function Grid(props)
+	local _condition = props.gap
+	if _condition == nil then
+		_condition = 0
+	end
+	local gap = _condition
+	local _condition_1 = props.rowGap
+	if _condition_1 == nil then
+		_condition_1 = gap
+	end
+	local rowGap = _condition_1
+	local _condition_2 = props.columnGap
+	if _condition_2 == nil then
+		_condition_2 = gap
+	end
+	local columnGap = _condition_2
+	local _condition_3 = props.autoSize
+	if _condition_3 == nil then
+		_condition_3 = false
+	end
+	local autoSize = _condition_3
+	local columns = props.columns
+	local minColumnWidth = props.minColumnWidth
+	local _condition_4 = props.cellHeight
+	if _condition_4 == nil then
+		_condition_4 = 32
+	end
+	local cellHeight = _condition_4
+	local children = props.children
+	local sx = props.sx
+	local asChild = props.asChild
+	if asChild ~= nil then
+		error("[Grid] `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 == "gap" or rawKey == "rowGap" or rawKey == "columnGap" or rawKey == "columns" or rawKey == "minColumnWidth" or rawKey == "cellHeight" 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 resolvedRowGap = resolveSpace(theme, rowGap)
+	local resolvedColumnGap = resolveSpace(theme, columnGap)
+	local resolvedMinColumnWidth = if minColumnWidth ~= nil then resolveSpace(theme, minColumnWidth) else nil
+	local resolvedCellHeight = resolveSpace(theme, cellHeight)
+	local padding = resolvePadding(theme, props)
+	local hasPadding = padding.top > 0 or padding.right > 0 or padding.bottom > 0 or padding.left > 0
+	local layoutState, setLayoutState = React.useState(function()
+		local _object = {
+			columns = resolveGridColumns(0, {
+				columns = columns,
+				minColumnWidth = resolvedMinColumnWidth,
+				columnGap = resolvedColumnGap,
+			}),
+		}
+		local _left = "cellWidth"
+		local _condition_5 = resolvedMinColumnWidth
+		if _condition_5 == nil then
+			_condition_5 = 120
+		end
+		_object[_left] = math.max(1, _condition_5)
+		return _object
+	end)
+	local frameRef = React.useRef()
+	local setFrameRef = React.useCallback(function(instance)
+		if not instance or not instance:IsA("Frame") then
+			frameRef.current = nil
+			return nil
+		end
+		frameRef.current = instance
+	end, {})
+	local updateLayout = React.useCallback(function()
+		local frame = frameRef.current
+		if not frame then
+			return nil
+		end
+		local containerWidth = frame.AbsoluteSize.X - padding.left - padding.right
+		local nextColumns = resolveGridColumns(containerWidth, {
+			columns = columns,
+			minColumnWidth = resolvedMinColumnWidth,
+			columnGap = resolvedColumnGap,
+		})
+		local nextCellWidth = resolveGridCellWidth(containerWidth, nextColumns, resolvedColumnGap)
+		setLayoutState(function(current)
+			if current.columns == nextColumns and current.cellWidth == nextCellWidth then
+				return current
+			end
+			return {
+				columns = nextColumns,
+				cellWidth = nextCellWidth,
+			}
+		end)
+	end, { columns, padding.left, padding.right, resolvedColumnGap, resolvedMinColumnWidth })
+	React.useEffect(function()
+		updateLayout()
+		local frame = frameRef.current
+		if not frame then
+			return nil
+		end
+		local sizeConnection = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(updateLayout)
+		return function()
+			sizeConnection:Disconnect()
+		end
+	end, { updateLayout })
+	local sxProps = resolveSx(sx, theme)
+	local baseProps = {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutomaticSize = if autoSize == true then Enum.AutomaticSize.Y elseif autoSize == "x" then Enum.AutomaticSize.X elseif autoSize == "y" then Enum.AutomaticSize.Y elseif autoSize == "xy" then Enum.AutomaticSize.XY else Enum.AutomaticSize.None,
+	}
+	local mergedProps = mergeGuiProps(baseProps, sxProps, restProps)
+	local _attributes = table.clone(mergedProps)
+	setmetatable(_attributes, nil)
+	_attributes.ref = setFrameRef
+	return React.createElement("frame", _attributes, React.createElement("uigridlayout", {
+		CellPadding = UDim2.fromOffset(resolvedColumnGap, resolvedRowGap),
+		CellSize = UDim2.fromOffset(layoutState.cellWidth, resolvedCellHeight),
+		FillDirectionMaxCells = layoutState.columns,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}), 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 {
+	Grid = Grid,
+}

package/out/layout/gridMath.d.ts

@@ -0,0 +1,7 @@
+export type ResolveGridColumnsOptions = {
+    columns?: number;
+    minColumnWidth?: number;
+    columnGap?: number;
+};
+export declare function resolveGridColumns(containerWidth: number, options: ResolveGridColumnsOptions): number;
+export declare function resolveGridCellWidth(containerWidth: number, columns: number, columnGap: number): number;

package/out/layout/gridMath.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local function resolveGridColumns(containerWidth, options)
+	local explicitColumns = options.columns
+	if explicitColumns ~= nil and explicitColumns > 0 then
+		return math.max(1, math.floor(explicitColumns))
+	end
+	local minColumnWidth = options.minColumnWidth
+	if minColumnWidth == nil or minColumnWidth <= 0 then
+		return 1
+	end
+	local _condition = options.columnGap
+	if _condition == nil then
+		_condition = 0
+	end
+	local gap = math.max(0, _condition)
+	local width = math.max(0, containerWidth)
+	local withGap = width + gap
+	local perColumn = minColumnWidth + gap
+	if perColumn <= 0 then
+		return 1
+	end
+	return math.max(1, math.floor(withGap / perColumn))
+end
+local function resolveGridCellWidth(containerWidth, columns, columnGap)
+	local safeColumns = math.max(1, math.floor(columns))
+	local safeGap = math.max(0, columnGap)
+	local availableWidth = math.max(0, containerWidth - safeGap * (safeColumns - 1))
+	return math.max(1, math.floor(availableWidth / safeColumns))
+end
+return {
+	resolveGridColumns = resolveGridColumns,
+	resolveGridCellWidth = resolveGridCellWidth,
+}

package/out/layout/types.d.ts

@@ -26,4 +26,15 @@ export type StackProps = {
     children?: React.ReactNode;
 } & StackPadding & StyleProps;
 export type RowProps = Omit<StackProps, "direction">;
+export type GridProps = {
+    columns?: number;
+    minColumnWidth?: SpaceValue;
+    cellHeight?: SpaceValue;
+    gap?: SpaceValue;
+    rowGap?: SpaceValue;
+    columnGap?: SpaceValue;
+    autoSize?: StackAutoSize;
+    sx?: Sx<StyleProps>;
+    children?: React.ReactNode;
+} & StackPadding & StyleProps;
 export {};

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@lattice-ui/system",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "files": [
+    "out",
+    "README.md"
+  ],
   "dependencies": {
-    "@lattice-ui/core": "0.1.1",
-    "@lattice-ui/style": "0.1.1"
+    "@lattice-ui/core": "0.3.1",
+    "@lattice-ui/style": "0.3.1"
   },
   "peerDependencies": {
     "@rbxts/react": "^17",

package/src/density/DensityProvider.tsx

@@ -1,61 +0,0 @@
-import { createStrictContext, React, useControllableState } from "@lattice-ui/core";
-import { ThemeProvider } from "@lattice-ui/style";
-import { useSystemBaseThemeContext } from "../system/baseThemeContext";
-import { SystemThemeContextProvider } from "../system/systemThemeContext";
-import type { SystemThemeContextValue } from "../system/types";
-import { applyDensity } from "./density";
-import type { DensityContextValue, DensityProviderProps, DensityToken } from "./types";
-
-const [DensityContextProvider, useDensityContext] = createStrictContext<DensityContextValue>("DensityProvider");
-const DEFAULT_DENSITY: DensityToken = "comfortable";
-
-export function DensityProvider(props: DensityProviderProps) {
-  const { baseTheme, setBaseTheme } = useSystemBaseThemeContext();
-
-  const [densityValue, setDensityValue] = useControllableState<DensityToken>({
-    value: props.density,
-    defaultValue: props.defaultDensity ?? DEFAULT_DENSITY,
-    onChange: props.onDensityChange,
-  });
-
-  // Read-path contract: resolvedTheme is derived from baseTheme + current density.
-  const resolvedTheme = React.useMemo(() => applyDensity(baseTheme, densityValue), [baseTheme, densityValue]);
-
-  const setDensity = React.useCallback(
-    (nextDensity: DensityToken) => {
-      setDensityValue(nextDensity);
-    },
-    [setDensityValue],
-  );
-
-  const densityContextValue = React.useMemo<DensityContextValue>(
-    () => ({
-      density: densityValue,
-      setDensity,
-    }),
-    [densityValue, setDensity],
-  );
-
-  const systemThemeContextValue = React.useMemo<SystemThemeContextValue>(
-    () => ({
-      theme: resolvedTheme,
-      baseTheme,
-      density: densityValue,
-      setBaseTheme,
-      setDensity,
-    }),
-    [baseTheme, densityValue, resolvedTheme, setBaseTheme, setDensity],
-  );
-
-  return (
-    <DensityContextProvider value={densityContextValue}>
-      <SystemThemeContextProvider value={systemThemeContextValue}>
-        <ThemeProvider theme={resolvedTheme}>{props.children}</ThemeProvider>
-      </SystemThemeContextProvider>
-    </DensityContextProvider>
-  );
-}
-
-export function useDensity() {
-  return useDensityContext();
-}

package/src/density/density.ts

@@ -1,102 +0,0 @@
-import type { Theme } from "@lattice-ui/style";
-import type { DensityToken } from "./types";
-
-type DensityScale = {
-  space: number;
-  radius: number;
-  typography: number;
-};
-
-const DENSITY_SCALES: Record<DensityToken, DensityScale> = {
-  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,
-  },
-};
-
-function scaleNonNegative(value: number, factor: number) {
-  return math.max(0, math.round(value * factor));
-}
-
-function scaleTextSize(value: number, factor: number) {
-  return math.max(10, math.round(value * factor));
-}
-
-function scaleSpace(theme: Theme, factor: number): Theme["space"] {
-  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),
-  };
-}
-
-function scaleRadius(theme: Theme, factor: number): Theme["radius"] {
-  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),
-  };
-}
-
-function scaleTypography(theme: Theme, factor: number): Theme["typography"] {
-  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),
-    },
-  };
-}
-
-/**
- * M1 limitation: density is a pure theme transformer.
- * It does not create layout or child instances.
- */
-export function applyDensity(theme: Theme, token: DensityToken): Theme {
-  const scale = DENSITY_SCALES[token];
-
-  return {
-    colors: { ...theme.colors },
-    space: scaleSpace(theme, scale.space),
-    radius: scaleRadius(theme, scale.radius),
-    typography: scaleTypography(theme, scale.typography),
-  };
-}
-
-/**
- * M1 limitation: this helper only returns a theme transformer.
- * It does not modify instance graphs or perform runtime layout composition.
- */
-export function density(token: DensityToken) {
-  return (theme: Theme) => applyDensity(theme, token);
-}

package/src/density/types.ts

@@ -1,15 +0,0 @@
-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/src/index.ts

@@ -1,22 +0,0 @@
-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/src/layout/Row.tsx

@@ -1,7 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { Stack } from "./Stack";
-import type { RowProps } from "./types";
-
-export function Row(props: RowProps) {
-  return <Stack {...props} direction="horizontal" />;
-}

package/src/layout/Stack.tsx

@@ -1,133 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { mergeGuiProps, resolveSx, useTheme } from "@lattice-ui/style";
-import { resolvePadding, resolveSpace } from "./space";
-import type { LayoutDirection, StackAlign, StackAutoSize, StackJustify, StackProps } from "./types";
-
-type StyleProps = React.Attributes & Record<string, unknown>;
-
-function toHorizontalAlignment(value: StackAlign | StackJustify) {
-  switch (value) {
-    case "center":
-      return Enum.HorizontalAlignment.Center;
-    case "end":
-      return Enum.HorizontalAlignment.Right;
-    case "start":
-    default:
-      return Enum.HorizontalAlignment.Left;
-  }
-}
-
-function toVerticalAlignment(value: StackAlign | StackJustify) {
-  switch (value) {
-    case "center":
-      return Enum.VerticalAlignment.Center;
-    case "end":
-      return Enum.VerticalAlignment.Bottom;
-    case "start":
-    default:
-      return Enum.VerticalAlignment.Top;
-  }
-}
-
-function toAutomaticSize(autoSize: StackAutoSize | undefined, direction: LayoutDirection) {
-  if (autoSize === undefined || autoSize === false) {
-    return Enum.AutomaticSize.None;
-  }
-
-  if (autoSize === true) {
-    return direction === "vertical" ? Enum.AutomaticSize.Y : Enum.AutomaticSize.X;
-  }
-
-  switch (autoSize) {
-    case "x":
-      return Enum.AutomaticSize.X;
-    case "y":
-      return Enum.AutomaticSize.Y;
-    case "xy":
-      return Enum.AutomaticSize.XY;
-    default:
-      return Enum.AutomaticSize.None;
-  }
-}
-
-export function Stack(props: StackProps) {
-  const direction = props.direction ?? "vertical";
-  const gap = props.gap ?? 0;
-  const align = props.align ?? "start";
-  const justify = props.justify ?? "start";
-  const autoSize = props.autoSize;
-  const sx = props.sx;
-  const children = props.children;
-  const asChild = (props as { asChild?: unknown }).asChild;
-
-  if (asChild !== undefined) {
-    error("[Stack] `asChild` is not supported in M3.");
-  }
-
-  const restProps: StyleProps = {};
-  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
-    if (!typeIs(rawKey, "string")) {
-      continue;
-    }
-
-    if (
-      rawKey === "direction" ||
-      rawKey === "gap" ||
-      rawKey === "align" ||
-      rawKey === "justify" ||
-      rawKey === "autoSize" ||
-      rawKey === "sx" ||
-      rawKey === "asChild" ||
-      rawKey === "padding" ||
-      rawKey === "paddingX" ||
-      rawKey === "paddingY" ||
-      rawKey === "paddingTop" ||
-      rawKey === "paddingRight" ||
-      rawKey === "paddingBottom" ||
-      rawKey === "paddingLeft" ||
-      rawKey === "children"
-    ) {
-      continue;
-    }
-
-    restProps[rawKey] = value;
-  }
-
-  const { theme } = useTheme();
-  const sxProps = resolveSx(sx, theme);
-  const baseProps: Partial<StyleProps> = {
-    BackgroundTransparency: 1,
-    BorderSizePixel: 0,
-    AutomaticSize: toAutomaticSize(autoSize, direction),
-  };
-  const mergedProps = mergeGuiProps(baseProps, sxProps, restProps);
-
-  const resolvedGap = resolveSpace(theme, gap);
-  const padding = resolvePadding(theme, props);
-  const hasPadding = padding.top > 0 || padding.right > 0 || padding.bottom > 0 || padding.left > 0;
-
-  const vertical = direction === "vertical";
-  const horizontalAlignment = vertical ? toHorizontalAlignment(align) : toHorizontalAlignment(justify);
-  const verticalAlignment = vertical ? toVerticalAlignment(justify) : toVerticalAlignment(align);
-
-  return (
-    <frame {...(mergedProps as Record<string, unknown>)}>
-      <uilistlayout
-        FillDirection={vertical ? Enum.FillDirection.Vertical : Enum.FillDirection.Horizontal}
-        HorizontalAlignment={horizontalAlignment}
-        Padding={new UDim(0, resolvedGap)}
-        SortOrder={Enum.SortOrder.LayoutOrder}
-        VerticalAlignment={verticalAlignment}
-      />
-      {hasPadding ? (
-        <uipadding
-          PaddingBottom={new UDim(0, padding.bottom)}
-          PaddingLeft={new UDim(0, padding.left)}
-          PaddingRight={new UDim(0, padding.right)}
-          PaddingTop={new UDim(0, padding.top)}
-        />
-      ) : undefined}
-      {children}
-    </frame>
-  );
-}

package/src/layout/space.ts

@@ -1,101 +0,0 @@
-import type { Theme } from "@lattice-ui/style";
-import type { SpaceValue, StackPadding } from "./types";
-
-type ResolvedPadding = {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-};
-
-function spaceTokenValue(theme: Theme, value: number) {
-  switch (value) {
-    case 0:
-      return theme.space[0];
-    case 2:
-      return theme.space[2];
-    case 4:
-      return theme.space[4];
-    case 6:
-      return theme.space[6];
-    case 8:
-      return theme.space[8];
-    case 10:
-      return theme.space[10];
-    case 12:
-      return theme.space[12];
-    case 14:
-      return theme.space[14];
-    case 16:
-      return theme.space[16];
-    case 20:
-      return theme.space[20];
-    case 24:
-      return theme.space[24];
-    case 32:
-      return theme.space[32];
-    default:
-      return undefined;
-  }
-}
-
-function clampSpace(value: number) {
-  return math.max(0, value);
-}
-
-export function resolveSpace(theme: Theme, value?: SpaceValue) {
-  if (value === undefined) {
-    return 0;
-  }
-
-  const tokenValue = spaceTokenValue(theme, value);
-  if (tokenValue !== undefined) {
-    return clampSpace(tokenValue);
-  }
-
-  return clampSpace(value);
-}
-
-export function resolvePadding(theme: Theme, value: StackPadding): ResolvedPadding {
-  const base = resolveSpace(theme, value.padding);
-
-  let top = base;
-  let right = base;
-  let bottom = base;
-  let left = base;
-
-  if (value.paddingX !== undefined) {
-    const axis = resolveSpace(theme, value.paddingX);
-    left = axis;
-    right = axis;
-  }
-
-  if (value.paddingY !== undefined) {
-    const axis = resolveSpace(theme, value.paddingY);
-    top = axis;
-    bottom = axis;
-  }
-
-  if (value.paddingTop !== undefined) {
-    top = resolveSpace(theme, value.paddingTop);
-  }
-
-  if (value.paddingRight !== undefined) {
-    right = resolveSpace(theme, value.paddingRight);
-  }
-
-  if (value.paddingBottom !== undefined) {
-    bottom = resolveSpace(theme, value.paddingBottom);
-  }
-
-  if (value.paddingLeft !== undefined) {
-    left = resolveSpace(theme, value.paddingLeft);
-  }
-
-  return {
-    top,
-    right,
-    bottom,
-    left,
-  };
-}

package/src/layout/types.ts

@@ -1,34 +0,0 @@
-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">;

package/src/surface/surface.ts

@@ -1,45 +0,0 @@
-import type { Sx } from "@lattice-ui/style";
-
-type GuiPropRecord = Record<string, unknown>;
-
-export type SurfaceToken = "surface" | "elevated" | "sunken" | "overlay";
-
-function asSxProps<Props extends GuiPropRecord>(value: GuiPropRecord): Partial<Props> {
-  return value as unknown as Partial<Props>;
-}
-
-/**
- * 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 function surface<Props extends GuiPropRecord>(token: SurfaceToken): Sx<Props> {
-  return (theme) => {
-    switch (token) {
-      case "surface":
-        return asSxProps<Props>({
-          BackgroundColor3: theme.colors.surface,
-          BorderColor3: theme.colors.border,
-          BorderSizePixel: 1,
-        });
-      case "elevated":
-        return asSxProps<Props>({
-          BackgroundColor3: theme.colors.surfaceElevated,
-          BorderColor3: theme.colors.border,
-          BorderSizePixel: 1,
-        });
-      case "sunken":
-        return asSxProps<Props>({
-          BackgroundColor3: theme.colors.background,
-          BorderColor3: theme.colors.border,
-          BorderSizePixel: 1,
-        });
-      case "overlay":
-        return asSxProps<Props>({
-          BackgroundColor3: theme.colors.overlay,
-          BackgroundTransparency: 0.35,
-          BorderSizePixel: 0,
-        });
-    }
-  };
-}

package/src/surface/surfacePrimitive.tsx

@@ -1,59 +0,0 @@
-import { React } from "@lattice-ui/core";
-import type { Sx } from "@lattice-ui/style";
-import { mergeGuiProps, resolveSx, useTheme } from "@lattice-ui/style";
-import type { SurfaceToken } from "./surface";
-import { surface } 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 function Surface(props: SurfaceProps) {
-  const tone = props.tone ?? "surface";
-  const sx = props.sx;
-  const children = props.children;
-
-  const asChild = (props as { asChild?: unknown }).asChild;
-  if (asChild !== undefined) {
-    error("[Surface] `asChild` is not supported in M2.");
-  }
-
-  const restProps: StyleProps = {};
-  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
-    if (!typeIs(rawKey, "string")) {
-      continue;
-    }
-
-    if (rawKey === "tone" || rawKey === "sx" || rawKey === "children" || rawKey === "asChild") {
-      continue;
-    }
-
-    restProps[rawKey] = value;
-  }
-
-  const { theme } = useTheme();
-  const toneProps = resolveSx(surface<StyleProps>(tone), theme);
-  const sxProps = resolveSx(sx, theme);
-  const baseProps =
-    tone === "overlay" ? toneProps : mergeGuiProps(toneProps, { BorderSizePixel: 0 } as Partial<StyleProps>);
-  const mergedProps = mergeGuiProps(baseProps, sxProps, restProps);
-  const decorated = tone !== "overlay";
-
-  return (
-    <frame {...(mergedProps as Record<string, unknown>)}>
-      {decorated ? <uicorner CornerRadius={new UDim(0, theme.radius.lg)} /> : undefined}
-      {decorated ? <uistroke Color={theme.colors.border} Thickness={1} /> : undefined}
-      {children}
-    </frame>
-  );
-}

package/src/system/SystemProvider.tsx

@@ -1,47 +0,0 @@
-import { React, useControllableState } from "@lattice-ui/core";
-import { defaultLightTheme } from "@lattice-ui/style";
-import { DensityProvider } from "../density/DensityProvider";
-import { SystemBaseThemeContextProvider } from "./baseThemeContext";
-import { useSystemThemeContext } from "./systemThemeContext";
-import type { SystemProviderProps, SystemThemeContextValue } from "./types";
-
-export function SystemProvider(props: SystemProviderProps) {
-  // SystemProvider owns raw/base theme state. Density is applied in DensityProvider.
-  const [baseThemeValue, setBaseThemeValue] = useControllableState({
-    value: props.theme,
-    defaultValue: props.defaultTheme ?? defaultLightTheme,
-    onChange: props.onThemeChange,
-  });
-
-  const setBaseTheme = React.useCallback<SystemThemeContextValue["setBaseTheme"]>(
-    (nextTheme) => {
-      // Write-path contract: updates should target baseTheme, not resolved theme.
-      setBaseThemeValue(nextTheme);
-    },
-    [setBaseThemeValue],
-  );
-
-  const baseThemeContextValue = React.useMemo(
-    () => ({
-      baseTheme: baseThemeValue,
-      setBaseTheme,
-    }),
-    [baseThemeValue, setBaseTheme],
-  );
-
-  return (
-    <SystemBaseThemeContextProvider value={baseThemeContextValue}>
-      <DensityProvider
-        defaultDensity={props.defaultDensity}
-        density={props.density}
-        onDensityChange={props.onDensityChange}
-      >
-        {props.children}
-      </DensityProvider>
-    </SystemBaseThemeContextProvider>
-  );
-}
-
-export function useSystemTheme() {
-  return useSystemThemeContext();
-}

package/src/system/baseThemeContext.ts

@@ -1,5 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { SystemBaseThemeContextValue } from "./types";
-
-export const [SystemBaseThemeContextProvider, useSystemBaseThemeContext] =
-  createStrictContext<SystemBaseThemeContextValue>("SystemBaseThemeContext");

package/src/system/systemThemeContext.ts

@@ -1,5 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { SystemThemeContextValue } from "./types";
-
-export const [SystemThemeContextProvider, useSystemThemeContext] =
-  createStrictContext<SystemThemeContextValue>("SystemThemeContext");

package/src/system/types.ts

@@ -1,29 +0,0 @@
-import type { Theme } from "@lattice-ui/style";
-import type React from "@rbxts/react";
-import type { DensityToken } from "../density/types";
-
-export type SystemProviderProps = {
-  theme?: Theme;
-  defaultTheme?: Theme;
-  onThemeChange?: (nextTheme: Theme) => void;
-  density?: DensityToken;
-  defaultDensity?: DensityToken;
-  onDensityChange?: (next: DensityToken) => void;
-  children?: React.ReactNode;
-};
-
-export type SystemThemeContextValue = {
-  /** Density-resolved theme for read usage in system-managed trees. */
-  theme: Theme;
-  /** Raw theme before density transforms. Writes must target this base theme. */
-  baseTheme: Theme;
-  density: DensityToken;
-  /** Use this to update the raw/base theme source. */
-  setBaseTheme: (next: Theme) => void;
-  setDensity: (next: DensityToken) => void;
-};
-
-export type SystemBaseThemeContextValue = {
-  baseTheme: Theme;
-  setBaseTheme: (nextTheme: Theme) => void;
-};

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "out",
-    "declaration": true,
-    "typeRoots": [
-      "./node_modules/@rbxts",
-      "../../node_modules/@rbxts",
-      "./node_modules/@lattice-ui",
-      "../../node_modules/@lattice-ui"
-    ],
-    "types": ["types", "compiler-types"]
-  },
-  "include": ["src"]
-}

package/tsconfig.typecheck.json

@@ -1,25 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "baseUrl": "..",
-    "rootDir": "..",
-    "paths": {
-      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
-      "@lattice-ui/core": ["core/src/index.ts"],
-      "@lattice-ui/dialog": ["dialog/src/index.ts"],
-      "@lattice-ui/focus": ["focus/src/index.ts"],
-      "@lattice-ui/layer": ["layer/src/index.ts"],
-      "@lattice-ui/menu": ["menu/src/index.ts"],
-      "@lattice-ui/popover": ["popover/src/index.ts"],
-      "@lattice-ui/popper": ["popper/src/index.ts"],
-      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
-      "@lattice-ui/style": ["style/src/index.ts"],
-      "@lattice-ui/switch": ["switch/src/index.ts"],
-      "@lattice-ui/system": ["system/src/index.ts"],
-      "@lattice-ui/tabs": ["tabs/src/index.ts"],
-      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
-      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
-    }
-  }
-}