parapet-rails 0.1.0

data/app/assets/javascripts/parapet/card-snippet-library.js

@@ -0,0 +1,251 @@
+(function() {
+    class SnippetLibraryCard extends ActivityCard {
+        get cardTitle()       { return 'Snippet Library'; }
+        get cardKeyArea()     { return 'Studio'; }
+        get cardProficiency() { return 2; }
+        get cardIcon() {
+            return `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path class="qss-icon-path" d="M16 6V18M12 6V18M8 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <path class="qss-icon-path" d="M20 3H4C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V5C22 3.89543 21.1046 3 20 3Z" stroke="currentColor" stroke-width="2"/>
+            </svg>`;
+        }
+
+        defaults() {
+            return Object.assign({}, super.defaults(), {
+                width: 320, height: 450,
+                minWidth: 250, minHeight: 300
+            });
+        }
+
+        getSnippets() {
+            return [
+                { category: 'RSpec Assertions', items: [
+                    { 
+                        label: 'Equality', 
+                        code: 'expect(actual).to eq(expected)',
+                        description: 'Asserts that actual value equals expected.',
+                        example: 'expect(user.name).to eq("John")'
+                    },
+                    { 
+                        label: 'Be Truthy', 
+                        code: 'expect(result).to be_truthy',
+                        description: 'Asserts that the value is not nil or false.',
+                        example: 'expect(user.save).to be_truthy'
+                    },
+                    { 
+                        label: 'Include', 
+                        code: 'expect(array).to include(item)',
+                        description: 'Checks if a collection contains an element.',
+                        example: 'expect(roles).to include("admin")'
+                    },
+                    { 
+                        label: 'Change', 
+                        code: 'expect { action }.to change(Model, :count).by(1)',
+                        description: 'Asserts that a block changes a value.',
+                        example: 'expect { post :create }.to change(User, :count).by(1)'
+                    },
+                    { 
+                        label: 'Raise Error', 
+                        code: 'expect { action }.to raise_error(ErrorClass)',
+                        description: 'Asserts that a block raises a specific error.',
+                        example: 'expect { user.save! }.to raise_error(ActiveRecord::RecordInvalid)'
+                    }
+                ]},
+                { category: 'Minitest Assertions', items: [
+                    { 
+                        label: 'Assert Equal', 
+                        code: 'assert_equal expected, actual',
+                        description: 'Standard equality assertion.',
+                        example: 'assert_equal 4, 2 + 2'
+                    },
+                    { 
+                        label: 'Assert Result', 
+                        code: 'assert result',
+                        description: 'Asserts that the result is truthy.',
+                        example: 'assert @user.valid?'
+                    },
+                    { 
+                        label: 'Assert Difference', 
+                        code: 'assert_difference "Model.count", 1 do\n  action\nend',
+                        description: 'Checks for change in count.',
+                        example: 'assert_difference "Post.count" do\n  create_post\nend'
+                    },
+                    { 
+                        label: 'Assert Raises', 
+                        code: 'assert_raises(ErrorClass) { action }',
+                        description: 'Asserts that a block raises an error.',
+                        example: 'assert_raises(ArgumentError) { my_method(nil) }'
+                    }
+                ]},
+                { category: 'Setup & Mocks', items: [
+                    { 
+                        label: 'RSpec Let', 
+                        code: 'let(:user) { create(:user) }',
+                        description: 'Lazy-evaluated helper method.',
+                        example: 'let(:admin) { create(:user, role: "admin") }'
+                    },
+                    { 
+                        label: 'RSpec Before', 
+                        code: 'before do\n  # setup\nend',
+                        description: 'Runs before each test.',
+                        example: 'before { sign_in user }'
+                    },
+                    { 
+                        label: 'RSpec Allow', 
+                        code: 'allow(obj).to receive(:msg).and_return(value)',
+                        description: 'Stub a method call.',
+                        example: 'allow(PaymentGateway).to receive(:process).and_return(true)'
+                    },
+                    { 
+                        label: 'RSpec Expect Receive', 
+                        code: 'expect(obj).to receive(:msg)',
+                        description: 'Mock expectation.',
+                        example: 'expect(notifier).to receive(:send_email)'
+                    }
+                ]},
+                { category: 'FactoryBot', items: [
+                    { 
+                        label: 'Create', 
+                        code: 'user = create(:user)',
+                        description: 'Save instance to database.',
+                        example: '@user = create(:user, email: "test@example.com")'
+                    },
+                    { 
+                        label: 'Build', 
+                        code: 'user = build(:user)',
+                        description: 'Instantiate without saving.',
+                        example: 'user = build(:user, name: nil)'
+                    },
+                    { 
+                        label: 'Build Stubbed', 
+                        code: 'user = build_stubbed(:user)',
+                        description: 'Fast mock instance.',
+                        example: 'user = build_stubbed(:user)'
+                    },
+                    { 
+                        label: 'Attributes For', 
+                        code: 'attrs = attributes_for(:user)',
+                        description: 'Get hash of attributes.',
+                        example: 'post :create, params: { user: attributes_for(:user) }'
+                    }
+                ]},
+                { category: 'Cucumber/Gherkin', items: [
+                    { 
+                        label: 'Feature', 
+                        code: 'Feature: Some description\n\n  Scenario: Some context\n    Given some precondition\n    When some action\n    Then some result',
+                        description: 'Basic feature structure.'
+                    },
+                    { 
+                        label: 'Background', 
+                        code: 'Background:\n  Given the following users exist:\n    | name | email |\n    | John | john@example.com |',
+                        description: 'Runs before each scenario.'
+                    },
+                    { 
+                        label: 'Scenario Outline', 
+                        code: 'Scenario Outline: feeding a <animal>\n  Given the <animal> is hungry\n  When I feed it <food>\n  Then it should be <state>\n\n  Examples:\n    | animal | food  | state |\n    | cat    | fish  | happy |\n    | dog    | bone  | happy |',
+                        description: 'Data-driven testing.'
+                    }
+                ]}
+            ];
+        }
+
+        buildContent() {
+            return `
+                <div class="qss-snippet-library-container qss-flex qss-flex-col qss-h-full qss-bg-[#111418] qss-text-[11px] qss-overflow-hidden">
+                    <!-- Search Bar -->
+                    <div class="qss-px-2 qss-py-2 qss-border-b qss-border-slate-800 qss-bg-[#16191e]/50">
+                        <div class="qss-relative">
+                            <input type="text" class="qss-snippet-search qss-w-full qss-bg-black/40 qss-border qss-border-slate-700 qss-rounded qss-px-7 qss-py-1 qss-text-slate-300 placeholder:qss-text-slate-600 focus:qss-outline-none focus:qss-border-indigo-500/50 qss-transition-colors" placeholder="Search snippets...">
+                            <i class="qss-icon-search qss-absolute qss-left-2 qss-top-1/2 qss--translate-y-1/2 qss-text-slate-600" style="font-size: 12px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Snippet List -->
+                    <div class="qss-snippet-list qss-flex-1 qss-overflow-y-auto qss-custom-scrollbar qss-p-2 qss-space-y-4">
+                        ${this.renderSnippets()}
+                    </div>
+                    
+                    <div class="qss-px-2 qss-py-1.5 qss-border-t qss-border-slate-800 qss-bg-black/20 qss-text-[9px] qss-text-slate-500 qss-italic">
+                        Click snippet to insert at cursor
+                    </div>
+                </div>
+            `;
+        }
+
+        renderSnippets(filter = '') {
+            const snippets = this.getSnippets();
+            const search = filter.toLowerCase();
+
+            return snippets.map(cat => {
+                const filteredItems = cat.items.filter(i => 
+                    i.label.toLowerCase().includes(search) || 
+                    i.code.toLowerCase().includes(search)
+                );
+
+                if (filteredItems.length === 0) return '';
+
+                return `
+                    <div class="qss-snippet-category">
+                        <div class="qss-text-[10px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-widest qss-mb-2 qss-px-1 qss-mt-2">${cat.category}</div>
+                        <div class="qss-space-y-2">
+                            ${filteredItems.map(item => `
+                                <div class="qss-snippet-item qss-group qss-cursor-pointer qss-bg-white/5 qss-border qss-border-white/5 hover:qss-border-indigo-500/30 qss-rounded qss-overflow-hidden qss-transition-all" data-code="${item.code.replace(/"/g, '&quot;')}">
+                                    <div class="qss-p-2">
+                                        <div class="qss-flex qss-items-center qss-justify-between qss-mb-1">
+                                            <span class="qss-text-[11px] qss-text-slate-300 group-hover:qss-text-indigo-300 qss-font-medium qss-transition-colors">${item.label}</span>
+                                            <i class="qss-icon-plus qss-text-slate-600 group-hover:qss-text-indigo-400 qss-transition-colors" style="font-size: 11px;"></i>
+                                        </div>
+                                        <div class="qss-text-[10px] qss-text-slate-500 qss-font-mono qss-italic qss-mb-2">
+                                            ${item.description || item.code.split('\n')[0]}
+                                        </div>
+                                        <div class="qss-bg-black/40 qss-rounded qss-p-1.5 qss-font-mono qss-text-[10px] qss-text-slate-400 group-hover:qss-text-slate-300 qss-overflow-x-hidden">
+                                            ${item.code.split('\n')[0]}
+                                        </div>
+                                    </div>
+                                    ${item.example ? `
+                                        <div class="qss-px-2 qss-pb-2 qss-pt-1 qss-border-t qss-border-white/5 qss-bg-black/10">
+                                            <div class="qss-text-[8px] qss-text-slate-700 qss-uppercase qss-font-bold qss-mb-1">Example:</div>
+                                            <pre class="qss-text-[9px] qss-text-indigo-500/60 qss-font-mono qss-leading-tight qss-whitespace-pre-wrap">${item.example}</pre>
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        onInit() {
+            const searchInput = this.element.querySelector('.qss-snippet-search');
+            const listContainer = this.element.querySelector('.qss-snippet-list');
+
+            searchInput.addEventListener('input', (e) => {
+                listContainer.innerHTML = this.renderSnippets(e.target.value);
+            });
+
+            this.element.addEventListener('click', (e) => {
+                const item = e.target.closest('.qss-snippet-item');
+                if (!item) return;
+
+                const code = item.dataset.code;
+                if (!code) return;
+
+                // Dispatch event to insert into active editor
+                document.dispatchEvent(new CustomEvent('parapet:insertSnippet', {
+                    detail: { code: code }
+                }));
+
+                // Visual feedback
+                const icon = item.querySelector('.qss-icon-plus');
+                if (icon) {
+                    icon.className = 'qss-icon-check text-emerald-400';
+                    setTimeout(() => icon.className = 'qss-icon-plus text-slate-700', 1000);
+                }
+            });
+        }
+    }
+
+    SnippetLibraryCard.cardId = 'snippet-library';
+    ActivityCards.registry['snippet-library'] = SnippetLibraryCard;
+})();

data/app/assets/javascripts/parapet/explorer-resizer.js

@@ -0,0 +1,92 @@
+/**
+ * Parapet Explorer Resizer
+ * Handles dynamic resizing of the explorer bar with persistence.
+ */
+(function() {
+    let isResizing = false;
+    let explorer = null;
+    let resizer = null;
+    const MIN_WIDTH = 130;
+    const MAX_WIDTH = 400;
+    const STORAGE_KEY = 'parapet-explorer-width';
+
+    function init() {
+        explorer = document.getElementById('pp-explorer-bar');
+        resizer = document.getElementById('pp-explorer-resizer');
+        if (!explorer || !resizer) return;
+
+        // Restore persisted width
+        const savedWidth = localStorage.getItem(STORAGE_KEY);
+        if (savedWidth) {
+            updateWidth(parseFloat(savedWidth));
+        }
+
+        resizer.addEventListener('mousedown', startResize);
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResize);
+    }
+
+    function startResize(e) {
+        isResizing = true;
+        document.body.style.cursor = 'col-resize';
+        // Prevent text selection during drag
+        document.body.style.userSelect = 'none';
+        e.preventDefault();
+    }
+
+    function resize(e) {
+        if (!isResizing) return;
+
+        const canvas = document.getElementById('qss-canvas');
+        if (!canvas) return;
+
+        const canvasRect = canvas.getBoundingClientRect();
+        const unit = parseFloat(getComputedStyle(canvas.firstElementChild || canvas).getPropertyValue('--qnt')) || 1; // the canvas unit lives on its children
+        
+        // Calculate new width in Quants (relative to Global Nav at x=24)
+        let newWidth = (e.clientX - canvasRect.left) / unit - 24;
+
+        // Apply Constraints
+        newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth));
+        
+        updateWidth(newWidth);
+    }
+
+    function stopResize() {
+        if (!isResizing) return;
+        isResizing = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        
+        // Persist final width
+        const width = document.documentElement.style.getPropertyValue('--explorer-bar-w').replace('px', '');
+        if (width) {
+            localStorage.setItem(STORAGE_KEY, width);
+        }
+    }
+
+    function updateWidth(width) {
+        // Update CSS variable directly for Thin Wrapper anchoring
+        document.documentElement.style.setProperty('--explorer-bar-w', `${width}px`);
+        
+        // Also update legacy class for JIT compatibility if needed
+        const classes = Array.from(explorer.classList);
+        const oldClass = classes.find(c => c.startsWith('w[') && !c.includes('%'));
+        
+        if (oldClass) explorer.classList.remove(oldClass);
+        
+        const newClass = `w[${Math.round(width)}]`;
+        // explorer.classList.add(newClass); // Disabling JIT class in favor of var()
+
+        // Maintain 3:4 aspect ratio for Widget Area
+        const widgetArea = document.getElementById('pp-explorer-widgets');
+        if (widgetArea) {
+            const newHeight = Math.round(width * 1.33); // 4/3 aspect ratio
+            document.documentElement.style.setProperty('--explorer-widgets-h', `${newHeight}px`);
+        }
+    }
+
+    // Initialize on load and turbo:load
+    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener('turbo:load', init);
+})();

data/app/assets/javascripts/parapet/parapet_qss.js

@@ -0,0 +1,342 @@
+/*
+ * Parapet-side QSSEngine extensions (QSS item C, 2026-09-23).
+ * Moved out of qss-engine.js so the core engine carries no Parapet DOM ids or events.
+ * Loaded (defer) immediately after qss-engine.js; attaches to the shared QSSEngine
+ * object, so existing callers (QSSEngine.syncRoot(), onclick="QSSEngine.revealPhantom(..)")
+ * are unchanged. Not part of the QSS core / gem.
+ */
+(function () {
+    // Object definitions (Button, Toggle, Field, Dropdown, Card): layer-2 material, registered
+    // here through the core's registerObject() mechanism. Reference copy in
+    // archive/qss_parapet/layer2_holding/qss-objects.json.
+    const OBJECT_DEFINITIONS = {
+      "Button": {
+        "name": "Button",
+        "params": [
+          "w",
+          "h"
+        ],
+        "intrinsic": {
+          "w": 120,
+          "h": 44
+        },
+        "adjectives": [
+          "bg-indigo-500",
+          "rounded[4]",
+          "flex",
+          "items-center",
+          "justify-center",
+          "clickable",
+          "smooth"
+        ],
+        "slots": [
+          {
+            "name": "label",
+            "pos": [
+              "center",
+              "center"
+            ],
+            "class": "text-white weight[bold] text-size[14]"
+          }
+        ]
+      },
+      "Toggle": {
+        "name": "Toggle",
+        "params": [
+          "w",
+          "h"
+        ],
+        "intrinsic": {
+          "w": 40,
+          "h": 20
+        },
+        "adjectives": [
+          "bg-slate-800",
+          "rounded[10]",
+          "clickable",
+          "smooth"
+        ],
+        "slots": [
+          {
+            "name": "knob",
+            "pos": [
+              2,
+              2
+            ],
+            "intrinsic": {
+              "w": 16,
+              "h": 16
+            },
+            "class": "bg-white rounded[8] smooth"
+          }
+        ]
+      },
+      "Field": {
+        "name": "Field",
+        "params": [
+          "w",
+          "h"
+        ],
+        "intrinsic": {
+          "w": 300,
+          "h": 64
+        },
+        "adjectives": [
+          "flex",
+          "flex-col",
+          "gap[4]"
+        ],
+        "slots": [
+          {
+            "name": "label",
+            "pos": [
+              0,
+              0
+            ],
+            "class": "text-slate-400 text-size[12] weight[semibold]"
+          },
+          {
+            "name": "input",
+            "pos": [
+              0,
+              20
+            ],
+            "intrinsic": {
+              "w": "inherit",
+              "h": 40
+            },
+            "class": "bg-slate-900 border[1] border-slate-800 rounded[4] px[12] text-white text-size[14]"
+          }
+        ]
+      },
+      "Dropdown": {
+        "name": "Dropdown",
+        "params": [
+          "w",
+          "h",
+          "row_height"
+        ],
+        "intrinsic": {
+          "w": 200,
+          "h": 40
+        },
+        "variables": {
+          "row_height": 32,
+          "max_rows": 5
+        },
+        "slots": [
+          {
+            "name": "header",
+            "pos": [
+              0,
+              0
+            ],
+            "intrinsic": {
+              "w": "inherit",
+              "h": "inherit"
+            },
+            "class": "bg-slate-800 border[1] border-slate-700 rounded[4] px[12] flex items-center justify-between clickable"
+          },
+          {
+            "name": "list",
+            "pos": [
+              0,
+              42
+            ],
+            "intrinsic": {
+              "w": "inherit",
+              "h": "computed"
+            },
+            "class": "depth[overlay] bg-brand-main border[1] border-slate-800 rounded[4] scroll[y] hidden"
+          }
+        ]
+      },
+      "Card": {
+        "name": "Card",
+        "params": [
+          "w",
+          "h",
+          "bg"
+        ],
+        "intrinsic": {
+          "w": 400,
+          "h": 300
+        },
+        "adjectives": [
+          "bg-slate-900",
+          "border[1]",
+          "border-slate-800",
+          "rounded[8]",
+          "scroll[hidden]"
+        ]
+      }
+    };
+    Object.entries(OBJECT_DEFINITIONS).forEach(([name, definition]) => QSSEngine.registerObject(name, definition));
+
+    function setRoot(path, event) {
+        if (event) event.stopPropagation();
+        const suite = document.querySelector('#pp-explorer-header span')?.textContent?.trim() || 'default';
+        localStorage.setItem(`qss-root-${suite}`, path);
+        
+        const label = document.getElementById('pp-current-root');
+        if (label) {
+            label.textContent = path === '/' ? 'Root' : path.split('/').filter(p => p).pop();
+        }
+        
+        const dropdown = document.getElementById('pp-root-dropdown');
+        if (dropdown) dropdown.classList.add('hidden');
+
+        // Trigger reload of explorer content
+        const explorerContent = document.getElementById('qss-explorer-content');
+        if (explorerContent) {
+            const url = new URL(explorerContent.src, window.location.origin);
+            url.searchParams.set('root', path);
+            explorerContent.src = url.toString();
+        }
+    }
+
+    function syncRoot() {
+        const suite = document.querySelector('#pp-explorer-header span')?.textContent?.trim() || 'default';
+        const currentRoot = localStorage.getItem(`qss-root-${suite}`) || '/';
+        const label = document.getElementById('pp-current-root');
+        if (label) {
+            label.textContent = currentRoot === '/' ? 'Root' : currentRoot.split('/').filter(p => p).pop();
+        }
+        
+        // Ensure explorer frame knows the root
+        const explorerContent = document.getElementById('qss-explorer-content');
+        if (explorerContent && explorerContent.src) {
+            try {
+                const url = new URL(explorerContent.src, window.location.origin);
+                if (!url.searchParams.has('root')) {
+                    url.searchParams.set('root', currentRoot);
+                    explorerContent.src = url.toString();
+                }
+            } catch (e) {
+                console.warn('Invalid explorer src', e);
+            }
+        }
+    }
+
+    function setPerspective(type, event) {
+        if (event) event.stopPropagation();
+        const suite = document.querySelector('#pp-explorer-header span')?.textContent?.trim() || 'default';
+        localStorage.setItem(`qss-perspective-${suite}`, type);
+        
+        // Update UI state
+        document.querySelectorAll('.perspective-btn').forEach(btn => {
+            const icon = btn.querySelector('i');
+            if (btn.dataset.perspective === type) {
+                btn.classList.add('bg-white/10');
+                if (icon) {
+                    icon.classList.add('text-indigo-400');
+                    icon.classList.remove('text-slate-500');
+                }
+            } else {
+                btn.classList.remove('bg-white/10');
+                if (icon) {
+                    icon.classList.remove('text-indigo-400');
+                    icon.classList.add('text-slate-500');
+                }
+            }
+        });
+
+        // Trigger reload of explorer content
+        const explorerContent = document.getElementById('qss-explorer-content');
+        if (explorerContent) {
+            const url = new URL(explorerContent.src, window.location.origin);
+            url.searchParams.set('perspective', type);
+            explorerContent.src = url.toString();
+        }
+    }
+
+    function syncPerspective() {
+        const suite = document.querySelector('#pp-explorer-header span')?.textContent?.trim() || 'default';
+        const type = localStorage.getItem(`qss-perspective-${suite}`) || 'project';
+        
+        // Update UI state
+        document.querySelectorAll('.perspective-btn').forEach(btn => {
+            const icon = btn.querySelector('i');
+            if (btn.dataset.perspective === type) {
+                btn.classList.add('bg-white/10');
+                if (icon) {
+                    icon.classList.add('text-indigo-400');
+                    icon.classList.remove('text-slate-500');
+                }
+            } else {
+                btn.classList.remove('bg-white/10');
+                if (icon) {
+                    icon.classList.remove('text-indigo-400');
+                    icon.classList.add('text-slate-500');
+                }
+            }
+        });
+
+        // Ensure explorer frame knows the perspective
+        const explorerContent = document.getElementById('qss-explorer-content');
+        if (explorerContent && explorerContent.src) {
+            try {
+                const url = new URL(explorerContent.src, window.location.origin);
+                if (!url.searchParams.has('perspective')) {
+                    url.searchParams.set('perspective', type);
+                    explorerContent.src = url.toString();
+                }
+            } catch (e) {
+                console.warn('Invalid explorer src', e);
+            }
+        }
+    }
+
+    function revealPhantom(nounId, event) {
+        if (event) event.stopPropagation();
+        const el = document.getElementById(nounId);
+        if (el) {
+            el.classList.toggle('qss-phantom-revealed');
+            
+            // Highlight the row in the explorer if we have the event
+            if (event && event.currentTarget) {
+                const row = event.currentTarget.closest('.qss-tree-row');
+                if (row) {
+                    if (el.classList.contains('qss-phantom-revealed')) {
+                        row.classList.add('bg-indigo-500/10');
+                    } else {
+                        row.classList.remove('bg-indigo-500/10');
+                    }
+                }
+            }
+        } else {
+            console.warn(`Phantom Noun #${nounId} not found in DOM`);
+        }
+    }
+
+    function startVisualSyncing() {
+        window.addEventListener('parapet:objectSelected', (e) => {
+            const nounId = e.detail.id;
+            const treeRows = document.querySelectorAll('#qss-tree-container .qss-tree-row');
+            
+            treeRows.forEach(row => {
+                const nameEl = row.querySelector('.qss-tree-row-name');
+                const nodeName = nameEl?.textContent?.trim();
+                
+                if (nodeName === nounId || nodeName === `#${nounId}`) {
+                    // Highlight selected node
+                    document.querySelectorAll('.qss-tree-row.selected-sync').forEach(r => {
+                        r.classList.remove('selected-sync', 'bg-indigo-500/20', 'ring-1', 'ring-indigo-500/50');
+                    });
+                    
+                    row.classList.add('selected-sync', 'bg-indigo-500/20', 'ring-1', 'ring-indigo-500/50');
+                    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+            });
+        });
+    }
+
+    Object.assign(QSSEngine, {
+        setRoot,
+        syncRoot,
+        setPerspective,
+        syncPerspective,
+        revealPhantom,
+        startVisualSyncing
+    });
+})();