CreatorTrack UI Kit¶

URL: https://mkdocs.justinsforge.com/memory/general/reference_suite_ui_kit/

CANON UPDATE (2026-06-18) , renamed to CreatorTrack. This is the CreatorTrack shared UI kit (product formerly "The Suite"/"Workspace"), built and previewed at dev.creatortrack.ai. It is step 1 of the build order: reusable UI components first (one shared kit, revise a token to retheme all), then the Notion-class page framework as the foundation, then apps that plug into that framework. The data layer formerly "lifeos" is now the core database (core). Full canon (with tech-stack overview): creator-suite-vision-strategy.

The shared design system for forge-suite (the Next/React Suite: finance + future Clips/Fitness/Workspace modules). Created 2026-06-17. Formalizes the workspace.justinsforge.com Notion look so every module is consistent and we revise once.

What it is¶

Tokens: app/theme.css , the :root CSS variables (palette, font, radii, spacing), sourced from the workspace design ([[reference_workspace_palette]] + [[reference_workspace_font]]; the Flask source is forge_workspace_ui_base.py :root). Imported in app/layout.tsx, so it's global to ALL routes. This is the single retheme knob , edit a token, every module re-themes. Use var(--token), never hardcode a hex.
Primitives: components/ui/index.tsx (+ components/ui/icons.tsx). Built only on tokens. Import from @/components/ui; never hand-roll per-module styles.
STUDIO: /studio (renamed from /kit 2026-06-18; /kit now 307-redirects in via app/kit/page.tsx). Studio is the internal design+build tool ("the tool to build the tool"), merging the 3 pro surfaces: component explorer + token/theme editor + (toward) a visual page builder. Shell app/studio/page.tsx = topbar tabs, floating Theme dock mounted once across all tabs. Tabs: Components (components/studio/ComponentsGallery.tsx, the old /kit catalog + playgrounds), Preview (components/studio/PreviewTab.tsx, renders any real route in a phone 390 / tablet 834 / desktop device , route presets + reload + open), Inspect (stub, NEXT: click element on live page -> its computed spacing/font/color + matching tokens open in the dock; iframe is same-origin so parent can reach <code>contentDocument</code>), Pages (stub, later: drag components onto a canvas -> node tree; evaluate Puck/Craft.js). Direction set by Justin: grow /kit into a Shopify-editor-class studio. Verified 2026-06-18: tsc clean, /studio 200, /kit 307. <strong>Live design workbench (built 2026-06-18):</strong></li> <li><strong>Token store</strong> (<code>components/kit/token-store.tsx</code>, <code>TokenStudioProvider</code>/<code>useTokenStudio</code>, 2026-06-18): shared state; Studio <strong>topbar</strong> drives Save / Undo / Redo / last-updated. <strong>STAGED + IMPERATIVE model (revised 2026-06-18):</strong> dragging must NOT re-render the tree (that flashed like a page refresh). Two contexts: <code>useTokenStudio()</code> = STABLE api (<code>getValue</code>/<code>setValue</code>/<code>registerScope</code>/save/undo/redo); <code>useTokenStudioState()</code> = volatile (dirtyCount/canUndo/lastSaved) consumed ONLY by the topbar. <code>setValue</code> applies edits IMPERATIVELY (CSS vars) onto registered preview scopes , <code>Showcase</code> registers its preview pane, <code>PreviewTab</code> registers the iframe's documentElement (same-origin) , so no React re-render per drag frame and Studio chrome never changes. Each control keeps LOCAL state. Edits sync over a <strong>BroadcastChannel</strong> (<code>creatortrack-studio-tokens</code>) so a 2nd tab/screen (Preview) follows live. <strong>Save</strong> writes theme.css → dev HMR → global. Undo/redo = debounced history. The Theme sidebar (<code>TokenPanel.tsx</code>, app variant) toggles via a <strong>gear icon</strong> in the Studio topbar (between the title and the Components tab).</li> <li><strong>Level 1 token playground</strong> (<code>components/kit/TokenPanel.tsx</code> + manifest <code>lib/kit-tokens.ts</code>): a slider/color-picker per token; editing calls <code>document.documentElement.style.setProperty</code> so the WHOLE app re-themes live (no rebuild, no LLM round-trip). <strong>Save</strong> (in the topbar) POSTs dirty tokens to <code>app/api/kit/tokens/route.ts</code> which rewrites only the matched <code>--name: value;</code> lines IN PLACE in <code>app/theme.css</code> (inline comments preserved). Dev-only (403 in prod), allowlist + value sanitization (rejects braces/semicolons/comment marks, i.e. CSS injection). <strong>Reset</strong> drops live inline overrides back to the saved file. Add a tunable token = one entry in the manifest.</li> <li><strong>Level 2 per-component controls</strong> (<code>components/kit/Playground.tsx</code>): schema-driven controls beside a live preview; toggle a component's props with no code edit. Control types: enum/boolean/text/<strong>range</strong> (slider+number for size/margin/padding/radius). Wire a component by adding a <code>Control[]</code> + a <code>render(props)</code>.</li> <li><strong><code>Showcase</code> layout</strong> (<code>components/studio/Showcase.tsx</code>, 2026-06-18): the reusable "Preview + Controls" frame , <strong>two SEPARATE rounded panels with a gap</strong>: 2/3 live preview (left) + 1/3 controls (right). Controls panel has a <strong>tab bar</strong> (Controls tab; <code>controlTabs</code> prop for more later). <code>Playground</code> renders through it; each component's controls now include <strong>size/padding/radius/width sliders</strong> (range control type), applied via inline style. Components shown: Button/Pill/Tag/Badge/Avatar/Input/Checkbox/Switch/ NavItem/Sidebar; reference galleries (palette/menus/icons/scrollbar) full-width below.</li> <li><strong>NavItem <code>size</code> prop</strong> (md|lg, 2026-06-18): lg = large inline-menu row (42px, 15px, icon 19). The <strong>app sidebar variant</strong> = a floating MENU-style panel (<code>.ct-sidebar--app</code>: <code>--card</code> bg, border, <code>--r-lg</code> rounding, <code>--elev-2</code> shadow, 12px inset from edges) paired with lg NavItems; main stays the compact Notion page-tree.</li> <li><strong>GOTCHA fixed 2026-06-18:</strong> <code>.ct-sidebar*</code> (+ <code>.ct-scroll</code>) MUST live in global <code>app/theme.css</code> (imported by the root layout), NOT in <code>app/(suite)/workspace.css</code>. workspace.css only loads inside the <code>(suite)</code> route group, so <code>/studio</code> (outside it) got NO sidebar styles , the Theme settings app-sidebar rendered unstyled. Moved to theme.css; verified <code>.ct-sidebar--app</code> now ships in the /studio route CSS.</li> <li><strong>Token-bound controls</strong> (2026-06-18): a Playground <code>Control</code> may set <code>token: "--name"</code>. Bound controls read/write the <strong>token store</strong> (not local state), so dragging them counts as a tracked change (unsaved count, undo/redo, Save to theme.css) and rethemes the whole app; a blue dot marks them. Local controls (e.g. a Button's label, a demo box height) only affect that one preview and are NOT tracked , this was the "drag shows no changes" confusion. Scrollbar (color/hover/width/radius/speed) and Menu (width/pad/item-font) are now token-bound; Icon set (size/stroke/color) stays local.</li> <li>Verified 2026-06-18: tsc clean; <code>/kit</code> 200 on :3060; save round-trip 200 + comment survives; non-allowlisted token and injection value both 400. Level 3 (on-canvas drag-handles) deliberately deferred.</li> </ul> <h2 id="component-inventory-built-2026-06-17-worker-a-every-value-ported-from-flask-source-or-measured">Component inventory (built 2026-06-17, Worker A; every value ported from Flask source or measured)<a class="headerlink" href="#component-inventory-built-2026-06-17-worker-a-every-value-ported-from-flask-source-or-measured" title="Permanent link">¶</a></h2> <table> <thead> <tr> <th>Component</th> <th>What it does</th> <th>Backing value source</th> </tr> </thead> <tbody> <tr> <td><code>Button</code></td> <td>variants default/accent/ghost/danger, sizes sm/md, <code>icon</code>, <code>loading</code>, <code>disabled</code></td> <td>Flask <code>.uidlg-b</code> (default/primary/danger), padding 7px 14px / 13.5px</td> </tr> <tr> <td><code>Card</code> / <code>CardHead</code></td> <td>standard panel + header row</td> <td><code>--card</code>/<code>--line</code>/<code>--r-lg</code></td> </tr> <tr> <td><code>Pill</code></td> <td>outline chip (default/accent/pos/neg/warn)</td> <td>tokens</td> </tr> <tr> <td><code>Tag</code></td> <td>filled select-property chip</td> <td><code>--accent-soft</code>/<code>--sel</code></td> </tr> <tr> <td><code>Badge</code></td> <td>count indicator</td> <td>tokens</td> </tr> <tr> <td><code>SectionLabel</code></td> <td>sidebar divider</td> <td>measured Notion 12px/500 mixed-case <code>--mut3</code></td> </tr> <tr> <td><code>NavItem</code></td> <td>sidebar page row, active+hover</td> <td>measured Notion 30px tall / 14px-500 / <code>--mut</code> / radius6 / hover <code>--sel</code></td> </tr> <tr> <td><code>Group</code></td> <td>collapsible sidebar section, rotating chevron</td> <td>Flask <code>.pfold</code></td> </tr> <tr> <td><code>Avatar</code></td> <td>initial mark, <code>grad</code> = workspace switcher</td> <td>Flask <code>.wsmark</code> 28px/radius9, <code>--grad</code></td> </tr> <tr> <td><code>Input</code> / <code>Textarea</code></td> <td>label/placeholder/hint/error, focus ring</td> <td>Flask <code>.uidlg-in</code> bg <code>--bg</code>/radius8/focus <code>--accent2</code></td> </tr> <tr> <td><code>Select</code></td> <td>menu-backed select</td> <td>composed on Menu + field</td> </tr> <tr> <td><code>Menu</code></td> <td>floating menu: items/labels/separators/icons/danger/kbd, keyboard nav (up/down/enter), click-outside</td> <td>Flask <code>#nodemenu</code> w240/radius10/pad6, <code>.nm-act</code> 13.5px/pad 6-9</td> </tr> <tr> <td><code>DropdownMenu</code></td> <td>trigger + anchored Menu</td> <td>"</td> </tr> <tr> <td><code>ContextMenu</code></td> <td>right-click Menu at cursor</td> <td>"</td> </tr> <tr> <td><code>Popover</code></td> <td>anchored floating panel (filters/property editors)</td> <td><code>--elev-2</code></td> </tr> <tr> <td><code>Tooltip</code></td> <td>hover label</td> <td>Flask <code>.bktip</code> radius6/pad 4-9/13px, <code>--elev-1</code></td> </tr> <tr> <td><code>Modal</code></td> <td>overlay+panel, header/body/footer, ESC + click-outside + focus trap</td> <td>Flask <code>.uidlg-ov</code>/<code>.uidlg</code> scrim .55/380px/radius13/<code>--elev-5</code></td> </tr> <tr> <td><code>Tabs</code></td> <td>underline-active view tabs</td> <td>Flask database views</td> </tr> <tr> <td><code>Checkbox</code>/<code>Radio</code>/<code>Switch</code></td> <td>selection controls, accent fill</td> <td>Notion 16px box / accent2</td> </tr> <tr> <td><code>Spinner</code> / <code>Skeleton</code></td> <td>loading states</td> <td>shimmer on <code>--sel</code>/<code>--hover</code></td> </tr> <tr> <td><code>ToastProvider</code>/<code>useToast</code></td> <td>lightweight notifications</td> <td><code>--elev-2</code></td> </tr> <tr> <td><code>Icon</code> (<code>icons.tsx</code>)</td> <td>~50 named Lucide glyphs, one source for all modules</td> <td>Flask <code>LUCIDE</code> map verbatim, 24x24 stroke-2</td> </tr> <tr> <td><code>Scrollbar</code> (2026-06-18)</td> <td>shared custom scroll surface; wraps any overflow region (or apply <code>.ct-scroll</code>); axis y/x/both</td> <td><code>.ct-scroll</code> in theme.css, <code>--slider-*</code> tokens; thumb idle <code>#4d4d4d</code>, hover/active <code>#c0c0c1</code> (Justin spec); tokens: <code>--slider</code>/<code>--slider-h</code>/<code>--slider-w</code>/<code>--slider-radius</code>/<code>--slider-pad</code>/<code>--slider-speed</code>/<code>--slider-track</code>; full control set in the /kit Scrollbar workbench section</td> </tr> <tr> <td><code>Sidebar</code> (2026-06-18, <code>components/workspace/Sidebar.tsx</code>)</td> <td>shared sidebar shell, 2 variants. <strong>main</strong>: attached 3 sides (flush, full height), inner-edge border, pull-in/out via <code>collapsed</code>. <strong>app</strong>: floats inside content, padded/rounded/bordered (module sub-nav). Both: fixed head + scrollable body (<code>.ct-scroll</code>) + fixed foot. Props: variant/collapsed/width/header/footer</td> <td><code>.ct-sidebar*</code> in workspace.css; WorkspaceShell uses <code>variant="main"</code>; demo (main+app) in Studio Components</td> </tr> <tr> <td><code>AccountMenu</code> (2026-06-18, <code>components/workspace/AccountMenu.tsx</code>)</td> <td>account row pinned at sidebar BOTTOM; click opens upward popup (email header, Settings/help/billing/apps/log out) via kit <code>Menu</code>; click-outside closes</td> <td><code>.ws-acct*</code>; takes <code>email</code>/<code>name</code>/<code>plan</code>; shell passes <code>userEmail</code> from <code>currentUser()</code></td> </tr> <tr> <td><code>HintTooltip</code> (2026-06-18)</td> <td>small floating tooltip of action/shortcut rows (bold label + muted hint), e.g. the edge-resize hint</td> <td><code>--card</code>/<code>--elev-2</code>; <code>rows={[{label,hint}]}</code></td> </tr> <tr> <td><code>ResizeHandle</code> (2026-06-18)</td> <td>draggable edge strip for sidebars/panels: hover lightens inner edge (<code>.ct-resize:hover:after</code> → <code>--mut3</code>) + <code>col-resize</code> cursor + <code>HintTooltip</code> near cursor; drag resizes (clamped), click closes (<code>onClose</code>), optional Ctrl+ (<code>shortcut</code>)</td> <td><code>.ct-resize</code> in global theme.css; <code>getWidth</code>/<code>setWidth</code>/<code>min</code>/<code>max</code>/<code>onClose</code>/<code>closeHint</code>/<code>shortcut</code>. Wired into <code>Sidebar</code> (<code>resizable</code> prop) + <code>TokenPanel</code>; main sidebar resizable (Ctrl+ collapses), Theme settings app sidebar resizable (edge-click hides)</td> </tr> </tbody> </table> <p><strong>Shell scroll fix (2026-06-18):</strong> <code>.ws-root</code> is <code>height:100vh; overflow:hidden</code> (was <code>min-height</code>), so ONLY the sidebar body + <code>.ws-main</code> scroll internally, never the whole page.</p> <h3 id="tokens-added-to-appthemecss-2026-06-17">Tokens added to <code>app/theme.css</code> (2026-06-17)<a class="headerlink" href="#tokens-added-to-appthemecss-2026-06-17" title="Permanent link">¶</a></h3> <p><code>--danger</code>/<code>--danger-bg</code>/<code>--danger-ink</code>, <code>--focus</code>/<code>--ring</code>, <code>--accent-soft</code>/<code>--accent-ink</code>, elevation scale <code>--elev-1..5</code> (tooltip→modal, from Flask box-shadows), menu metrics <code>--menu-w</code>/<code>--menu-pad</code>/<code>--menu-item-fs</code>/<code>--menu-item-pad</code>/<code>--menu-kb</code>, nav-row metrics <code>--nav-row-h</code>/<code>--nav-row-fs</code>, <code>--scrim</code>. All sourced from Flask measured values (documented in a comment block in theme.css). Verified: <code>/kit</code> compiles + serves 200; finances <code>:8096</code> untouched.</p> <h3 id="phase-1-token-freeze-2026-06-18-phase1-worker">Phase 1 token freeze (2026-06-18, [Phase1 Worker])<a class="headerlink" href="#phase-1-token-freeze-2026-06-18-phase1-worker" title="Permanent link">¶</a></h3> <p>Foundation locked ahead of the parallel component build. Added the last measured page-frame tokens so Phase 2 (menus, popovers/modals, scrollbars, pages/layout) needs zero hardcoded values: <code>--fs-h1</code>/<code>--fw-h1</code>/<code>--lh-h1</code> (measured Notion page title 32px/700/lh 1.2), <code>--topbar-h: 44px</code> (measured Notion topbar), <code>--modal-w: 380px</code> (Flask <code>.uidlg</code>). All five added to <code>lib/kit-tokens.ts</code> (new "Page frame" group) so they are allowlisted + tunable in Studio. Also restored <code>--slider-h</code>/<code>--slider-w</code> to spec (<code>#c0c0c1</code>/<code>10px</code>) after a live Save-test had left <code>#1919cc</code>/<code>15px</code> in the file. <strong>theme.css is now declared frozen</strong>: it is the single retheme knob; Phase 2 workers read <code>var(--token)</code> and never edit it (the integrator adds any new token in one serialized step). Authoring contract: <strong><code>forge-suite/COMPONENT_AUTHORING.md</code></strong> (one folder per component, shared-file rule, registration via a <code>studioEntry</code> exported from the component folder, typed by <strong><code>components/studio/types.ts</code></strong> <code>StudioEntry</code>; integrator does the final gallery wiring). Harness reverified 2026-06-18: <code>tsc</code> clean (one ignorable <code>.next/types/validator.ts</code> route-group artifact), <code>/studio</code> 200, <code>/kit</code> 307, token Save round-trip 200 + comment preserved + non-allowlisted/injection both 400.</p> <p><strong>Token-bound control bugfix (2026-06-18, [Phase1 Worker]):</strong> the blue-dot (token-bound) controls in Studio were not updating the preview. Two causes: (1) the Menu controls (<code>--menu-w</code>/<code>--menu-pad</code>/<code>--menu-item-fs</code>) were NOT in <code>lib/kit-tokens.ts</code>, so the store neither applied them to the preview scope (it only iterates manifest tokens) nor allowed saving them (Save returned 400). Fix: added a "Menu" group to the manifest (also surfaces <code>--menu-item-pad</code>/<code>--menu-kb</code>). (2) The Scrollbar controls (<code>--slider-*</code>) did nothing because <code>.ct-scroll</code> in <code>app/theme.css</code> set the standard <code>scrollbar-width: thin</code> + <code>scrollbar-color</code>. Chrome 149 now SUPPORTS those standard properties, and when they are set it IGNORES the <code>::-webkit-scrollbar</code> rules entirely, so <code>--slider-w</code> (px width), hover color, and radius never applied (<code>scrollbar-width:thin</code> is a fixed thin bar). Verified live in Justin's Chrome 149/Win: a webkit-only test box rendered a 24px bar, a std+webkit box rendered 9px (thin). Fix: gate the two Firefox standard properties behind <code>@supports not selector(::-webkit-scrollbar)</code> (true only in Firefox; Chrome reports the selector supported, so it skips the block and uses the token-driven webkit scrollbar). Also kept a one-reflow repaint nudge in <code>applyToScope</code> (<code>components/kit/token-store.tsx</code>) so live drags repaint the webkit scrollbar immediately. Verified end-to-end in-browser: dragging Width 20->6 moves the rendered scrollbar 22px->7px live, Save enables. RED HERRING that cost time: Justin's browser window was very small, squishing the preview box so even correct changes were invisible; confirm a normal window size when a preview "does nothing". Verified: tsc clean; <code>--menu-w</code> save now 200 (was 400).</p> <h3 id="section-0-foundation-primitives-2026-06-18-phase1-worker">Section 0 foundation primitives (2026-06-18, [Phase1 Worker])<a class="headerlink" href="#section-0-foundation-primitives-2026-06-18-phase1-worker" title="Permanent link">¶</a></h3> <p>Built the shared behavioral layer ALL components inherit, in <code>components/primitives/</code> (barrel <code>@/components/primitives</code>): <code>useAnchoredFloating</code> (Floating UI), <code>Portal</code>+<code>Z</code> stacking scale, <code>useFocusTrap</code>, <code>useDismiss</code>, <code>usePresence</code>/<code>Transition</code>, <code>ShortcutProvider</code>/<code>useShortcut</code>, <code>Field</code>/<code>Form</code>/<code>useForm</code>, <code>SortableList</code> (dnd-kit), <code>useVirtualList</code> (@tanstack/react-virtual). Tech locks installed: Floating UI, dnd-kit, Recharts, date-fns, react-virtual. The 6 overlays (Menu/Dropdown/ContextMenu/Tooltip/Popover/Modal) were REFIT onto these as the reference impl. Gallery is now registry-driven (<code>components/studio/registry.tsx</code>); a component registers via its own folder's <code>studioEntry</code>. Two bugs fixed in verification: <code>usePresence</code> left overlays invisible (single-rAF lost; split to two effects + timeout fallback), and <code>useFocusTrap</code> used <code>offsetParent</code> which is null in <code>position:fixed</code> modals (switched to <code>getClientRects</code>). Authoring contract + primitive usage documented in <code>forge-suite/COMPONENT_AUTHORING.md</code>. Browser-verified in Chrome 149.</p> <h2 id="rules-for-modules-incl-the-parallel-build-agents">Rules for modules (incl. the parallel build agents)<a class="headerlink" href="#rules-for-modules-incl-the-parallel-build-agents" title="Permanent link">¶</a></h2> <ul> <li>Read tokens from <code>var(--bg|--panel|--card|--card2|--sel|--hover|--line|--txt|--mut|--mut2| --accent2|--pos|--neg|--grad)</code>; radii <code>var(--r-sm|--r|--r-md|--r-lg|--r-pill)</code>; font <code>var(--font-sans)</code>.</li> <li>Use the <code>components/ui</code> primitives; if a needed primitive is missing, add it to the kit (so all modules get it), don't fork it locally.</li> <li>The finance module still has its own ported <code>.fin-root</code> CSS (#131314/Outfit) , it will be RE-SKINNED onto this kit; until then it's the one exception.</li> <li>workspace.justinsforge.com itself is still the <strong>Flask</strong> app; when it's rebuilt in Next it joins this kit. The memory palette/font docs stay the human source of truth all reference.</li> </ul> <h2 id="measured-real-notion-values-appnotioncom-via-getcomputedstyle-2026-06-17">Measured real-Notion values (app.notion.com, via getComputedStyle 2026-06-17)<a class="headerlink" href="#measured-real-notion-values-appnotioncom-via-getcomputedstyle-2026-06-17" title="Permanent link">¶</a></h2> <p>Justin wants the Suite to match REAL Notion (his Flask clone already mirrors it). Measured: - Surfaces: page bg <code>#191919</code>, sidebar bg <code>#202020</code> (= our tokens). Topbar height <strong>44px</strong>, bg <code>#191919</code>. - Sidebar page rows: font <strong>14px / weight 500</strong>, color <code>#bcbab6</code>, height <strong>30px</strong>, radius <strong>6px</strong>, no vertical padding (height from line-height + min-height). - Section labels ("Favorites"/"Private"): <strong>12px / weight 500</strong>, <strong>mixed-case</strong> (NOT uppercase), color <code>#9b9b9b</code> (dimmer than rows; = new token <code>--mut3</code>). - Page title (H1): <strong>32px / weight 700</strong>, line-height 38.4, color <code>#f0efed</code>. - Body/base: system font stack, 15px base (workspace) / Notion uses 16px in places. Method: navigate the page, <code>document.querySelector</code> Notion's <code>.notion-sidebar-container</code> / <code>.notion-topbar</code> / <code>.notion-page-block</code>, read <code>getComputedStyle</code>. elementFromPoint with screenshot coords drifts (sidebar scroll / dpr) , prefer real selectors. Measure per component as we build.</p> <p>[Claude Code]</p> <aside class="md-source-file"> <span class="md-source-file__fact"> <span class="md-icon" title="Last update"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date" title="July 5, 2026 03:57:04 UTC">July 5, 2026</span> </span> </aside> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../reference_suite_database_engine/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Reference suite database engine"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Reference suite database engine </div> </div> </a> <a href="../reference_superpowers_ported_skills/" class="md-footer__link md-footer__link--next" aria-label="Next: Superpowers Ported Skills"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Superpowers Ported Skills </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> </div> <div class="md-social"> <a href="https://mkdocs.justinsforge.com/" target="_blank" rel="noopener" title="Home" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M277.8 8.6c-12.3-11.4-31.3-11.4-43.5 0l-224 208c-9.6 9-12.8 22.9-8 35.1S18.8 272 32 272h16v176c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V272h16c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8-35.1zM240 320h32c26.5 0 48 21.5 48 48v96H192v-96c0-26.5 21.5-48 48-48"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"annotate": null, "base": "../../..", "features": ["navigation.tabs", "navigation.tracking", "navigation.top", "navigation.indexes", "navigation.path", "navigation.footer", "navigation.prune", "search.suggest", "search.highlight", "search.share", "content.code.copy", "content.code.annotate", "toc.follow"], "search": "../../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script> <script src="../../../assets/javascripts/bundle.79ae519e.min.js"></script> <script src="../../../infra/mkdocs/overrides/theme.js"></script> </body> </html>