@rbxts/app-forge 0.6.0-alpha.7 → 0.6.0-alpha.71

package/README.md

@@ -1,14 +1,11 @@
-# AppForge — React App & Window Manager for roblox-ts
+# AppForge — Vide/React App & Window Manager for roblox-ts
 
-AppForge is a UI/app orchestration system for React in Roblox, enabling:
+AppForge is a UI/app orchestration system for Vide/React in Roblox, enabling:
 
-✔ App registration
-✔ Visibility & state control
-✔ App grouping
-✔ Exclusive UI modes
 ✔ Rule-based interactions
 ✔ Priority & layering
-✔ React-friendly state bindings & animations
+✔ App registration
+✔ state control
 
 ---
 
@@ -28,6 +25,8 @@ bun i @rbxts/app-forge
 
 ```ts
 declare global {
+ type GroupNames = "Main" | "Popups"
+ type AppNames = "SideButtons" | "Inventory"
  type AppProps = {
   player: Player;
  }
@@ -35,11 +34,38 @@ declare global {
 }
 ```
 
-> App names are now autodetected via decorators — no need to define `AppNames` globally.
+---
+
+# 🚀 Initializing AppForge -- VIDE
+
+```ts
+import { Workspace, Players } from "@rbxts/services"
+
+import { RenderVide, CreateVideForge } from "@rbxts/app-forge";
+import { Players, Workspace } from "@rbxts/services";
+import Vide from "@rbxts/vide";
+
+const forge = new CreateVideForge();
+const target = Players.LocalPlayer.WaitForChild("PlayerGui")
+
+const props = {
+ player: Players.LocalPlayer!,
+} as const satisfies AppProps;
+
+mount(() => {
+ return (
+  <screengui Name={"App"} ZIndexBehavior="Sibling" ResetOnSpawn={false}>
+   <RenderVide {...{ props, forge }} />
+  </screengui>
+ );
+}, target);
+```
+
+> `RenderVide` will contruct all decorated apps and dependencies for that decorated app.
 
 ---
 
-# 🚀 Initializing AppForge
+# 🚀 Initializing AppForge -- VIDE
 
 ```ts
 import { Workspace } from "@rbxts/services"
@@ -68,30 +94,49 @@ root.render(
 );
 ```
 
-> `Render` will control all decorated apps.
+> `RenderReact` will contruct all decorated apps and dependencies for that decorated app.
 
 ---
 
-# 🧱 Creating an App
+# 🧱 Creating an App -- Vide
 
 ```ts
-import { App, Args } from "@rbxts/app-forge";
+import { VideApp, VideArgs } from "@rbxts/app-forge";
+import Vide from "@rbxts/vide";
+
+@VideApp({
+ name: "SideButtons",
+ visible: true,
+})
+export default class SideButtons extends VideArgs {
+ public render() {
+  return <frame Size={UDim2.fromScale(1, 1)}></frame>;
+ }
+}
+```
+
+---
+
+# 🧱 Creating an App -- React
+
+```ts
+import { ReactApp, ReactArgs } from "@rbxts/app-forge";
 import React from "@rbxts/react";
 
-@App({
+@ReactApp({
  name: "SideButtons",
  visible: true,
 })
-export default class SideButtons extends Args {
+export default class SideButtons extends ReactArgs {
  public render() {
-  return <frame Size={UDim2.fromScale(1, 1)}>Side Buttons UI</frame>;
+  return <frame Size={UDim2.fromScale(1, 1)}></frame>;
  }
 }
 ```
 
 ---
 
-# 📦 Props & `Args` Features
+# 📦 Props & `VideArgs` Features
 
 Inside a decorated App:
 
@@ -99,31 +144,72 @@ Inside a decorated App:
 this.forge   // AppForge instance
 this.name    // App Name
 this.props   // AppProps
-this.bind    // visible state bind
+this.source    // Vide Source
 ```
 
 Example:
 
 ```ts
-const { px } = this.props;
+const { px, forge } = this.props;
 const scale2px = px.map((s) => s * 2);
 ```
 
 ---
 
-# 🕹 App Manager API
+# 📦 Props & `ReactArgs` Features
+
+Inside a decorated App:
+
+```ts
+this.forge   // AppForge instance
+this.name    // App Name
+this.props   // AppProps
+this.bind    // React useBinding()
+this.state   // React useState()
+```
+
+Example:
+
+```ts
+const { px, forge } = this.props;
+const scale2px = px.map((s) => s * 2);
+```
+
+---
+
+# 🕹 App Manager API -- Vide
+
+```ts
+forge.toggle("Inventory");
+forge.bind("Shop", Vide.source(false));
+const bind = forge.getSource("Inventory");
+```
+
+---
+
+# 🕹 App Manager API -- React
 
 ```ts
 forge.toggle("Inventory");
 forge.set("Shop", true);
 forge.set("HUD", false);
-const shown = forge.getState("Pause");
-const bind = forge.getBind("Inventory");
+const bind = forge.getBind("Pause");
+const bind = forge.getSource("Inventory");
 ```
 
 ---
 
-# 📐 Using `getBind()` inside React
+# 📐 Using `getSource()` inside Vide
+
+```tsx
+return (
+ <frame Visible={forge.getSource("Inventory")}>
+  Items…
+ </frame>
+);
+```
+
+# 📐 Using `getBind()` inside Vide
 
 ```tsx
 return (
@@ -150,73 +236,40 @@ UserInputService.InputBegan.Connect((input) => {
 
 Rules control app visibility behavior.
 
-| Rule      | Effect                                  |
-| --------- | --------------------------------------- |
-| blockedBy | Prevents opening if another is open     |
-| blocks    | Closes another app when opened          |
-| exclusive | Closes ALL other apps except same group |
-| groups    | Non-conflicting coexistence grouping    |
-| Core      | Always allowed — never auto-closed      |
-| layer     | (Reserved – future rendering priority)  |
-
----
-
-## `groups`
-
-```ts
-@App({ name: "HUD", rules: { groups: "HUD" } })
-@App({ name: "Crosshair", rules: { groups: "HUD" } })
-```
-
-Both may open at the same time.
+| Rule      | Effect                                        |
+| --------- | --------------------------------------------- |
+| parent          | if parent is closed so is this app      |
+| layer           | (Reserved – future rendering priority)  |
+| exclusiveGroups | (Reserved – future rendering priority)  |
 
 ---
 
-## `Core`
+## `parent`
 
 ```ts
-@App({ name: "FPSCounter", rules: { groups: "Core" } })
+@App({ name: "ItemInfo", rules: { parent: "Inventory" } })
 ```
 
-Never closed by rules.
-
----
-
-# 🧪 Modern App Example (from your snippet)
-
-```ts
-@App({ name: "TestApp", visible: true, rules: { groups: "Core" } })
-export default class TestApp extends Args {
- public render() {
-  const { px } = this.props;
-
-  return (
-   <frame AnchorPoint={new Vector2(0.5, 1)}>
-    UI Stuff…
-   </frame>
-  );
- }
-}
-```
+ItemInfo can only be true if Inventory's source/state is true.
 
 ---
 
 # 🧠 Using AppForge from Flamework
 
 ```ts
-import AppForge, { Render } from "@rbxts/app-forge";
+import { RenderVide, CreateReactForge } from "@rbxts/app-forge";
 
 @Controller()
 export default class AppController implements OnInit {
  onInit() {
   const props = this.createProps(player);
-  const forge = new AppForge();
+  const forge = new CreateReactForge();
   const root = createRoot(new Instance("Folder"));
 
   root.render(
    createPortal(
     <screengui ResetOnSpawn={false}>
-     <Render {...{ props, forge, root, target: props.target }} />
+     <RenderVide {...{ props, forge, root, target: props.target }} />
     </screengui>,
     player.WaitForChild("PlayerGui"),
    ),
@@ -241,16 +294,11 @@ or:
 <Render {...{ props, forge, target, names: ["HUD", "Shop"] }} />
 ```
 
----
-
-# ❗ Best Practices
+or:
 
-✔ Use `groups` for compatible UIs
-✔ Use `blockedBy` to avoid interruptions
-✔ Use `blocks` for mutual exclusion
-✔ Use `exclusive` for fullscreen control
-✔ Use `"Core"` for never-hidden persistent UI
-✔ Avoid manually instantiating apps
+```tsx
+<Render {...{ props, forge, target }} /> // Renders All
+```
 
 ---
 

package/out/global.d.ts

@@ -1,9 +1,8 @@
 declare global {
 	// These will be overridden by the user
 	// They are only placeholders for your build
-
-	type AppGroups = readonly string[];
-	type AppNames = readonly string[];
+	type GroupNames = string;
+	type AppNames = string;
 	type AppProps = {};
 }
 export {};

package/out/index.d.ts

@@ -4,5 +4,9 @@ export { default as CreateReactForge } from "./react";
 export { default as CreateVideForge } from "./vide";
 export { Render as RenderReact } from "./react/helpers";
 export { Render as RenderVide } from "./vide/helpers";
-export type { MainProps as VideProps, ClassProps as VideClassProps } from "./vide/types";
-export type { MainProps as ReactProps, ClassProps as ReactClassProps, NameProps, } from "./react/types";
+export type { MainProps as VideProps, ClassProps as VideClassProps, RenderProps as VideRenderProps, } from "./vide/types";
+export type { MainProps as ReactProps, ClassProps as ReactClassProps, } from "./react/types";
+export { default as useReactAppContext } from "./react/hooks/useAppContext";
+export { default as ReactContexts } from "./react/context";
+export { default as useVideAppContext } from "./vide/hooks/useAppContext";
+export { default as VideContexts } from "./vide/context";

package/out/init.luau

@@ -15,4 +15,8 @@ exports.CreateVideForge = TS.import(script, script, "vide").default
 exports.RenderReact = TS.import(script, script, "react", "helpers").Render
 exports.RenderVide = TS.import(script, script, "vide", "helpers").Render
 -- Types
+exports.useReactAppContext = TS.import(script, script, "react", "hooks", "useAppContext").default
+exports.ReactContexts = TS.import(script, script, "react", "context").default
+exports.useVideAppContext = TS.import(script, script, "vide", "hooks", "useAppContext").default
+exports.VideContexts = TS.import(script, script, "vide", "context").default
 return exports

package/out/react/container.luau

@@ -3,28 +3,10 @@ local TS = _G[script]
 -- Services
 local RunService = TS.import(script, TS.getModule(script, "@rbxts", "services")).RunService
 -- Packages
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useBinding = _react.useBinding
-local createElement = _react.createElement
+local createElement = TS.import(script, TS.getModule(script, "@rbxts", "react")).createElement
 -- Types
 -- Components
 local AppRegistry = TS.import(script, script.Parent, "decorator").AppRegistry
-local function createBinding(name, manager)
-	local _name = name
-	local app = AppRegistry[_name]
-	if not app then
-		error(`App "{name}" not registered`)
-	end
-	local _condition = app.visible
-	if _condition == nil then
-		_condition = false
-	end
-	local binding = { useBinding(_condition) }
-	local _binds = manager.binds
-	local _name_1 = name
-	_binds[_name_1] = binding
-	return unpack(binding)
-end
 local function createInstance(props)
 	local _binding = props
 	local name = _binding.name
@@ -52,11 +34,9 @@ end
 local function AppContainer(props)
 	local _binding = props
 	local name = _binding.name
-	local forge = _binding.forge
 	if not (name ~= "" and name) then
 		error("App name is required in AppContainer")
 	end
-	createBinding(name, forge)
 	local element = createInstance(props)
 	if not element then
 		error(`Failed to create instance for app "{name}"`)

package/out/react/context.d.ts

@@ -0,0 +1,7 @@
+declare const Contexts: {
+    readonly App: import("@rbxts/react").Context<{
+        forge: import(".").default;
+        px: ReturnType<typeof import("@rbxts/loners-pretty-react-hooks").usePx>;
+    } | undefined>;
+};
+export default Contexts;

package/out/react/context.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+-- Packages
+local createContext = TS.import(script, TS.getModule(script, "@rbxts", "react")).createContext
+-- Types
+local Contexts = {
+	App = createContext(nil),
+}
+local default = Contexts
+return {
+	default = default,
+}

package/out/react/decorator.d.ts

@@ -6,7 +6,7 @@ export declare function App(props: Types.AppRegistryProps): <T extends new (prop
 export declare abstract class Args {
     readonly forge: AppForge;
     readonly props: Types.ClassProps;
-    readonly name: AppNames[number];
+    readonly name: AppNames;
     readonly bind: React.Binding<boolean>;
     readonly state: Boolean;
     constructor(props: Types.NameProps & Types.MainProps);

package/out/react/decorator.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 -- Services
-local RunService = TS.import(script, TS.getModule(script, "@rbxts", "services")).RunService
 -- Packages
 local usePx = TS.import(script, TS.getModule(script, "@rbxts", "loners-pretty-react-hooks").out).usePx
 -- Types
@@ -33,19 +32,16 @@ do
 		if not (name ~= "" and name) then
 			error("App name is required in Args constructor")
 		end
-		local bind = forge:getBind(name)
-		if not bind and RunService:IsRunning() then
-			error("FAILED TO GET BIND FOR APP!")
-		end
 		local px = usePx(target)
 		self.forge = forge
 		local _object = table.clone(props.props)
 		setmetatable(_object, nil)
 		_object.px = px
+		_object.forge = forge
 		self.props = _object
 		self.name = name
-		self.bind = bind
-		self.state = if self.bind then self.bind:getValue() else nil
+		self.bind = forge:getBind(name)
+		self.state = forge:getState(name)
 	end
 end
 return {

package/out/react/helpers.d.ts

@@ -1,3 +1,6 @@
 import React from "@rbxts/react";
-import Types from "./types";
+import type Types from "./types";
+import type AppForge from ".";
+export declare function createBinding(name: AppNames, forge: AppForge): void;
+export declare function createState(name: AppNames, forge: AppForge): void;
 export declare function Render(props: Types.NameProps & Types.MainProps): React.ReactNode;

package/out/react/helpers.luau

@@ -1,9 +1,65 @@
 -- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+-- Packages
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBinding = _react.useBinding
+local useState = _react.useState
 -- Types
+-- Components
+local AppRegistry = TS.import(script, script.Parent, "decorator").AppRegistry
+local function createBinding(name, forge)
+	local _name = name
+	local app = AppRegistry[_name]
+	if not app then
+		error(`App "{name}" not registered`)
+	end
+	local _binds = forge.binds
+	local _name_1 = name
+	if _binds[_name_1] ~= nil then
+		return nil
+	end
+	local _condition = app.visible
+	if _condition == nil then
+		_condition = false
+	end
+	local binding = { useBinding(_condition) }
+	local _binds_1 = forge.binds
+	local _name_2 = name
+	_binds_1[_name_2] = binding
+end
+local function createState(name, forge)
+	local _name = name
+	local app = AppRegistry[_name]
+	if not app then
+		error(`App "{name}" not registered`)
+	end
+	local _states = forge.states
+	local _name_1 = name
+	if _states[_name_1] ~= nil then
+		return nil
+	end
+	local _condition = app.visible
+	if _condition == nil then
+		_condition = false
+	end
+	local state = { useState(_condition) }
+	local _states_1 = forge.states
+	local _name_2 = name
+	_states_1[_name_2] = state
+end
 local function Render(props)
 	local names = props.names
 	local name = props.name
 	local forge = props.forge
+	-- ▼ ReadonlyMap.forEach ▼
+	local _callback = function(_, name)
+		createBinding(name, forge)
+		createState(name, forge)
+	end
+	for _k, _v in AppRegistry do
+		_callback(_v, _k, AppRegistry)
+	end
+	-- ▲ ReadonlyMap.forEach ▲
 	if name ~= "" and name then
 		return forge:renderApp(props)
 	elseif names then
@@ -12,5 +68,7 @@ local function Render(props)
 	return forge:renderAll(props)
 end
 return {
+	createBinding = createBinding,
+	createState = createState,
 	Render = Render,
 }

package/out/react/hooks/useAppContext.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    forge: import("..").default;
+    px: ReturnType<typeof import("@rbxts/loners-pretty-react-hooks").usePx>;
+};
+export default _default;

package/out/react/hooks/useAppContext.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+-- Packages
+local useContext = TS.import(script, TS.getModule(script, "@rbxts", "react")).useContext
+-- Components
+local Contexts = TS.import(script, script.Parent.Parent, "context").default
+local default = function()
+	local context = useContext(Contexts.App)
+	if not context then
+		error(`Failed to retrieve App Props for React {debug.traceback()}`)
+	end
+	return context
+end
+return {
+	default = default,
+}

package/out/react/index.d.ts

@@ -1,15 +1,18 @@
 import React from "@rbxts/react";
 import type Types from "./types";
+type Binding = [React.Binding<boolean>, (T: boolean) => void];
+type State = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 export default class AppForge {
-    binds: Map<string, [React.Binding<boolean>, (T: boolean) => void]>;
     loaded: Map<string, React.Element<any, string | React.JSXElementConstructor<any>>>;
+    binds: Map<string, Binding>;
+    states: Map<string, State>;
     private rulesManager;
-    getBind(name: AppNames[number]): React.Binding<boolean> | undefined;
-    getState(name: AppNames[number]): boolean | undefined;
-    set(name: AppNames[number], value: boolean): void;
-    open(name: AppNames[number]): void;
-    close(name: AppNames[number]): void;
-    toggle(name: AppNames[number]): void;
+    getBind(name: AppNames): React.Binding<boolean>;
+    getState(name: AppNames): boolean;
+    set(name: AppNames, value: boolean): void;
+    open(name: AppNames): void;
+    close(name: AppNames): void;
+    toggle(name: AppNames): void;
     renderApp(props: Types.NameProps & Types.MainProps): React.ReactElement<{
         key: string;
         ZIndexBehavior: Enum.ZIndexBehavior.Sibling;
@@ -38,3 +41,4 @@ export default class AppForge {
         Size: UDim2;
     }, string | React.JSXElementConstructor<any>>)[];
 }
+export {};

package/out/react/init.luau

@@ -7,7 +7,10 @@ local AppContainer = TS.import(script, script, "container").AppContainer
 local AppRegistry = TS.import(script, script, "decorator").AppRegistry
 -- Classes
 local RulesManager = TS.import(script, script, "rules").default
-local RunService = TS.import(script, TS.getModule(script, "@rbxts", "services")).RunService
+-- Helpers
+local _helpers = TS.import(script, script, "helpers")
+local createBinding = _helpers.createBinding
+local createState = _helpers.createState
 local AppForge
 do
 	AppForge = setmetatable({}, {
@@ -21,49 +24,48 @@ do
 		return self:constructor(...) or self
 	end
 	function AppForge:constructor()
-		self.binds = {}
 		self.loaded = {}
+		self.binds = {}
+		self.states = {}
 		self.rulesManager = RulesManager.new(self)
 	end
 	function AppForge:getBind(name)
-		local _condition = not RunService:IsRunning()
-		if _condition then
-			local _binds = self.binds
-			local _name = name
-			_condition = not (_binds[_name] ~= nil)
-		end
-		if _condition then
-			return nil
-		end
 		local _binds = self.binds
 		local _name = name
 		if not (_binds[_name] ~= nil) then
-			error(`App "{name}" has no binding`)
+			createBinding(name, self)
 		end
 		local _binds_1 = self.binds
 		local _name_1 = name
 		return _binds_1[_name_1][1]
 	end
 	function AppForge:getState(name)
-		local _result = self:getBind(name)
-		if _result ~= nil then
-			_result = _result:getValue()
+		local _states = self.states
+		local _name = name
+		if not (_states[_name] ~= nil) then
+			createState(name, self)
 		end
-		return _result
+		local _states_1 = self.states
+		local _name_1 = name
+		return _states_1[_name_1][1]
 	end
 	function AppForge:set(name, value)
-		if not self.rulesManager:applyRules(name, value) then
-			return nil
-		end
+		self.rulesManager:applyRules(name)
 		local _binds = self.binds
 		local _name = name
 		local _binding = _binds[_name]
-		local _ = _binding[1]
+		local _b = _binding[1]
 		local setBinding = _binding[2]
+		local _states = self.states
+		local _name_1 = name
+		local _binding_1 = _states[_name_1]
+		local _s = _binding_1[1]
+		local setState = _binding_1[2]
 		if not setBinding then
-			error(`App "{name}" has no binding setter`)
+			createBinding(name, self)
 		end
 		setBinding(value)
+		setState(value)
 	end
 	function AppForge:open(name)
 		self:set(name, true)

package/out/react/rules/index.d.ts

@@ -0,0 +1,6 @@
+import type AppForge from "..";
+export default class RulesManager {
+    private forge;
+    constructor(forge: AppForge);
+    applyRules(name: AppNames): void;
+}