xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/AppHeader/AppHeader.spec.js

@@ -1,169 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-const CODE = `
-  <AppHeader>
-    Hello, World!
-  </AppHeader>
-`;
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        yield initTestBed(`<App><AppHeader testId="header" /></App>`);
-        const driver = yield createAppHeaderDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with title prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        const TITLE = "Application Title";
-        yield initTestBed(`<App><AppHeader testId="header" title="${TITLE}" /></App>`);
-        const driver = yield createAppHeaderDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText(TITLE);
-    }));
-    (0, fixtures_1.test)("renders with custom logo content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, page }) {
-        yield initTestBed(`
-      <App>
-        <AppHeader testId="header">
-          <property name="logoTemplate">
-            <Icon name="star" testId="customLogo" />
-          </property>
-        </AppHeader>
-      </App>`);
-        const driver = yield createAppHeaderDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("customLogo")).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has correct accessibility structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
-        // TODO: review these Copilot-created tests
-        yield initTestBed(`<App><AppHeader testId="header" title="Accessible Header" /></App>`);
-        const driver = yield createAppHeaderDriver("header");
-        // AppHeader should have a role of "banner"
-        yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("role", "banner");
-    }));
-    (0, fixtures_1.test)("properly handles focus management", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <AppHeader testId="header">
-          <NavLink testId="headerLink1" to="#">Link 1</NavLink>
-          <NavLink testId="headerLink2" to="#">Link 2</NavLink>
-        </AppHeader>
-      </App>`);
-        // Test that links within the header are keyboard focusable
-        yield page.getByTestId("headerLink1").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("headerLink1")).toBeFocused();
-        // Test tab navigation works between links
-        yield page.keyboard.press("Tab");
-        yield (0, fixtures_1.expect)(page.getByTestId("headerLink2")).toBeFocused();
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies background color theme variable correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
-        const EXPECTED_BG_COLOR = "rgb(0, 240, 0)";
-        yield initTestBed(`<App><AppHeader testId="header" /></App>`, {
-            testThemeVars: {
-                "backgroundColor-AppHeader": EXPECTED_BG_COLOR,
-            },
-        });
-        const driver = yield createAppHeaderDriver("header");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", EXPECTED_BG_COLOR);
-    }));
-    (0, fixtures_1.test)("applies height theme variable correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
-        const EXPECTED_HEIGHT = "80px";
-        yield initTestBed(`<App><AppHeader testId="header" /></App>`, {
-            testThemeVars: {
-                "height-AppHeader": EXPECTED_HEIGHT,
-            },
-        });
-        const driver = yield createAppHeaderDriver("header");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("height", EXPECTED_HEIGHT);
-    }));
-    (0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed(CODE, {
-            testThemeVars: {
-                "border-AppHeader": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAppHeaderDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-    }));
-    (0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed(CODE, {
-            testThemeVars: {
-                "borderLeft-AppHeader": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAppHeaderDriver()).component;
-        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handles undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        yield initTestBed(`<App><AppHeader testId="header" title="{undefined}" /></App>`);
-        const driver = yield createAppHeaderDriver("header");
-        // Component should render without errors when props are undefined
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters in title prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
-        const SPECIAL_TITLE = "应用程序 & Test – Special Character's Test 🚀 ñáéíóú ≤≥∞ «»";
-        yield initTestBed(`<App><AppHeader testId="header" title="${SPECIAL_TITLE}" /></App>`);
-        const driver = yield createAppHeaderDriver("header");
-        // Special characters should display correctly
-        yield (0, fixtures_1.expect)(driver.component).toContainText(SPECIAL_TITLE);
-    }));
-    (0, fixtures_1.test)("handles empty child components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
-        yield initTestBed(`
-      <App>
-        <AppHeader testId="header">
-          <property name="logoTemplate"></property>
-        </AppHeader>
-      </App>
-    `);
-        const driver = yield createAppHeaderDriver("header");
-        // Component should handle empty template slots gracefully
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-});

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -1,72 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppHeader = exports.defaultProps = void 0;
-exports.useLogoUrl = useLogoUrl;
-exports.AppContextAwareAppHeader = AppContextAwareAppHeader;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const AppHeader_module_scss_1 = __importDefault(require("./AppHeader.module.scss"));
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const constants_1 = require("../../components-core/constants");
-const AppContext_1 = require("../../components-core/AppContext");
-const IconNative_1 = require("../../components/Icon/IconNative");
-const LogoNative_1 = require("../../components/Logo/LogoNative");
-const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
-const ButtonNative_1 = require("../../components/Button/ButtonNative");
-const NavLinkNative_1 = require("../../components/NavLink/NavLinkNative");
-const hooks_1 = require("../../components-core/utils/hooks");
-const PART_HAMBURGER = "hamburger";
-exports.defaultProps = {
-    showLogo: true,
-};
-function useLogoUrl() {
-    const { logo, logoLight, logoDark } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
-    const logoUrlByTone = {
-        light: logoLight,
-        dark: logoDark,
-    };
-    const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
-    const baseLogoUrl = (0, ThemeContext_1.useResourceUrl)("resource:logo") || logo;
-    const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
-    return toneLogoUrl || baseLogoUrl;
-}
-const AppHeader = (_a) => {
-    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
-    const { mediaSize } = (0, AppContext_1.useAppContext)();
-    const logoUrl = useLogoUrl();
-    const subNavPanelSlot = (0, react_1.useRef)(null);
-    const effectiveNavPanelVisible = navPanelVisible;
-    const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
-                [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_HAMBURGER, onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
-                        (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));
-};
-exports.AppHeader = AppHeader;
-function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
-    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
-    const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
-    // console.log("APP LAYOUT CONTEXT", appLayoutContext);
-    const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
-    const canRestrictContentWidth = layout !== "vertical-full-header";
-    const effectiveNavPanelVisible = navPanelVisible;
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
-}

package/dist/scripts/src/components/AppState/AppState.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.appStateComponentRenderer = exports.AppStateMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const AppStateNative_1 = require("./AppStateNative");
-const COMP = "AppState";
-exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`AppState` is an invisible component that provides global state management " +
-        "across your entire application. Unlike component variables that are scoped " +
-        "locally, AppState allows any component to access and update shared state " +
-        "without prop drilling.",
-    events: {
-        didUpdate: (0, metadata_helpers_1.d)("This event is fired when the AppState value is updated. The event provides " +
-            "the new state value as its parameter."),
-    },
-    props: {
-        bucket: {
-            description: `This property is the identifier of the bucket to which the \`${COMP}\` instance is bound. ` +
-                `Multiple \`${COMP}\` instances with the same bucket will share the same state object: any ` +
-                `of them updating the state will cause the other instances to view the new, updated state.`,
-            valueType: "string",
-            defaultValue: AppStateNative_1.defaultProps.bucket,
-        },
-        initialValue: {
-            description: `This property contains the initial state value. Though you can use multiple \`${COMP}\`` +
-                `component instances for the same bucket with their \`initialValue\` set, it may result ` +
-                `in faulty app logic. When xmlui instantiates an \`${COMP}\` with an explicit initial ` +
-                `value, that value is immediately merged with the existing state. ` +
-                `The issue may come from the behavior that \`initialValue\` is set (merged) only when a component mounts. ` +
-                `By default, the bucket's initial state is undefined.`,
-        },
-    },
-    apis: {
-        update: {
-            signature: "update(newState: Record<string, any>)",
-            description: "This method updates the application state object bound to the `AppState` instance.",
-            parameters: {
-                newState: "An object that specifies the new state value.",
-            },
-        },
-        appendToList: {
-            signature: "appendToList(key: string, id: any)",
-            description: "This method appends an item to an array in the application state object bound to the" +
-                " `AppState` instance.",
-            parameters: {
-                key: "The key of the array in the state object.",
-                id: "The item to append to the array.",
-            },
-        },
-        removeFromList: {
-            signature: "removeFromList(key: string, id: any)",
-            description: "This method removes an item from an array in the application state object bound to the" +
-                " `AppState` instance.",
-            parameters: {
-                key: "The key of the array in the state object.",
-                id: "The item to remove from the array.",
-            },
-        },
-        listIncludes: {
-            signature: "listIncludes(key: string, id: any)",
-            description: "This method checks if an array in the application state object contains a specific item.",
-            parameters: {
-                key: "The key of the array in the state object.",
-                id: "The item to check for in the array.",
-            },
-        },
-    },
-    nonVisual: true,
-});
-exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi, lookupEventHandler }) => {
-    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi, onDidUpdate: lookupEventHandler("didUpdate") }));
-});

package/dist/scripts/src/components/AppState/AppState.spec.js

@@ -1,292 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("initializes with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" />
-      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
-}));
-(0, fixtures_1.test)("initializes with initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" initialValue="{{ mode: true }}"/>
-      <Text testId="stateValue">|{appState.value.mode}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
-}));
-(0, fixtures_1.test)("initializes with multiple initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" initialValue="{{ mode: true }}"/>
-      <AppState id="appState2" initialValue="{{ otherMode: 123 }}"/>
-      <Text testId="stateValue">|{appState.value.mode}|{appState2.value.otherMode}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|123|");
-}));
-(0, fixtures_1.test)("initializes with provided bucket name and no initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" bucket="settings" />
-      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
-}));
-(0, fixtures_1.test)("initializes with bucket name and initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" bucket="settings" initialValue="{{ mode: true }}"/>
-      <Text testId="stateValue">|{appState.value.mode}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
-}));
-(0, fixtures_1.test)("initializes with bucket name and multiple initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" bucket="settings" initialValue="{{ mode: true }}"/>
-      <AppState id="appState2" bucket="settings" initialValue="{{ otherMode: 123 }}"/>
-      <Text testId="stateValue">|{appState.value.mode}|{appState.value.otherMode}|</Text>
-    </Fragment>
-  `);
-    // AppState should initialize with default bucket and display the correct value
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|123|");
-}));
-(0, fixtures_1.test)("updates state using the update API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" initialValue="{{ counter: 0 }}" />
-      <Button testId="updateBtn" onClick="appState.update({ counter: appState.value.counter + 1 })">
-        Increment
-      </Button>
-      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":0}');
-    // Update state by clicking button
-    yield page.getByTestId("updateBtn").click();
-    // Check updated state
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":1}');
-}));
-(0, fixtures_1.test)("updates state using the update API (using backet name)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" bucket="settings" initialValue="{{ counter: 0 }}" />
-      <Button testId="updateBtn" onClick="appState.update({ counter: appState.value.counter + 1 })">
-        Increment
-      </Button>
-      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":0}');
-    // Update state by clicking button
-    yield page.getByTestId("updateBtn").click();
-    // Check updated state
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":1}');
-}));
-// =============================================================================
-// STATE SHARING TESTS
-// =============================================================================
-(0, fixtures_1.test)("shares state between multiple instances with the default bucket", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState1" initialValue="{{ counter: 0 }}" />
-      <AppState id="appState2" />
-      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
-        Increment
-      </Button>
-      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
-      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state in both instances
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
-    // Update state through first instance
-    yield page.getByTestId("updateBtn").click();
-    // Both instances should reflect the change
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":1}');
-}));
-(0, fixtures_1.test)("shares state between multiple instances with a specific bucket", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState1" initialValue="{{ counter: 0 }}" bucket="bucket1" />
-      <AppState id="appState2" bucket="bucket1" />
-      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
-        Increment
-      </Button>
-      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
-      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state in both instances
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
-    // Update state through first instance
-    yield page.getByTestId("updateBtn").click();
-    // Both instances should reflect the change
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":1}');
-}));
-(0, fixtures_1.test)("maintains separate states for different buckets", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState1" initialValue="{{ counter: 0 }}" bucket="bucket1" />
-      <AppState id="appState2" initialValue="{{ counter: 0 }}" bucket="bucket2" />
-      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
-        Increment
-      </Button>
-      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
-      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state in both instances
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
-    // Update state through first instance
-    yield page.getByTestId("updateBtn").click();
-    // Only the first instance should reflect the change
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("handles undefined initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState ref="appState" initialValue="{undefined}" />
-      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
-    </Fragment>
-  `);
-    // Should not throw error with undefined initialValue
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
-}));
-(0, fixtures_1.test)("handles complex nested state updates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AppState
-        id="appState"
-        initialValue="{{ user: { name: 'John', profile: { age: 30, roles: ['admin'] } } }}"
-      />
-      <Button testId="updateBtn" 
-        onClick="appState.update({ 
-          user: { ...appState.value.user, 
-          profile: { ...appState.value.user.profile, age: 31 } } 
-        })">
-        Update Age
-      </Button>
-      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
-    </Fragment>
-  `);
-    // Check initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"age":30');
-    // Update nested property
-    yield page.getByTestId("updateBtn").click();
-    // Check updated nested property
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"age":31');
-    // Check other properties remain unchanged
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"name":"John"');
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"roles":["admin"]');
-}));
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-(0, fixtures_1.test)("handles multiple rapid state updates efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment var.clickCount="{0}">
-      <AppState id="appState" initialValue="{{ counter: 0 }}" />
-      <Button 
-        testId="updateBtn" 
-        onClick="appState.update({ counter: appState.value.counter + 1 }); clickCount = clickCount + 1;">
-        Increment
-      </Button>
-      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
-      <Text testId="clickCount">{clickCount}</Text>
-    </Fragment>
-  `);
-    // Perform multiple rapid clicks
-    for (let i = 0; i < 5; i++) {
-        yield page.getByTestId("updateBtn").click();
-    }
-    // Verify click count
-    yield (0, fixtures_1.expect)(page.getByTestId("clickCount")).toHaveText("5");
-    // Verify state was updated correctly
-    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('{"counter":5}');
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("integrates with other components that consume app state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    // TODO: review these Copilot-created tests
-    yield initTestBed(`
-    <Fragment>
-      <AppState id="appState" initialValue="{{ theme: 'light', fontSize: 14 }}" />
-      <Fragment var.currentTheme="initial">
-        <Button testId="themeBtn" onClick="currentTheme = appState.value.theme">
-          Get Theme
-        </Button>
-        <Text testId="themeValue">{currentTheme}</Text>
-      </Fragment>
-    </Fragment>
-  `);
-    // Get the theme value by clicking button
-    yield page.getByTestId("themeBtn").click();
-    // Check that the value was correctly retrieved from AppState
-    yield (0, fixtures_1.expect)(page.getByTestId("themeValue")).toHaveText("light");
-}));
-(0, fixtures_1.test)("works correctly when wrapped in conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    // TODO: review these Copilot-created tests
-    yield initTestBed(`
-    <Fragment var.showState="{false}">
-      <Fragment when="{showState}">
-        <Text>AppState is visible</Text>
-        <AppState id="appState" initialValue="{{ visible: true }}" />
-      </Fragment>
-      <Button testId="toggleBtn" onClick="showState = !showState">Toggle AppState</Button>
-      <Text testId="visibilityStatus">{appState.value.visible ? 'Visible' : 'Hidden'}</Text>
-    </Fragment>
-  `);
-    // Initially the AppState component should be rendered
-    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Hidden");
-    // Toggle the component's visibility
-    yield page.getByTestId("toggleBtn").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Visible");
-    // Toggle it back: The AppState component is hidden, but the state is still remain
-    // there. It should work this way.
-    yield page.getByTestId("toggleBtn").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Visible");
-}));