@rbxts/centurion-ui 1.0.0-dev-284510d → 1.0.0-dev-a7b777e

package/README.md

@@ -0,0 +1,29 @@
+<div align="center">
+  <a href="https://centurion.paradoxum.dev/" target="_blank">
+    <img src="../../docs/src/assets/logo.webp" width="150" />
+  </a>
+
+  <h1>Centurion - UI</h1>
+
+  <p>
+    <strong>A flexible and extensible command framework for roblox-ts</strong>
+  </p>
+
+  This package contains Centurion's user interface. To use it, you must
+  also install [@rbxts/centurion](https://www.npmjs.com/package/@rbxts/centurion).
+
+  [![CI status][ci-badge]][ci-url]
+  [![npm latest version][npm-latest-badge]][npm-latest-url]
+  [![npm dev version][npm-next-badge]][npm-next-url]
+
+  [npm-latest-badge]: https://img.shields.io/npm/v/%40rbxts%2Fcenturion?logo=npm&label=latest&color=green
+  [npm-latest-url]: https://www.npmjs.com/package/@rbxts/centurion/v/latest
+  [npm-next-badge]: https://img.shields.io/npm/v/%40rbxts%2Fcenturion%2Fnext?logo=npm&label=next
+  [npm-next-url]: https://www.npmjs.com/package/@rbxts/centurion/v/next
+  [ci-badge]: https://github.com/paradoxuum/centurion/actions/workflows/ci.yml/badge.svg?branch=main
+  [ci-url]: https://github.com/paradoxuum/centurion/actions/workflows/ci.yml
+
+  <a href="https://centurion.paradoxum.dev/">📖 Documentation</a>
+</div>
+
+<img src="../../public/banner.png" />

package/out/app/centurion-app.d.ts

@@ -0,0 +1,3 @@
+import { ClientAPI } from "@rbxts/centurion";
+import Vide from "@rbxts/vide";
+export declare function CenturionApp(api: ClientAPI): Vide.Node;

package/out/app/centurion-app.lua

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
+local GuiService = _services.GuiService
+local UserInputService = _services.UserInputService
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local derive = _vide.derive
+local _components = TS.import(script, script.Parent.Parent, "components")
+local Suggestions = _components.Suggestions
+local Terminal = _components.Terminal
+local Group = TS.import(script, script.Parent.Parent, "components", "ui", "group").Group
+local Layer = TS.import(script, script.Parent.Parent, "components", "ui", "layer").Layer
+local useAPI = TS.import(script, script.Parent.Parent, "hooks", "use-api").useAPI
+local useAtom = TS.import(script, script.Parent.Parent, "hooks", "use-atom").useAtom
+local useEvent = TS.import(script, script.Parent.Parent, "hooks", "use-event").useEvent
+local _use_px = TS.import(script, script.Parent.Parent, "hooks", "use-px")
+local px = _use_px.px
+local usePx = _use_px.usePx
+local _store = TS.import(script, script.Parent.Parent, "store")
+local interfaceOptions = _store.interfaceOptions
+local interfaceVisible = _store.interfaceVisible
+local mouseOverInterface = _store.mouseOverInterface
+local MOUSE_INPUT_TYPES = {
+	[Enum.UserInputType.MouseButton1] = true,
+	[Enum.UserInputType.MouseButton2] = true,
+	[Enum.UserInputType.Touch] = true,
+}
+local function CenturionApp(api)
+	useAPI(api)
+	usePx()
+	local options = useAtom(interfaceOptions)
+	local visible = useAtom(interfaceVisible)
+	local validKeys = derive(function()
+		local _set = {}
+		for _, _v in options().activationKeys do
+			_set[_v] = true
+		end
+		return _set
+	end)
+	useEvent(UserInputService.InputBegan, function(input, gameProcessed)
+		local _exp = validKeys()
+		local _keyCode = input.KeyCode
+		local _condition = _exp[_keyCode] ~= nil
+		if _condition then
+			_condition = not gameProcessed
+		end
+		if _condition then
+			interfaceVisible(not visible())
+		else
+			local _condition_1 = options().hideOnLostFocus
+			if _condition_1 then
+				local _userInputType = input.UserInputType
+				_condition_1 = MOUSE_INPUT_TYPES[_userInputType] ~= nil
+				if _condition_1 then
+					_condition_1 = not mouseOverInterface()
+				end
+			end
+			if _condition_1 then
+				interfaceVisible(false)
+			end
+		end
+	end)
+	return Vide.jsx(Layer, {
+		displayOrder = function()
+			local _condition = options().displayOrder
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end,
+		visible = visible,
+	}, Vide.jsx(Group, {
+		anchorPoint = function()
+			return options().anchorPoint or Vector2.new(0, 0)
+		end,
+		size = function()
+			return options().size or UDim2.new(0, px(1024), 1, 0)
+		end,
+		position = function()
+			return options().position or UDim2.fromOffset(px(16), px(8) + (GuiService:GetGuiInset()).Y)
+		end,
+	}, Vide.jsx(Terminal), Vide.jsx(Suggestions), Vide.jsx("uilistlayout", {
+		Padding = function()
+			return UDim.new(0, px(8))
+		end,
+		SortOrder = "LayoutOrder",
+	})))
+end
+return {
+	CenturionApp = CenturionApp,
+}

package/out/app/index.d.ts

@@ -1 +1,6 @@
-export * from "./app";
+import { ClientAPI } from "@rbxts/centurion";
+import { InterfaceOptions } from "../types";
+export declare namespace CenturionUI {
+    function updateOptions(options: Partial<InterfaceOptions>): void;
+    function create(options?: Partial<InterfaceOptions>): (api: ClientAPI) => void;
+}

package/out/app/init.lua

@@ -1,7 +1,60 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local exports = {}
-for _k, _v in TS.import(script, script, "app") or {} do
-	exports[_k] = _v
+local Signal = TS.import(script, TS.getModule(script, "@rbxts", "beacon").out).Signal
+local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
+local ContentProvider = _services.ContentProvider
+local Players = _services.Players
+local mount = TS.import(script, TS.getModule(script, "@rbxts", "vide").src).mount
+local DEFAULT_INTERFACE_OPTIONS = TS.import(script, script.Parent, "constants", "options").DEFAULT_INTERFACE_OPTIONS
+local CenturionApp = TS.import(script, script, "centurion-app").CenturionApp
+local CenturionUI = {}
+do
+	local _container = CenturionUI
+	local MAX_PRELOAD_ATTEMPTS = 3
+	local PRELOAD_ATTEMPT_INTERVAL = 3
+	local optionsChanged = Signal.new()
+	local function updateOptions(options)
+		optionsChanged:Fire(options)
+	end
+	_container.updateOptions = updateOptions
+	local function create(options)
+		if options == nil then
+			options = {}
+		end
+		return function(api)
+			-- Attempt to preload font
+			task.spawn(function()
+				local _result = options.font
+				if _result ~= nil then
+					_result = _result.regular
+				end
+				local _condition = _result
+				if _condition == nil then
+					_condition = DEFAULT_INTERFACE_OPTIONS.font.regular
+				end
+				local fontFamily = _condition.Family
+				local attempts = 0
+				while attempts < MAX_PRELOAD_ATTEMPTS do
+					ContentProvider:PreloadAsync({ fontFamily }, function(_, status)
+						if status == Enum.AssetFetchStatus.Success then
+							attempts = MAX_PRELOAD_ATTEMPTS
+						end
+					end)
+					if attempts == MAX_PRELOAD_ATTEMPTS then
+						break
+					end
+					task.wait(PRELOAD_ATTEMPT_INTERVAL)
+					attempts += 1
+				end
+			end)
+			local target = Players.LocalPlayer:WaitForChild("PlayerGui")
+			mount(function()
+				return CenturionApp(api)
+			end, target)
+		end
+	end
+	_container.create = create
 end
-return exports
+return {
+	CenturionUI = CenturionUI,
+}

package/out/components/history/history-line.d.ts

@@ -1,10 +1,10 @@
 import { HistoryEntry } from "@rbxts/centurion";
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import Vide, { Derivable } from "@rbxts/vide";
 interface HistoryLineProps {
     data: HistoryEntry;
-    size?: BindingOrValue<UDim2>;
-    position?: BindingOrValue<UDim2>;
-    order?: BindingOrValue<number>;
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    order?: Derivable<number>;
 }
-export declare function HistoryLine({ data, size, position, order }: HistoryLineProps): JSX.Element;
+export declare function HistoryLine({ data, size, position, order }: HistoryLineProps): Vide.Node;
 export {};

package/out/components/history/history-line.lua

@@ -1,12 +1,12 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useContext = _react.useContext
-local useMemo = _react.useMemo
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local derive = _vide.derive
 local HISTORY_TEXT_SIZE = TS.import(script, script.Parent.Parent.Parent, "constants", "text").HISTORY_TEXT_SIZE
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
 local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
 local Group = TS.import(script, script.Parent.Parent, "ui", "group").Group
 local Outline = TS.import(script, script.Parent.Parent, "ui", "outline").Outline
@@ -17,44 +17,68 @@ local function HistoryLine(_param)
 	local size = _param.size
 	local position = _param.position
 	local order = _param.order
-	local options = useContext(OptionsContext)
-	local px = usePx()
-	local date = useMemo(function()
+	local options = useAtom(interfaceOptions)
+	local date = derive(function()
 		local dateTime = DateTime.fromUnixTimestamp(data.sentAt):FormatLocalTime("LT", "en-us")
 		local dateParts = string.split(dateTime, " ")
 		return `<b>{dateParts[1]}</b> {dateParts[2]}`
-	end, { data })
-	return React.createElement(Group, {
+	end)
+	return Vide.jsx(Group, {
 		size = size,
 		position = position,
 		layoutOrder = order,
-	}, React.createElement(Frame, {
-		backgroundColor = options.palette.surface,
-		size = UDim2.fromOffset(px(76), px(HISTORY_TEXT_SIZE + 4)),
-		cornerRadius = UDim.new(0, px(4)),
-	}, React.createElement(Text, {
+	}, Vide.jsx(Frame, {
+		backgroundColor = function()
+			return options().palette.surface
+		end,
+		size = function()
+			return UDim2.fromOffset(px(76), px(HISTORY_TEXT_SIZE + 4))
+		end,
+		cornerRadius = function()
+			return UDim.new(0, px(4))
+		end,
+	}, Vide.jsx(Text, {
 		size = UDim2.fromScale(1, 1),
 		text = date,
-		textColor = options.palette.text,
-		textSize = px(HISTORY_TEXT_SIZE),
+		textColor = function()
+			return options().palette.text
+		end,
+		textSize = function()
+			return px(HISTORY_TEXT_SIZE)
+		end,
 		richText = true,
-	}), React.createElement(Outline, {
-		innerThickness = px(1),
+	}), Vide.jsx(Outline, {
+		innerThickness = function()
+			return px(1)
+		end,
 		innerTransparency = 0.25,
-		innerColor = if data.success then options.palette.success else options.palette.error,
+		innerColor = function()
+			return if data.success then options().palette.success else options().palette.error
+		end,
 		outerThickness = 0,
-		cornerRadius = UDim.new(0, px(4)),
-	})), React.createElement(TextField, {
+		cornerRadius = function()
+			return UDim.new(0, px(4))
+		end,
+	})), Vide.jsx(TextField, {
 		anchorPoint = Vector2.new(1, 0),
-		size = UDim2.new(1, -px(84), 1, 0),
+		size = function()
+			return UDim2.new(1, -px(84), 1, 0)
+		end,
 		position = UDim2.fromScale(1, 0),
 		text = data.text,
-		textSize = px(HISTORY_TEXT_SIZE),
-		textColor = if data.success then options.palette.text else options.palette.error,
+		textSize = function()
+			return px(HISTORY_TEXT_SIZE)
+		end,
+		textColor = function()
+			local palette = options().palette
+			return if data.success then palette.text else palette.error
+		end,
 		textEditable = false,
 		textXAlignment = "Left",
 		clearTextOnFocus = false,
-		font = options.font.medium,
+		font = function()
+			return options().font.medium
+		end,
 		richText = true,
 	}))
 end

package/out/components/history/history-list.d.ts

@@ -1,15 +1,11 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import { HistoryLineData } from "../../types";
-export interface HistoryData {
-    lines: HistoryLineData[];
-    height: number;
-}
+import Vide, { Derivable } from "@rbxts/vide";
+import { HistoryData } from "../../types";
 interface HistoryListProps {
-    data: HistoryData;
-    size?: BindingOrValue<UDim2>;
-    position?: BindingOrValue<UDim2>;
-    maxHeight?: number;
-    scrollingEnabled?: BindingOrValue<boolean>;
+    data: Derivable<HistoryData>;
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    maxHeight?: Derivable<number>;
+    scrollingEnabled?: Derivable<boolean>;
 }
-export declare function HistoryList({ data, size, position, maxHeight, }: HistoryListProps): JSX.Element;
+export declare function HistoryList({ data, size, position, maxHeight, }: HistoryListProps): Vide.Node;
 export {};

package/out/components/history/history-list.lua

@@ -1,13 +1,14 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local mapBinding = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).mapBinding
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useBinding = _react.useBinding
-local useContext = _react.useContext
-local useEffect = _react.useEffect
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local effect = _vide.effect
+local For = _vide.For
+local read = _vide.read
+local source = _vide.source
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
 local ScrollingFrame = TS.import(script, script.Parent.Parent, "ui", "scrolling-frame").ScrollingFrame
 local HistoryLine = TS.import(script, script.Parent, "history-line").HistoryLine
 local function HistoryList(_param)
@@ -15,45 +16,44 @@ local function HistoryList(_param)
 	local size = _param.size
 	local position = _param.position
 	local maxHeight = _param.maxHeight
-	local px = usePx()
-	local options = useContext(OptionsContext)
-	local scrollingEnabled, setScrollingEnabled = useBinding(false)
-	local canvasSize, setCanvasSize = useBinding(UDim2.new())
-	local canvasPosition, setCanvasPosition = useBinding(Vector2.new())
-	useEffect(function()
-		local height = data.height - px(8)
-		setCanvasSize(UDim2.new(0, 0, 0, height))
-		setCanvasPosition(Vector2.new(0, height))
+	local options = useAtom(interfaceOptions)
+	local scrollingEnabled = source(false)
+	local canvasSize = source(UDim2.new())
+	local canvasPos = source(Vector2.new())
+	effect(function()
+		local height = read(data).height - px(8)
+		canvasSize(UDim2.new(0, 0, 0, height))
+		canvasPos(Vector2.new(0, height))
 		if maxHeight ~= nil then
-			setScrollingEnabled(height > maxHeight)
+			scrollingEnabled(height > read(maxHeight))
 		end
-	end, { data, px })
-	local _exp = data.lines
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#_exp)
-	local _callback = function(data, i)
-		return React.createElement(HistoryLine, {
-			key = `{data.entry.sentAt}-{i}`,
-			size = UDim2.new(1, 0, 0, data.height),
-			data = data.entry,
-		})
-	end
-	for _k, _v in _exp do
-		_newValue[_k] = _callback(_v, _k - 1, _exp)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(ScrollingFrame, {
+	end)
+	return Vide.jsx(ScrollingFrame, {
 		size = size,
 		position = position,
 		canvasSize = canvasSize,
-		canvasPosition = canvasPosition,
-		scrollBarColor = options.palette.subtext,
-		scrollBarThickness = mapBinding(scrollingEnabled, function(val)
-			return if val then 10 else 0
-		end),
+		canvasPosition = canvasPos,
+		scrollBarColor = function()
+			return options().palette.subtext
+		end,
+		scrollBarThickness = function()
+			return if scrollingEnabled() then 10 else 0
+		end,
 		scrollingEnabled = scrollingEnabled,
-	}, _newValue, React.createElement("uilistlayout", {
-		Padding = UDim.new(0, px(8)),
+	}, Vide.jsx(For, {
+		each = function()
+			return read(data).lines
+		end,
+	}, function(line, index)
+		return Vide.jsx(HistoryLine, {
+			size = UDim2.new(1, 0, 0, line.height),
+			data = line.entry,
+			order = index,
+		})
+	end), Vide.jsx("uilistlayout", {
+		Padding = function()
+			return UDim.new(0, px(8))
+		end,
 		SortOrder = "LayoutOrder",
 	}))
 end

package/out/components/index.d.ts

@@ -1 +1,2 @@
+export * from "./suggestions";
 export * from "./terminal";

package/out/components/init.lua

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "suggestions") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "terminal") or {} do
 	exports[_k] = _v
 end

package/out/components/suggestions/badge.d.ts

@@ -1,16 +1,16 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import Vide, { Derivable } from "@rbxts/vide";
 interface BadgeProps {
-    anchorPoint?: BindingOrValue<Vector2>;
-    size?: BindingOrValue<UDim2>;
-    position?: BindingOrValue<UDim2>;
-    color?: BindingOrValue<Color3>;
-    text?: BindingOrValue<string>;
-    textColor?: BindingOrValue<Color3>;
-    textSize?: BindingOrValue<number>;
-    visible?: BindingOrValue<boolean>;
+    anchorPoint?: Derivable<Vector2>;
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    color?: Derivable<Color3>;
+    text?: Derivable<string>;
+    textColor?: Derivable<Color3>;
+    textSize?: Derivable<number>;
+    visible?: Derivable<boolean>;
     onTextBoundsChange?: (textBounds: Vector2) => void;
-    children?: JSX.Element;
+    children?: Vide.Node;
     backgroundTransparency?: number;
 }
-export declare function Badge({ anchorPoint, size, position, color, text, textColor, textSize, visible, onTextBoundsChange, children, backgroundTransparency, }: BadgeProps): JSX.Element;
+export declare function Badge({ anchorPoint, size, position, color, text, textColor, textSize, visible, onTextBoundsChange, children, backgroundTransparency, }: BadgeProps): Vide.Node;
 export {};

package/out/components/suggestions/badge.lua

@@ -1,10 +1,9 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useContext = _react.useContext
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
 local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
 local Text = TS.import(script, script.Parent.Parent, "ui", "text").Text
 local function Badge(_param)
@@ -19,32 +18,27 @@ local function Badge(_param)
 	local onTextBoundsChange = _param.onTextBoundsChange
 	local children = _param.children
 	local backgroundTransparency = _param.backgroundTransparency
-	local options = useContext(OptionsContext)
-	local px = usePx()
-	return React.createElement(Frame, {
+	local options = useAtom(interfaceOptions)
+	return Vide.jsx(Frame, {
 		anchorPoint = anchorPoint,
 		size = size,
 		position = position,
 		backgroundColor = color,
-		cornerRadius = UDim.new(0, px(4)),
+		cornerRadius = function()
+			return UDim.new(0, px(4))
+		end,
 		visible = visible,
 		clipsDescendants = true,
 		backgroundTransparency = backgroundTransparency,
-	}, React.createElement(Text, {
+	}, Vide.jsx(Text, {
 		text = text,
 		textColor = textColor,
 		textSize = textSize,
 		size = UDim2.fromScale(1, 1),
-		font = options.font.bold,
-		change = {
-			TextBounds = function(rbx)
-				local _result = onTextBoundsChange
-				if _result ~= nil then
-					_result = _result(rbx.TextBounds)
-				end
-				return _result
-			end,
-		},
+		font = function()
+			return options().font.bold
+		end,
+		textBoundsChanged = onTextBoundsChange,
 	}), children)
 end
 return {

package/out/components/suggestions/main-suggestion.d.ts

@@ -1,12 +1,10 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import { Binding } from "@rbxts/react";
+import Vide, { Derivable } from "@rbxts/vide";
 import { Suggestion } from "../../types";
 import { SuggestionTextBounds } from "./types";
 export interface MainSuggestionProps {
-    suggestion?: Suggestion;
-    argument: BindingOrValue<boolean>;
-    currentText?: string;
-    size: BindingOrValue<UDim2>;
-    sizes: Binding<SuggestionTextBounds>;
+    suggestion: Derivable<Suggestion | undefined>;
+    currentText?: Derivable<string | undefined>;
+    size: Derivable<UDim2>;
+    sizes: Derivable<SuggestionTextBounds>;
 }
-export declare function MainSuggestion({ suggestion, currentText, size, sizes, argument, }: MainSuggestionProps): JSX.Element;
+export declare function MainSuggestion({ suggestion, currentText, size, sizes, }: MainSuggestionProps): Vide.Node;