/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", h2: "h2", a: "a", span: "span", ul: "ul", li: "li", strong: "strong", code: "code", hr: "hr", pre: "pre", ol: "ol" }, _provideComponents(), props.components), {BackgroundInfo, CollapseDropdown} = _components; if (!BackgroundInfo) _missingMdxReference("BackgroundInfo", true); if (!CollapseDropdown) _missingMdxReference("CollapseDropdown", true); return _jsxs(_Fragment, { children: [_jsx(BackgroundInfo, { title: "Overview: Goal & Key Challenges", children: _jsx(_components.p, { children: "Building an embedded terminal UI with macOS-style window controls in Next.js (App Router). Key challenge: managing shared window state across components/routes without hydration errors using React Context." }) }), "\n", _jsxs(_components.h2, { id: "1-component-architecture", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#1-component-architecture", children: _jsx(_components.span, { className: "icon icon-link" }) }), "1: Component Architecture"] }), "\n", _jsx(_components.p, { children: "Key components and their roles:" }), "\n", _jsx(CollapseDropdown, { summary: "1.1: Global State Provider", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role" }), ": Central React Context placed in the root layout (", _jsx(_components.code, { children: "app/layout.tsx" }), ") to manage state for all registered window components."] }), "\n"] }) }), "\n", _jsx(CollapseDropdown, { summary: "1.2: Feature Client Components", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role" }), ": Represent features/pages (e.g., Blog) designed to behave like independent, controllable windows."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Integration" }), ": Use a custom ", _jsx(_components.code, { children: "useRegisteredWindowState" }), " hook to connect to the global provider, accessing their specific state (", _jsx(_components.code, { children: "windowState" }), ") and control functions (", _jsx(_components.code, { children: "minimize" }), ", ", _jsx(_components.code, { children: "maximize" }), ", etc.)."] }), "\n"] }) }), "\n", _jsx(CollapseDropdown, { summary: "1.3: Floating Restore Buttons", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role" }), ": Reads the global state to display buttons allowing users to restore minimized or closed windows."] }), "\n"] }) }), "\n", _jsx(CollapseDropdown, { summary: "1.4: Terminal Component", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role" }), ": The interactive terminal UI itself, also registered as a window via the ", _jsx(_components.code, { children: "useRegisteredWindowState" }), " hook for consistent control."] }), "\n"] }) }), "\n", _jsx(CollapseDropdown, { summary: "1.5: Window Control Buttons", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role" }), ": Provides standard macOS-style UI buttons (close/minimize/maximize)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Integration" }), ": A simple UI component accepting ", _jsx(_components.code, { children: "onClose" }), ", ", _jsx(_components.code, { children: "onMinimize" }), ", ", _jsx(_components.code, { children: "onMaximize" }), " callbacks provided by its parent window component (which obtains them from the registration hook)."] }), "\n"] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "2-window-state-management", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#2-window-state-management", children: _jsx(_components.span, { className: "icon icon-link" }) }), "2: Window State Management"] }), "\n", _jsx(_components.p, { children: "Managing multiple window states across pages required a global React Context pattern to avoid hydration issues common with local state management." }), "\n", _jsx(BackgroundInfo, { title: "Problem: Local State & Hydration Conflicts", children: _jsxs(_components.p, { children: ["Component-local state (even with ", _jsx(_components.code, { children: "localStorage" }), ") caused server-client UI mismatches (hydration errors) and was complex for multiple windows. Solution: A global registry via React Context."] }) }), "\n", _jsx(CollapseDropdown, { summary: "2.1: Global Context Details", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Uses ", _jsx(_components.code, { children: "React.createContext" }), " to define a central store."] }), "\n", _jsxs(_components.li, { children: ["Holds a record mapping unique window IDs to their information (", _jsx(_components.code, { children: "id" }), ", ", _jsx(_components.code, { children: "icon" }), ", ", _jsx(_components.code, { children: "title" }), ", ", _jsx(_components.code, { children: "state" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Provides access to the shared ", _jsx(_components.code, { children: "windows" }), " state object and management functions (", _jsx(_components.code, { children: "registerWindow" }), ", ", _jsx(_components.code, { children: "setWindowState" }), ", etc.)."] }), "\n"] }) }), "\n", _jsxs(CollapseDropdown, { summary: "2.2: Provider Implementation", children: [_jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The Context Provider component wraps the ", _jsx(_components.code, { children: "RootLayout" }), " in ", _jsx(_components.code, { children: "app/layout.tsx" }), ", making the state available application-wide."] }), "\n", _jsxs(_components.li, { children: ["Internally uses ", _jsx(_components.code, { children: "useState" }), " to hold and update the central ", _jsx(_components.code, { children: "windows" }), " record."] }), "\n", _jsxs(_components.li, { children: ["A client-side ", _jsx(_components.code, { children: "useEffect" }), " hook conditionally adds CSS classes (", _jsx(_components.code, { children: "window-maximized" }), ", ", _jsx(_components.code, { children: "window-minimized" }), ") to the ", _jsx(_components.code, { children: "" }), " tag based on the overall window state. This allows global CSS to adjust shared layout elements (like headers) without complex prop drilling."] }), "\n"] }), _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx", children: [_jsx(_components.span, { className: "token comment", children: "// Simplified app/layout.tsx structure" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "GlobalWindowRegistryProvider" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"@/lib/context/GlobalWindowRegistryContext\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token comment", children: "// ... other imports" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "RootLayout" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " children ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "lang" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "en", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Providers" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "GlobalWindowRegistryProvider" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* ... layout elements ... */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "main"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* Registered components like ClientTerminal */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "FloatingRestoreButtons" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) })] }), "\n", _jsx(CollapseDropdown, { summary: "2.3: Registration Hook", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose" }), ": Allows individual components (acting as windows) to register with the global context, retrieve their current state, and receive functions to modify that state."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Mechanism" }), ": A custom hook that encapsulates the logic for consuming the context and handling the registration/unregistration lifecycle automatically using ", _jsx(_components.code, { children: "useEffect" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns" }), ": Provides the component with its specific ", _jsx(_components.code, { children: "windowState" }), ", memoized action functions (", _jsx(_components.code, { children: "minimize" }), ", ", _jsx(_components.code, { children: "maximize" }), ", ", _jsx(_components.code, { children: "close" }), ", ", _jsx(_components.code, { children: "restore" }), "), and a required ", _jsx(_components.code, { children: "isRegistered" }), " boolean flag to ensure rendering only occurs safely after client-side hydration and registration is complete."] }), "\n"] }) }), "\n", _jsx(BackgroundInfo, { title: "Key Implementation Points", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Hydration Safety" }), ": Always check the ", _jsx(_components.code, { children: "isRegistered" }), " flag from the hook before rendering state-dependent UI to prevent server/client mismatches. Render default/loading state until ", _jsx(_components.code, { children: "isRegistered" }), " is ", _jsx(_components.code, { children: "true" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Layout Control" }), ": Each window component is responsible for its own layout styling (e.g., ", _jsx(_components.code, { children: "position: fixed" }), ", dimensions, z-index) based on its ", _jsx(_components.code, { children: "windowState" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Minimized/Closed State" }), ": When minimized or closed, components typically render ", _jsx(_components.code, { children: "null" }), ". The separate ", _jsx(_components.code, { children: "FloatingRestoreButtons" }), " component handles the UI for restoring them."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Targeted Global CSS" }), ": Use ", _jsx(_components.code, { children: "body.window-maximized" }), " / ", _jsx(_components.code, { children: "body.window-minimized" }), " classes sparingly to adjust shared elements (like site headers) without interfering with individual window component layouts."] }), "\n"] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "3-serverclient-data-flow", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#3-serverclient-data-flow", children: _jsx(_components.span, { className: "icon icon-link" }) }), "3: Server/Client Data Flow"] }), "\n", _jsx(_components.p, { children: "Passing non-serializable data (like JSX elements or functions) directly from Server Components to Client Components causes errors in Next.js." }), "\n", _jsx(BackgroundInfo, { title: "Problem: Non-Serializable Data Across Boundaries", children: _jsxs(_components.p, { children: ["Data crossing the Server-Client boundary must be JSON-serializable. Complex objects, functions, or modules required on the server (like ", _jsx(_components.code, { children: "fs" }), ") cannot be passed directly, leading to client-side errors or broken Hot Module Replacement (HMR)."] }) }), "\n", _jsxs(CollapseDropdown, { summary: "Solution: Keep Server Logic Server-Side", children: [_jsx(_components.p, { children: "The reliable pattern involves strict separation:" }), _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Isolate Server Logic" }), ": Create utility functions marked with ", _jsx(_components.code, { children: "\"use server\"" }), " or using ", _jsx(_components.code, { children: "import \"server-only\"" }), ". These handle server-specific tasks (DB access, API calls, file reads) and process data into simple, serializable formats (plain objects/arrays)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Orchestrate in Server Component" }), ": The main Server Component (e.g., a page) calls these utilities, gathers the necessary data, and ensures it's fully processed into a serializable structure."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Pass Clean Data" }), ": Pass only the processed, serializable data as props to the top-level Client Component wrapper for the feature."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Render on Client" }), ": The Client Component receives the clean data and uses it to render its UI sub-components.\nThis prevents server-only code or non-serializable data from attempting to run on or be sent to the client."] }), "\n"] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "4-auto-scrolling-terminal", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#4-auto-scrolling-terminal", children: _jsx(_components.span, { className: "icon icon-link" }) }), "4: Auto-Scrolling Terminal"] }), "\n", _jsx(_components.p, { children: "Implemented using standard React hooks:" }), "\n", _jsx(CollapseDropdown, { summary: "How it Works", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useRef" }), " obtains a direct reference to the terminal's scrollable container element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect" }), " monitors changes in the command history (managed in a separate ", _jsx(_components.code, { children: "TerminalContext" }), ")."] }), "\n", _jsxs(_components.li, { children: ["When history updates, the effect programmatically sets the container's ", _jsx(_components.code, { children: "scrollTop" }), " to its ", _jsx(_components.code, { children: "scrollHeight" }), ", ensuring the latest output is always visible."] }), "\n"] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "5-command-handling", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#5-command-handling", children: _jsx(_components.span, { className: "icon icon-link" }) }), "5: Command Handling"] }), "\n", _jsx(_components.p, { children: "Command processing logic is centralized for maintainability:" }), "\n", _jsx(CollapseDropdown, { summary: "How Commands Are Processed", children: _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "User input is captured by the terminal component." }), "\n", _jsxs(_components.li, { children: ["A ", _jsx(_components.code, { children: "useTerminal" }), " hook takes the submitted command string."] }), "\n", _jsxs(_components.li, { children: ["The hook passes the command to a central, asynchronous ", _jsx(_components.code, { children: "handleCommand" }), " function."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "handleCommand" }), " is responsible for:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parsing the input (command and arguments)." }), "\n", _jsx(_components.li, { children: "Matching against predefined commands or known application routes." }), "\n", _jsxs(_components.li, { children: ["Performing the appropriate action—returning formatted text output, calling separate search logic, using Next.js's ", _jsx(_components.code, { children: "useRouter" }), " for client-side navigation, or returning structured error messages."] }), "\n"] }), "\n"] }), "\n"] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { id: "6-syntax-highlighted-code-blocks-with-prismjs", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#6-syntax-highlighted-code-blocks-with-prismjs", children: _jsx(_components.span, { className: "icon icon-link" }) }), "6: Syntax-Highlighted Code Blocks with PrismJS"] }), "\n", _jsx(_components.p, { children: "Creating responsive, syntax-highlighted code blocks with proper dark mode support required solving several CSS conflicts." }), "\n", _jsx(BackgroundInfo, { title: "Challenge: Dark Mode Compatibility", children: _jsx(_components.p, { children: "PrismJS's default themes assume a fixed color scheme. Making syntax highlighting work in both light and dark modes while maintaining consistent UI required custom CSS overrides and DOM structure simplification." }) }), "\n", _jsxs(CollapseDropdown, { summary: "6.1: Implementation Approach", children: [_jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Base Implementation" }), ": PrismJS handles the syntax tokenization and adds language-specific classes to code elements."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Theme Integration" }), ": Import a basic PrismJS theme in the root layout:"] }), "\n"] }), _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx", children: [_jsx(_components.span, { className: "token comment", children: "// app/layout.tsx" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./globals.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./code-blocks.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'../components/ui/code-block/prism-syntax-highlighting/prism.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component Structure" }), ": A custom ", _jsx(_components.code, { children: "CodeBlock" }), " React component provides the macOS-style window UI around the pre/code elements."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Custom Theme Overrides" }), ": Dark mode specific styles in ", _jsx(_components.code, { children: "code-blocks.css" }), " override PrismJS's default theme for dark appearances."] }), "\n"] })] }), "\n", _jsxs(CollapseDropdown, { summary: "6.2: Solving Dark Mode Text Highlighting", children: [_jsx(_components.p, { children: "One persistent issue was text shadow/highlighting in dark mode. PrismJS's default styling includes text shadows and background colors that conflicted with our dark theme." }), _jsx(_components.p, { children: "The solution required multiple CSS overrides:" }), _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css", children: [_jsx(_components.span, { className: "token comment", children: "/* Force remove backgrounds and text shadows from ALL tokens */" }), "\n", _jsxs(_components.span, { className: "token selector", children: ["pre", _jsxs(_components.span, { className: "token attribute", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsx(_components.span, { className: "token operator", children: "*=" }), _jsx(_components.span, { className: "token attr-value", children: "\"language-\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" })] }), " *", _jsx(_components.span, { className: "token punctuation", children: "," }), "\ncode", _jsxs(_components.span, { className: "token attribute", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsx(_components.span, { className: "token operator", children: "*=" }), _jsx(_components.span, { className: "token attr-value", children: "\"language-\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" })] }), " *"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token property", children: "text-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "transparent" }), " ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token comment", children: "/* Override PrismJS token styles for dark mode */" }), "\n.dark .token.comment", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n.dark .token.string", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n.dark .token.function ", _jsx(_components.span, { className: "token comment", children: "/* etc... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " #specifc-color", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* Color-only syntax highlighting */" }), "\n ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "transparent" }), " ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), _jsx(_components.p, { children: "These rules ensure tokens are styled with color only, not backgrounds or shadows." })] }), "\n", _jsxs(CollapseDropdown, { summary: "6.3: Fixing Rounded Corner Rendering", children: [_jsx(_components.p, { children: "Another challenge was border radius rendering artifacts. The complex nesting of elements with borders and backgrounds created visual glitches at the rounded corners." }), _jsx(_components.p, { children: "The solution was to simplify the DOM structure:" }), _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "rounded-lg overflow-hidden", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* Single container with rounded corners */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* Header */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "rounded-t-lg", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "WindowControls" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token comment", children: "/* Content */" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "pre"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }), _jsx(_components.p, { children: "This flatter structure avoids border conflicts and ensures clean rounded corners." })] }), "\n", _jsxs(CollapseDropdown, { summary: "6.4: CSS @apply Issues", children: [_jsxs(_components.p, { children: ["Using Tailwind's ", _jsx(_components.code, { children: "@apply" }), " directive in global CSS caused linting errors. Replace:"] }), _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css", children: [_jsx(_components.span, { className: "token comment", children: "/* Problematic */" }), "\n", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token pseudo-class", children: ":not" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pre", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token combinator", children: ">" }), " code"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsxs(_components.span, { className: "token atrule", children: [_jsx(_components.span, { className: "token rule", children: "@apply" }), " bg-gray-100 ", _jsx(_components.span, { className: "token property", children: "dark" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "bg-gray-800 px-1.5 py-0.5 rounded text-sm font-medium", _jsx(_components.span, { className: "token punctuation", children: ";" })] }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token comment", children: "/* Solution - standard CSS */" }), "\n", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token pseudo-class", children: ":not" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pre", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token combinator", children: ">" }), " code"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f3f4f6" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* bg-gray-100 */" }), "\n ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#111827" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* text-gray-900 */" }), "\n ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.125" }), _jsx(_components.span, { className: "token unit", children: "rem" }), " ", _jsx(_components.span, { className: "token number", children: "0.375" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* px-1.5 py-0.5 */" }), "\n ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.25" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* rounded */" }), "\n ", _jsx(_components.span, { className: "token comment", children: "/* etc. */" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".dark" }), " ", _jsx(_components.span, { className: "token pseudo-class", children: ":not" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pre", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token combinator", children: ">" }), " code"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#1f2937" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* dark:bg-gray-800 */" }), "\n ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f9fafb" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* dark:text-gray-50 */" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(BackgroundInfo, { title: "Summary", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Global State" }), ": React Context in the root layout is effective for managing shared UI state (like window status) across different routes in the Next.js App Router."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Hydration" }), ": A custom registration hook (like ", _jsx(_components.code, { children: "useRegisteredWindowState" }), ") combined with an ", _jsx(_components.code, { children: "isRegistered" }), " flag helps safely manage client-side state dependent on context, preventing hydration errors."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Data Flow" }), ": Maintain strict separation between server-side data fetching/processing and client-side rendering. Pass only serializable data from Server to Client Components."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Syntax Highlighting" }), ": When integrating libraries like PrismJS, focus on simplifying DOM structure and providing explicit theme overrides for dark mode compatibility."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS Complexity" }), ": Use ", _jsx(_components.code, { children: "!important" }), " flags judiciously when working with third-party CSS that conflicts with your theme. Prefer explicit selectors over complex nesting that can lead to specificity wars."] }), "\n"] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }