@zthun/romulator-web 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.0](https://github.com/zthun/romulator/compare/v1.1.0...v1.2.0) (2025-06-22)
+
+
+### Features
+
+* systems now show in order of generation and by wheels on the systems page ([09266c3](https://github.com/zthun/romulator/commit/09266c39b1be1ef057c761ae52a2443ee00db17a))
+
+
+
 ## 1.1.0 (2025-06-21)
 
 

package/dist/assets/{index-CtJiKvl7.js → index-weK5iOs6.js}

@@ -1862,7 +1862,7 @@ function _define_property$4$4(obj, key, value) {
     return ZQuadrilateralBuilder;
 }();
 
-/* istanbul ignore next -- @preserve */ var $global = typeof window === "undefined" ? global : window;
+/* v8 ignore start -- @preserve */ /* istanbul ignore next -- @preserve */ var $global = typeof window === "undefined" ? global : window; /* v8 ignore end -- @preserve */
 
 /**
  * A set of parameters that can be used for a string join.
@@ -14187,15 +14187,15 @@ function _ts_generator$t(thisArg, body) {
     return ZDataSourceStatic;
 }();
 
-function _array_like_to_array$4$1(arr, len) {
+function _array_like_to_array$4$2(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4$1(arr) {
+function _array_with_holes$4$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$4$1(arr, i) {
+function _iterable_to_array_limit$4$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -14219,19 +14219,19 @@ function _iterable_to_array_limit$4$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4$1() {
+function _non_iterable_rest$4$2() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$4$1(arr, i) {
-    return _array_with_holes$4$1(arr) || _iterable_to_array_limit$4$1(arr, i) || _unsupported_iterable_to_array$4$1(arr, i) || _non_iterable_rest$4$1();
+function _sliced_to_array$4$2(arr, i) {
+    return _array_with_holes$4$2(arr) || _iterable_to_array_limit$4$2(arr, i) || _unsupported_iterable_to_array$4$2(arr, i) || _non_iterable_rest$4$2();
 }
-function _unsupported_iterable_to_array$4$1(o, minLen) {
+function _unsupported_iterable_to_array$4$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4$2(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4$2(o, minLen);
 }
 /**
  * A type of state where the value is used from the props in the case of them being set.
@@ -14256,7 +14256,7 @@ function _unsupported_iterable_to_array$4$1(o, minLen) {
  *        A tuple where the first item is the current state and the 2nd item is a mutator
  *        method to modify the state.
  */ function useAmbassadorState(current, setCurrent, initial) {
-    var _useState = _sliced_to_array$4$1(reactExports.useState(current || initial), 2), localCurrent = _useState[0], setLocalCurrent = _useState[1];
+    var _useState = _sliced_to_array$4$2(reactExports.useState(current || initial), 2), localCurrent = _useState[0], setLocalCurrent = _useState[1];
     var _current = current === undefined ? localCurrent : current;
     var _setCurrent = function(val) {
         setLocalCurrent(val);
@@ -32418,12 +32418,12 @@ function _ts_generator$6(thisArg, body) {
 }(ZCircusComponentModel);
 _define_property$b(ZIconComponentModel, "Selector", ".ZIcon-root");
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$4$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$4$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _assert_this_initialized$7(self) {
@@ -32515,7 +32515,7 @@ function _inherits$7(subClass, superClass) {
     });
     if (superClass) _set_prototype_of$7(subClass, superClass);
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$4$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -32539,7 +32539,7 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$4$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _possible_constructor_return$7(self, call) {
@@ -32555,20 +32555,20 @@ function _set_prototype_of$7(o, p) {
     };
     return _set_prototype_of$7(o, p);
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$4$1(arr, i) {
+    return _array_with_holes$4$1(arr) || _iterable_to_array_limit$4$1(arr, i) || _unsupported_iterable_to_array$4$1(arr, i) || _non_iterable_rest$4$1();
 }
 function _type_of$7(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$4$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4$1(o, minLen);
 }
 function _is_native_reflect_construct$7() {
     try {
@@ -32707,7 +32707,7 @@ function _ts_generator$5(thisArg, body) {
                                     this.driver.query("svg")
                                 ];
                             case 1:
-                                _ref = _sliced_to_array$4.apply(void 0, [
+                                _ref = _sliced_to_array$4$1.apply(void 0, [
                                     _state.sent(),
                                     1
                                 ]), tag = _ref[0];
@@ -32738,7 +32738,7 @@ function _ts_generator$5(thisArg, body) {
                                     this.driver.query("img")
                                 ];
                             case 1:
-                                _ref = _sliced_to_array$4.apply(void 0, [
+                                _ref = _sliced_to_array$4$1.apply(void 0, [
                                     _state.sent(),
                                     1
                                 ]), tag = _ref[0];
@@ -50945,15 +50945,15 @@ function requireClient () {
 
 var clientExports = requireClient();
 
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$3(arr) {
+function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$4(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -50977,22 +50977,22 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$4(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
 function ZRomulatorMenu() {
-    var _useState = _sliced_to_array$3(reactExports.useState(false), 2), expanded = _useState[0], setExpanded = _useState[1];
+    var _useState = _sliced_to_array$4(reactExports.useState(false), 2), expanded = _useState[0], setExpanded = _useState[1];
     var open = reactExports.useMemo(function() {
         return setExpanded.bind(null, true);
     }, []);
@@ -51667,12 +51667,12 @@ var useSetting = function(id) {
     ]);
 };
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$3(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
@@ -51704,7 +51704,7 @@ function _async_to_generator$1(fn) {
         });
     };
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$3(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -51728,19 +51728,19 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$3() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$3(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
 function _ts_generator$1(thisArg, body) {
     var f, y, t, _ = {
@@ -51835,7 +51835,7 @@ function _ts_generator$1(thisArg, body) {
 }
 function ZRomulatorSettingPage() {
     var id = useParams().id;
-    var _useSetting = _sliced_to_array$2(useSetting(id), 2), setting = _useSetting[0], setSetting = _useSetting[1];
+    var _useSetting = _sliced_to_array$3(useSetting(id), 2), setting = _useSetting[0], setSetting = _useSetting[1];
     var _setting = asStateData(setting);
     var metadata = firstDefined([], _setting === null || _setting === void 0 ? void 0 : _setting.metadata);
     var service = useSettingsService();
@@ -51936,15 +51936,15 @@ function ZRomulatorSettingPage() {
     });
 }
 
-function _array_like_to_array$1(arr, len) {
+function _array_like_to_array$2(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$1(arr) {
+function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$1(arr, i) {
+function _iterable_to_array_limit$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -51968,25 +51968,25 @@ function _iterable_to_array_limit$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$1() {
+function _non_iterable_rest$2() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
 }
-function _unsupported_iterable_to_array$1(o, minLen) {
+function _unsupported_iterable_to_array$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
 function ZRomulatorSettingsPage() {
     var body = useFashionTheme().body;
     var navigate = useNavigate();
     var settings = useSettingsService();
-    var _useState = _sliced_to_array$1(reactExports.useState(new ZDataRequestBuilder().build()), 1), request = _useState[0];
+    var _useState = _sliced_to_array$2(reactExports.useState(new ZDataRequestBuilder().build()), 1), request = _useState[0];
     var renderTile = function(config) {
         return /*#__PURE__*/ jsxRuntimeExports.jsx(ZBox, {
             className: "ZRomulatorSettingsPage-tile",
@@ -52102,26 +52102,43 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _tagged_template_literal$1(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject$1() {
+    var data = _tagged_template_literal$1([
+        "\n    &.ZRomulatorSystemCard-root .ZRomulatorSystemCard-avatar {\n      height: 100%;\n      width: 100%;\n    }\n  "
+    ]);
+    _templateObject$1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 function ZRomulatorSystemAvatarCard(props) {
     var system = props.system, CardProps = props.CardProps;
-    // TODO: Add support for other regions
-    var src = "/systems/us/".concat(system.id, "-256x256.png");
+    var src = "/systems/wheel/".concat(system.id, ".png");
+    var _className = useCss(css$1(_templateObject$1()));
     return /*#__PURE__*/ jsxRuntimeExports.jsx(ZCard, _object_spread_props(_object_spread({
-        className: "ZRomulatorSystemCard-root",
-        TitleProps: {
-            avatar: /*#__PURE__*/ jsxRuntimeExports.jsx(ZIconFontAwesome, {
-                name: "gamepad",
-                width: ZSizeFixed.Small
-            }),
-            heading: system.short,
-            subHeading: system.name
-        },
+        className: cssJoinDefined("ZRomulatorSystemCard-root", _className),
         name: system.id
     }, CardProps), {
         children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZStack, {
+            className: "ZRomulatorSystemCard-avatar",
             orientation: ZOrientation.Horizontal,
             justify: {
-                content: "center"
+                content: "center",
+                items: "center"
+            },
+            align: {
+                content: "center",
+                items: "center"
             },
             children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZImageSource, {
                 src: src,
@@ -52458,15 +52475,15 @@ var useSystem = function(id) {
     ]);
 };
 
-function _array_like_to_array(arr, len) {
+function _array_like_to_array$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit(arr, i) {
+function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -52490,24 +52507,24 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest() {
+function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
 }
-function _unsupported_iterable_to_array(o, minLen) {
+function _unsupported_iterable_to_array$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 function ZRomulatorSystemPage() {
     var id = useParams().id;
     var error = useFashionTheme().error;
-    var _useSystem = _sliced_to_array(useSystem(firstDefined("", id)), 1), system = _useSystem[0];
+    var _useSystem = _sliced_to_array$1(useSystem(firstDefined("", id)), 1), system = _useSystem[0];
     var renderSystemInformation = function() {
         if (isStateLoading(system)) {
             return /*#__PURE__*/ jsxRuntimeExports.jsx(ZSuspenseProgress, {
@@ -52535,38 +52552,143 @@ function ZRomulatorSystemPage() {
     });
 }
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n    & {\n      height: 100%;\n    }\n  "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var DefaultSystemSortOrder = new ZSortBuilder().ascending("generation").ascending("name").build();
+var DefaultSystemRequest = new ZDataRequestBuilder().sort(DefaultSystemSortOrder).build();
 function ZRomulatorSystemsPage() {
-    var secondary = useFashionTheme().secondary;
+    var body = useFashionTheme().body;
     var navigate = useNavigate();
     var source = useSystemsService();
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(ZGridView, {
-        className: "ZRomulatorSystemsPage-root",
-        GridProps: {
-            columns: {
-                xl: "1fr 1fr 1fr 1fr",
-                lg: "1fr 1fr 1fr",
-                md: "1fr 1fr",
-                sm: "1fr"
+    var _useState = _sliced_to_array(reactExports.useState(DefaultSystemRequest), 2), request = _useState[0], setRequest = _useState[1];
+    var tile = useCss(css$1(_templateObject()));
+    var renderTile = function(system) {
+        var wheel = "/systems/wheel/".concat(system.id, ".png");
+        return /*#__PURE__*/ jsxRuntimeExports.jsx(ZBox, {
+            className: "ZRomulatorSystemsPage-tile",
+            fashion: body,
+            interactive: true,
+            cursor: "pointer",
+            padding: ZSizeFixed.Small,
+            "data-name": system.id,
+            onClick: function() {
+                return navigate(system.id);
             },
-            gap: ZSizeFixed.Medium
-        },
-        dataSource: source,
-        renderItem: function(s) {
-            return /*#__PURE__*/ jsxRuntimeExports.jsx(ZRomulatorSystemAvatarCard, {
-                system: s,
-                CardProps: {
-                    footer: /*#__PURE__*/ jsxRuntimeExports.jsx(ZButton, {
-                        fashion: secondary,
-                        label: "More",
-                        name: "more",
-                        width: ZSizeVaried.Full,
-                        onClick: function() {
-                            return navigate("/systems/".concat(s.id));
-                        }
+            children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZStack, {
+                className: cssJoinDefined(tile),
+                gap: ZSizeFixed.Medium,
+                orientation: ZOrientation.Horizontal,
+                justify: {
+                    content: "center"
+                },
+                align: {
+                    items: "center"
+                },
+                children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZContentTitle, {
+                    avatar: /*#__PURE__*/ jsxRuntimeExports.jsx(ZImageSource, {
+                        src: wheel,
+                        height: ZSizeVaried.Full,
+                        width: ZSizeVaried.Full
                     })
-                }
-            }, s.id);
-        }
+                })
+            })
+        }, system.id);
+    };
+    return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, {
+        gap: ZSizeFixed.Medium,
+        children: [
+            /*#__PURE__*/ jsxRuntimeExports.jsx(ZBreadcrumbsLocation, {}),
+            /*#__PURE__*/ jsxRuntimeExports.jsx(ZCard, {
+                width: ZSizeVaried.Full,
+                TitleProps: {
+                    avatar: /*#__PURE__*/ jsxRuntimeExports.jsx(ZIconFontAwesome, {
+                        name: "puzzle-piece",
+                        width: ZSizeFixed.Medium
+                    }),
+                    heading: "Systems",
+                    subHeading: "Your games organized by system"
+                },
+                children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZGridView, {
+                    className: "ZRomulatorSystemsPage-root",
+                    GridProps: {
+                        columns: {
+                            xl: "1fr 1fr 1fr 1fr",
+                            lg: "1fr 1fr 1fr",
+                            md: "1fr 1fr",
+                            sm: "1fr"
+                        },
+                        gap: ZSizeFixed.Medium
+                    },
+                    value: request,
+                    onValueChange: setRequest,
+                    dataSource: source,
+                    renderItem: renderTile
+                })
+            })
+        ]
     });
 }
 

package/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Romulator: Organize your Games</title>
-    <script type="module" crossorigin src="/assets/index-CtJiKvl7.js"></script>
+    <script type="module" crossorigin src="/assets/index-weK5iOs6.js"></script>
   </head>
   <body>
     <div id="zthunworks-romulator"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zthun/romulator-web",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Romulator frontend",
   "author": "Anthony Bonta",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "@vitejs/plugin-react-swc": "^3.10.2",
     "@zthun/cirque": "^7.1.4",
     "@zthun/cirque-du-react": "^7.1.4",
-    "@zthun/fashion-boutique": "^10.1.6",
-    "@zthun/fashion-tailor": "^10.1.6",
-    "@zthun/fashion-theme": "^10.1.6",
-    "@zthun/helpful-fn": "^9.3.0",
-    "@zthun/helpful-query": "^9.3.0",
-    "@zthun/helpful-react": "^9.3.0",
+    "@zthun/fashion-boutique": "^10.2.1",
+    "@zthun/fashion-tailor": "^10.2.1",
+    "@zthun/fashion-theme": "^10.2.1",
+    "@zthun/helpful-fn": "^9.4.0",
+    "@zthun/helpful-query": "^9.4.0",
+    "@zthun/helpful-react": "^9.4.0",
     "@zthun/janitor-build-config": "^19.2.4",
-    "@zthun/romulator-client": "^1.1.0",
+    "@zthun/romulator-client": "^1.2.0",
     "@zthun/webigail-http": "^4.0.3",
     "@zthun/webigail-rest": "^4.0.3",
     "@zthun/webigail-url": "^4.0.3",
@@ -44,5 +44,5 @@
     "vitest": "^3.2.4",
     "vitest-mock-extended": "^3.1.0"
   },
-  "gitHead": "52bd432dd2df0980d450b20de58d7f58c6d0da94"
+  "gitHead": "8e51e1660617d8aea4be5cd3c2d666e2bf673f52"
 }

package/src/systems/system-avatar-card.tsx

@@ -1,12 +1,7 @@
 import type { IZCard } from "@zthun/fashion-boutique";
-import {
-  ZCard,
-  ZIconFontAwesome,
-  ZImageSource,
-  ZStack,
-} from "@zthun/fashion-boutique";
+import { useCss, ZCard, ZImageSource, ZStack } from "@zthun/fashion-boutique";
 import { ZSizeFixed } from "@zthun/fashion-tailor";
-import { ZOrientation } from "@zthun/helpful-fn";
+import { css, cssJoinDefined, ZOrientation } from "@zthun/helpful-fn";
 
 export interface IZRomulatorSystemAvatarCard {
   system: any;
@@ -16,23 +11,26 @@ export interface IZRomulatorSystemAvatarCard {
 
 export function ZRomulatorSystemAvatarCard(props: IZRomulatorSystemAvatarCard) {
   const { system, CardProps } = props;
-  // TODO: Add support for other regions
-  const src = `/systems/us/${system.id}-256x256.png`;
+  const src = `/systems/wheel/${system.id}.png`;
+
+  const _className = useCss(css`
+    &.ZRomulatorSystemCard-root .ZRomulatorSystemCard-avatar {
+      height: 100%;
+      width: 100%;
+    }
+  `);
 
   return (
     <ZCard
-      className="ZRomulatorSystemCard-root"
-      TitleProps={{
-        avatar: <ZIconFontAwesome name="gamepad" width={ZSizeFixed.Small} />,
-        heading: system.short,
-        subHeading: system.name,
-      }}
+      className={cssJoinDefined("ZRomulatorSystemCard-root", _className)}
       name={system.id}
       {...CardProps}
     >
       <ZStack
+        className="ZRomulatorSystemCard-avatar"
         orientation={ZOrientation.Horizontal}
-        justify={{ content: "center" }}
+        justify={{ content: "center", items: "center" }}
+        align={{ content: "center", items: "center" }}
       >
         <ZImageSource src={src} width={ZSizeFixed.ExtraLarge} />
       </ZStack>

package/src/systems/systems-page.cm.mts

@@ -1,10 +1,8 @@
 import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
 import {
-  ZButtonComponentModel,
+  ZBoxComponentModel,
   ZGridViewComponentModel,
 } from "@zthun/fashion-boutique";
-import { required } from "@zthun/helpful-fn";
-import { ZRomulatorSystemAvatarCardComponentModel } from "./system-avatar-card.cm.mjs";
 
 export class ZRomulatorSystemsPageComponentModel extends ZCircusComponentModel {
   public static readonly Selector = ".ZRomulatorSystemsPage-root";
@@ -13,27 +11,17 @@ export class ZRomulatorSystemsPageComponentModel extends ZCircusComponentModel {
     return Promise.resolve(new ZGridViewComponentModel(this.driver));
   }
 
-  public async system(
-    id: string,
-  ): Promise<ZRomulatorSystemAvatarCardComponentModel | null> {
+  public async system(id: string): Promise<ZBoxComponentModel | null> {
     const grid = await this.grid();
-    return ZCircusBy.optional(
-      grid.driver,
-      ZRomulatorSystemAvatarCardComponentModel,
-      id,
-    );
+    return ZCircusBy.optional(grid.driver, ZBoxComponentModel, id);
   }
 
-  public async systems(): Promise<ZRomulatorSystemAvatarCardComponentModel[]> {
+  public async systems(): Promise<ZBoxComponentModel[]> {
     const grid = await this.grid();
-    return ZCircusBy.all(grid.driver, ZRomulatorSystemAvatarCardComponentModel);
-  }
-
-  public async more(id: string): Promise<ZButtonComponentModel> {
-    const system = await this.system(id);
-    const card = await system?.card();
-    const footer = await required(card?.footer());
-
-    return ZCircusBy.first(footer, ZButtonComponentModel, "more");
+    return ZCircusBy.all(
+      grid.driver,
+      ZBoxComponentModel,
+      ".ZRomulatorSystemsPage-tile",
+    );
   }
 }

package/src/systems/systems-page.spec.tsx

@@ -60,22 +60,22 @@ describe("ZRomulatorSystemsPage", () => {
     const expected = systems.map((s) => s.id);
 
     // Act.
-    const cards = await target.systems();
-    const actual = await Promise.all(cards.map((s) => s.id()));
-
+    const tiles = await target.systems();
+    const ids = tiles.map((s) => s.driver.attribute("data-name"));
+    const actual = await Promise.all(ids);
     // Assert.
     expect(actual).toEqual(expected);
   });
 
-  it("should navigate me to the system page when I click on the navigate button", async () => {
+  it("should navigate me to the system page when I click on one", async () => {
     // Arrange.
     const target = await createTestTarget();
 
     // Act.
-    const more = await target.more(nes.id);
-    await more.click();
+    const system = await target.system(nes.id);
+    await system?.click();
 
     // Assert.
-    expect(_history.location.pathname).toEqual(`/systems/${nes.id}`);
+    expect(_history.location.pathname).toEqual(`/${nes.id}`);
   });
 });

package/src/systems/systems-page.tsx

@@ -1,48 +1,108 @@
 import {
+  useCss,
   useFashionTheme,
   useNavigate,
-  ZButton,
+  ZBox,
+  ZBreadcrumbsLocation,
+  ZCard,
+  ZContentTitle,
   ZGridView,
+  ZIconFontAwesome,
+  ZImageSource,
+  ZStack,
 } from "@zthun/fashion-boutique";
 import { ZSizeFixed, ZSizeVaried } from "@zthun/fashion-tailor";
-import { ZRomulatorSystemAvatarCard } from "./system-avatar-card.js";
+import { css, cssJoinDefined, ZOrientation } from "@zthun/helpful-fn";
+import { ZDataRequestBuilder, ZSortBuilder } from "@zthun/helpful-query";
+import type { IZRomulatorSystem } from "@zthun/romulator-client";
+import { useState } from "react";
 import { useSystemsService } from "./systems-service.mjs";
 
+const DefaultSystemSortOrder = new ZSortBuilder()
+  .ascending("generation")
+  .ascending("name")
+  .build();
+
+const DefaultSystemRequest = new ZDataRequestBuilder()
+  .sort(DefaultSystemSortOrder)
+  .build();
+
 export function ZRomulatorSystemsPage() {
-  const { secondary } = useFashionTheme();
+  const { body } = useFashionTheme();
   const navigate = useNavigate();
   const source = useSystemsService();
+  const [request, setRequest] = useState(DefaultSystemRequest);
 
-  return (
-    <ZGridView
-      className="ZRomulatorSystemsPage-root"
-      GridProps={{
-        columns: {
-          xl: "1fr 1fr 1fr 1fr",
-          lg: "1fr 1fr 1fr",
-          md: "1fr 1fr",
-          sm: "1fr",
-        },
-        gap: ZSizeFixed.Medium,
-      }}
-      dataSource={source}
-      renderItem={(s) => (
-        <ZRomulatorSystemAvatarCard
-          key={s.id}
-          system={s}
-          CardProps={{
-            footer: (
-              <ZButton
-                fashion={secondary}
-                label="More"
-                name="more"
+  const tile = useCss(css`
+    & {
+      height: 100%;
+    }
+  `);
+
+  const renderTile = (system: IZRomulatorSystem) => {
+    const wheel = `/systems/wheel/${system.id}.png`;
+    return (
+      <ZBox
+        className="ZRomulatorSystemsPage-tile"
+        fashion={body}
+        interactive
+        key={system.id}
+        cursor="pointer"
+        padding={ZSizeFixed.Small}
+        data-name={system.id}
+        onClick={() => navigate(system.id)}
+      >
+        <ZStack
+          className={cssJoinDefined(tile)}
+          gap={ZSizeFixed.Medium}
+          orientation={ZOrientation.Horizontal}
+          justify={{ content: "center" }}
+          align={{ items: "center" }}
+        >
+          <ZContentTitle
+            avatar={
+              <ZImageSource
+                src={wheel}
+                height={ZSizeVaried.Full}
                 width={ZSizeVaried.Full}
-                onClick={() => navigate(`/systems/${s.id}`)}
               />
-            ),
+            }
+          />
+        </ZStack>
+      </ZBox>
+    );
+  };
+
+  return (
+    <ZStack gap={ZSizeFixed.Medium}>
+      <ZBreadcrumbsLocation />
+      <ZCard
+        width={ZSizeVaried.Full}
+        TitleProps={{
+          avatar: (
+            <ZIconFontAwesome name="puzzle-piece" width={ZSizeFixed.Medium} />
+          ),
+          heading: "Systems",
+          subHeading: "Your games organized by system",
+        }}
+      >
+        <ZGridView
+          className="ZRomulatorSystemsPage-root"
+          GridProps={{
+            columns: {
+              xl: "1fr 1fr 1fr 1fr",
+              lg: "1fr 1fr 1fr",
+              md: "1fr 1fr",
+              sm: "1fr",
+            },
+            gap: ZSizeFixed.Medium,
           }}
+          value={request}
+          onValueChange={setRequest}
+          dataSource={source}
+          renderItem={renderTile}
         />
-      )}
-    />
+      </ZCard>
+    </ZStack>
   );
 }