npm - @portel/photon - Versions diffs - 1.14.0 → 1.16.1 - Mend

@portel/photon 1.14.0 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/dist/auto-ui/beam/photon-management.d.ts +1 -1
package/dist/auto-ui/beam/photon-management.d.ts.map +1 -1
package/dist/auto-ui/beam/photon-management.js +5 -1
package/dist/auto-ui/beam/photon-management.js.map +1 -1
package/dist/auto-ui/beam/routes/api-config.d.ts.map +1 -1
package/dist/auto-ui/beam/routes/api-config.js +31 -9
package/dist/auto-ui/beam/routes/api-config.js.map +1 -1
package/dist/auto-ui/beam/routes/api-marketplace.d.ts.map +1 -1
package/dist/auto-ui/beam/routes/api-marketplace.js +3 -0
package/dist/auto-ui/beam/routes/api-marketplace.js.map +1 -1
package/dist/auto-ui/beam.d.ts.map +1 -1
package/dist/auto-ui/beam.js +205 -56
package/dist/auto-ui/beam.js.map +1 -1
package/dist/auto-ui/bridge/index.d.ts.map +1 -1
package/dist/auto-ui/bridge/index.js +578 -0
package/dist/auto-ui/bridge/index.js.map +1 -1
package/dist/auto-ui/bridge/renderers.d.ts.map +1 -1
package/dist/auto-ui/bridge/renderers.js +7 -3
package/dist/auto-ui/bridge/renderers.js.map +1 -1
package/dist/auto-ui/bridge/types.d.ts +6 -0
package/dist/auto-ui/bridge/types.d.ts.map +1 -1
package/dist/auto-ui/frontend/pure-view.html +289 -0
package/dist/auto-ui/photon-bridge.d.ts +11 -0
package/dist/auto-ui/photon-bridge.d.ts.map +1 -1
package/dist/auto-ui/photon-bridge.js +75 -1
package/dist/auto-ui/photon-bridge.js.map +1 -1
package/dist/auto-ui/streamable-http-transport.d.ts.map +1 -1
package/dist/auto-ui/streamable-http-transport.js +29 -3
package/dist/auto-ui/streamable-http-transport.js.map +1 -1
package/dist/beam-form.bundle.js +5707 -0
package/dist/beam-form.bundle.js.map +7 -0
package/dist/beam.bundle.js +2863 -895
package/dist/beam.bundle.js.map +4 -4
package/dist/claude-code-plugin.js +11 -3
package/dist/claude-code-plugin.js.map +1 -1
package/dist/cli/commands/build.js +1 -1
package/dist/cli/commands/build.js.map +1 -1
package/dist/cli/commands/doctor.d.ts.map +1 -1
package/dist/cli/commands/doctor.js +7 -5
package/dist/cli/commands/doctor.js.map +1 -1
package/dist/cli/commands/info.d.ts.map +1 -1
package/dist/cli/commands/info.js +18 -4
package/dist/cli/commands/info.js.map +1 -1
package/dist/cli/commands/mcp.js +2 -2
package/dist/cli/commands/mcp.js.map +1 -1
package/dist/cli/commands/update.d.ts.map +1 -1
package/dist/cli/commands/update.js +6 -2
package/dist/cli/commands/update.js.map +1 -1
package/dist/cli-alias.d.ts.map +1 -1
package/dist/cli-alias.js +3 -2
package/dist/cli-alias.js.map +1 -1
package/dist/daemon/client.d.ts +5 -0
package/dist/daemon/client.d.ts.map +1 -1
package/dist/daemon/client.js +50 -0
package/dist/daemon/client.js.map +1 -1
package/dist/daemon/manager.d.ts +15 -0
package/dist/daemon/manager.d.ts.map +1 -1
package/dist/daemon/manager.js +142 -11
package/dist/daemon/manager.js.map +1 -1
package/dist/daemon/worker-manager.js +1 -1
package/dist/daemon/worker-manager.js.map +1 -1
package/dist/deploy/cloudflare.d.ts.map +1 -1
package/dist/deploy/cloudflare.js +12 -10
package/dist/deploy/cloudflare.js.map +1 -1
package/dist/loader.d.ts.map +1 -1
package/dist/loader.js +37 -2
package/dist/loader.js.map +1 -1
package/dist/marketplace-manager.d.ts +9 -0
package/dist/marketplace-manager.d.ts.map +1 -1
package/dist/marketplace-manager.js +115 -42
package/dist/marketplace-manager.js.map +1 -1
package/dist/meta.d.ts +51 -0
package/dist/meta.d.ts.map +1 -0
package/dist/meta.js +320 -0
package/dist/meta.js.map +1 -0
package/dist/photon-cli-runner.d.ts.map +1 -1
package/dist/photon-cli-runner.js +30 -5
package/dist/photon-cli-runner.js.map +1 -1
package/dist/photon-doc-extractor.d.ts +1 -0
package/dist/photon-doc-extractor.d.ts.map +1 -1
package/dist/photon-doc-extractor.js +33 -21
package/dist/photon-doc-extractor.js.map +1 -1
package/dist/photons/builder-compass.photon.d.ts +167 -0
package/dist/photons/builder-compass.photon.d.ts.map +1 -0
package/dist/photons/builder-compass.photon.js +816 -0
package/dist/photons/builder-compass.photon.js.map +1 -0
package/dist/photons/builder-compass.photon.ts +1129 -0
package/dist/photons/docs/ui/docs.html +441 -0
package/dist/photons/docs.photon.d.ts +237 -0
package/dist/photons/docs.photon.d.ts.map +1 -0
package/dist/photons/docs.photon.js +483 -0
package/dist/photons/docs.photon.js.map +1 -0
package/dist/photons/docs.photon.ts +536 -0
package/dist/photons/maker.photon.d.ts.map +1 -1
package/dist/photons/maker.photon.js +19 -2
package/dist/photons/maker.photon.js.map +1 -1
package/dist/photons/maker.photon.ts +18 -2
package/dist/photons/slides.photon.d.ts +212 -0
package/dist/photons/slides.photon.d.ts.map +1 -0
package/dist/photons/slides.photon.js +355 -0
package/dist/photons/slides.photon.js.map +1 -0
package/dist/photons/slides.photon.ts +370 -0
package/dist/photons/spreadsheet/ui/spreadsheet.html +779 -0
package/dist/photons/spreadsheet.photon.d.ts +554 -0
package/dist/photons/spreadsheet.photon.d.ts.map +1 -0
package/dist/photons/spreadsheet.photon.js +1050 -0
package/dist/photons/spreadsheet.photon.js.map +1 -0
package/dist/photons/spreadsheet.photon.ts +1239 -0
package/dist/photons/ui/builder-compass.html +1199 -0
package/dist/photons/ui/builder-compass.photon.html +380 -0
package/dist/server.d.ts.map +1 -1
package/dist/server.js +33 -59
package/dist/server.js.map +1 -1
package/dist/shared/error-handler.d.ts +8 -0
package/dist/shared/error-handler.d.ts.map +1 -1
package/dist/shared/error-handler.js +50 -0
package/dist/shared/error-handler.js.map +1 -1
package/dist/shared-utils.d.ts +16 -2
package/dist/shared-utils.d.ts.map +1 -1
package/dist/shared-utils.js +37 -3
package/dist/shared-utils.js.map +1 -1
package/dist/template-manager.d.ts.map +1 -1
package/dist/template-manager.js +2 -1
package/dist/template-manager.js.map +1 -1
package/package.json +8 -3

package/dist/photons/spreadsheet/ui/spreadsheet.html ADDED Viewed

@@ -0,0 +1,779 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="mcp:ui-size" content="minWidth=800;minHeight=400;maxHeight=900">
+    <title>Spreadsheet</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        /* Default: dark theme */
+        :root {
+            --primary: #2ea043;
+            --primary-hover: #3fb950;
+            --bg-primary: #0d1117;
+            --bg-secondary: #161b22;
+            --bg-tertiary: #21262d;
+            --border: #30363d;
+            --border-dark: #484f58;
+            --text-primary: #c9d1d9;
+            --text-secondary: #8b949e;
+            --text-muted: #6e7681;
+            --accent: #58a6ff;
+            --error: #f85149;
+            --formula-bar-bg: #161b22;
+            --header-bg: #161b22;
+            --grid-line: #30363d;
+            --selection: #58a6ff;
+            --selection-bg: rgba(88, 166, 255, 0.15);
+            --cell-active: #0d1117;
+            --cell-empty: rgba(255, 255, 255, 0.03);
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+            --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.4);
+        }
+        /* Light theme override via .light class on :root */
+        :root.light {
+            --primary: #217346;
+            --primary-hover: #1e623c;
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8f9fa;
+            --bg-tertiary: #f3f2f1;
+            --border: #e1e4e8;
+            --border-dark: #d0d7de;
+            --text-primary: #24292f;
+            --text-secondary: #57606a;
+            --text-muted: #8c959f;
+            --accent: #0969da;
+            --error: #cf222e;
+            --formula-bar-bg: #f6f8fa;
+            --header-bg: #f6f8fa;
+            --grid-line: #d0d7de;
+            --selection: #0969da;
+            --selection-bg: rgba(9, 105, 218, 0.1);
+            --cell-active: #ffffff;
+            --cell-empty: rgba(0, 0, 0, 0.03);
+            --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.04);
+            --shadow-md: 0 3px 6px rgba(31, 35, 40, 0.08);
+        }
+        /* Slim scrollbars */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--border-dark);
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            transition: background 0.2s, color 0.2s;
+        }
+        /* Toolbar */
+        .toolbar {
+            background: var(--bg-primary);
+            border-bottom: 1px solid var(--border);
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            box-shadow: var(--shadow-sm);
+            z-index: 100;
+        }
+        .toolbar-section {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding-right: 12px;
+            border-right: 1px solid var(--border);
+        }
+        .toolbar-section:last-child {
+            border-right: none;
+            padding-right: 0;
+        }
+        .btn {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.15s;
+            color: var(--text-primary);
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .btn:hover {
+            background: var(--bg-tertiary);
+            border-color: var(--border-dark);
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+        .btn-primary:hover {
+            background: var(--primary-hover);
+            border-color: var(--primary-hover);
+        }
+        .btn-icon {
+            padding: 6px 8px;
+            font-size: 14px;
+        }
+        .btn.active {
+            background: var(--selection-bg);
+            border-color: var(--selection);
+            color: var(--selection);
+        }
+        /* Tabs */
+        .tabs-container {
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            overflow-x: auto;
+            gap: 2px;
+            height: 32px;
+        }
+        .tab {
+            padding: 6px 16px;
+            font-size: 12px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            border: 1px solid transparent;
+            border-bottom: none;
+            border-radius: 6px 6px 0 0;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.15s;
+            background: transparent;
+        }
+        .tab:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+        .tab.active {
+            background: var(--bg-primary);
+            color: var(--accent);
+            border-color: var(--border);
+            font-weight: 600;
+            position: relative;
+        }
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: var(--bg-primary);
+            z-index: 2;
+        }
+        .tab-close {
+            opacity: 0;
+            font-size: 14px;
+            line-height: 1;
+        }
+        .tab:hover .tab-close {
+            opacity: 0.6;
+        }
+        .tab-close:hover {
+            opacity: 1;
+            color: var(--error);
+        }
+        .btn-new-tab {
+            padding: 4px 8px;
+            font-size: 16px;
+            color: var(--text-muted);
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .btn-new-tab:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+        /* Sidebar table list */
+        .table-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+        .table-item {
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--text-secondary);
+        }
+        .table-item:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+        .table-item.active {
+            background: var(--selection-bg);
+            color: var(--selection);
+            font-weight: 500;
+        }
+        .table-info {
+            font-size: 10px;
+            opacity: 0.5;
+        }
+        /* Formula Bar */
+        .formula-container {
+            background: var(--formula-bar-bg);
+            border-bottom: 1px solid var(--border);
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .cell-reference {
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 6px 10px;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-primary);
+            min-width: 80px;
+            text-align: center;
+            font-family: 'SF Mono', Monaco, monospace;
+        }
+        .formula-input-wrapper {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 0 12px;
+            transition: border-color 0.15s;
+        }
+        .formula-input-wrapper:focus-within {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px var(--selection-bg);
+        }
+        #formulaInput {
+            flex: 1;
+            border: none;
+            outline: none;
+            padding: 6px 0;
+            font-size: 14px;
+            font-family: 'SF Mono', Monaco, monospace;
+            background: transparent;
+            color: var(--text-primary);
+        }
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+            min-height: 0;
+        }
+        /* Sidebar for Views */
+        .sidebar {
+            width: 240px;
+            background: var(--bg-secondary);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            transition: width 0.2s;
+        }
+        .sidebar.collapsed {
+            width: 0;
+            overflow: hidden;
+        }
+        .sidebar-header {
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .sidebar-title {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .sidebar-section {
+            padding: 12px;
+            border-bottom: 1px solid var(--border);
+        }
+        .sidebar-section-title {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 8px;
+        }
+        /* Sheet */
+        .sheet-wrapper {
+            position: relative;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        .sheet-container {
+            flex: 1;
+            overflow: auto;
+            position: relative;
+            background: var(--bg-secondary);
+        }
+        /* Grid */
+        .grid-wrapper {
+            position: relative;
+            min-width: fit-content;
+            min-height: fit-content;
+            background: var(--bg-primary);
+        }
+        table {
+            border-collapse: separate;
+            border-spacing: 0;
+            font-size: 13px;
+            table-layout: fixed;
+        }
+        th, td {
+            border-right: 1px solid var(--grid-line);
+            border-bottom: 1px solid var(--grid-line);
+            padding: 0;
+            position: relative;
+        }
+        th {
+            background: var(--header-bg);
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-align: center;
+            position: sticky;
+            z-index: 10;
+        }
+        th.corner {
+            position: sticky;
+            top: 0;
+            left: 0;
+            z-index: 20;
+            width: 50px;
+            height: 25px;
+            background: var(--header-bg);
+            border-right: 1px solid var(--border-dark);
+            border-bottom: 1px solid var(--border-dark);
+        }
+        th.col-header {
+            top: 0;
+            height: 25px;
+            min-width: 100px;
+            border-bottom: 1px solid var(--border-dark);
+        }
+        th.row-header {
+            left: 0;
+            width: 50px;
+            height: 24px;
+            border-right: 1px solid var(--border-dark);
+        }
+        td {
+            background: var(--bg-primary);
+            height: 24px;
+            min-width: 100px;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .cell-content {
+            padding: 0 6px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--text-primary);
+        }
+        /* Status Bar */
+        .status-bar {
+            background: var(--bg-secondary);
+            border-top: 1px solid var(--border);
+            padding: 6px 16px;
+            font-size: 12px;
+            color: var(--text-secondary);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .context-menu {
+            position: fixed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            box-shadow: var(--shadow-md);
+            z-index: 300;
+            min-width: 180px;
+            padding: 4px 0;
+            display: none;
+        }
+        .context-menu.visible {
+            display: block;
+        }
+        .context-menu-item {
+            padding: 8px 16px;
+            cursor: pointer;
+            font-size: 13px;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .context-menu-item:hover {
+            background: var(--selection-bg);
+        }
+        .context-menu-sep {
+            height: 1px;
+            background: var(--border);
+            margin: 4px 0;
+        }
+        /* Sidebar toggle */
+        .sidebar-toggle {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-left: none;
+            border-radius: 0 4px 4px 0;
+            padding: 8px 4px;
+            cursor: pointer;
+            z-index: 50;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+    </style>
+</head>
+<body>
+    <!-- Toolbar -->
+    <div class="toolbar">
+        <div class="toolbar-section">
+            <button class="btn btn-primary" onclick="spreadsheet.newFile()">
+                <span>+</span> New
+            </button>
+            <button class="btn" onclick="spreadsheet.openImportModal()">
+                Import CSV
+            </button>
+            <button class="btn" onclick="spreadsheet.exportCSV()">
+                Export CSV
+            </button>
+        </div>
+        <div class="toolbar-section">
+            <button class="btn btn-icon" onclick="spreadsheet.addRow()" title="Add Row">Add Row</button>
+            <button class="btn btn-icon" onclick="spreadsheet.addColumn()" title="Add Column">Add Col</button>
+        </div>
+    </div>
+    <!-- Formula Bar -->
+    <div class="formula-container">
+        <div class="cell-reference" id="cellRef">A1</div>
+        <div class="formula-input-wrapper">
+            <input type="text" id="formulaInput" placeholder="Enter formula (start with =) or value..." autocomplete="off">
+        </div>
+    </div>
+    <!-- Context Menu -->
+    <div class="context-menu" id="contextMenu">
+        <div class="context-menu-item" data-action="insert-row-above">Insert row above</div>
+        <div class="context-menu-item" data-action="insert-row-below">Insert row below</div>
+        <div class="context-menu-sep"></div>
+        <div class="context-menu-item" data-action="insert-col-left">Insert column left</div>
+        <div class="context-menu-item" data-action="insert-col-right">Insert column right</div>
+        <div class="context-menu-sep"></div>
+        <div class="context-menu-item" data-action="delete-row" style="color: var(--error)">Delete row</div>
+        <div class="context-menu-item" data-action="delete-col" style="color: var(--error)">Delete column</div>
+        <div class="context-menu-sep"></div>
+        <div class="context-menu-item" data-action="fill">Fill range...</div>
+        <div class="context-menu-item" data-action="clear">Clear cell</div>
+        <div class="context-menu-sep"></div>
+        <div class="context-menu-item" data-action="rename">Rename column</div>
+    </div>
+    <!-- Main Content -->
+    <div class="main-content">
+        <!-- Sidebar -->
+        <div class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <span class="sidebar-title">Workbook</span>
+                <button class="btn-icon" onclick="spreadsheet.toggleSidebar()">←</button>
+            </div>
+            <div class="sidebar-section">
+                <div class="sidebar-section-title">Sheets</div>
+                <div class="table-list" id="sheetList">
+                    <div class="table-item active">
+                        <span>📄 default.csv</span>
+                    </div>
+                </div>
+                <button class="btn" style="width: 100%; margin-top: 8px; justify-content: center; font-size: 11px;" onclick="spreadsheet.newSheet()">
+                    + New Sheet
+                </button>
+            </div>
+            <div class="sidebar-section">
+                <div class="sidebar-section-title">Views</div>
+                <div class="view-list" id="viewList">
+                    <div class="view-item active" onclick="spreadsheet.switchView('grid')">
+                        <span>⊞</span> Grid view
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Sheet Wrapper -->
+        <div class="sheet-wrapper">
+            <button class="sidebar-toggle" onclick="spreadsheet.toggleSidebar()" id="sidebarToggle">▶</button>
+            <!-- Tabs Bar -->
+            <div class="tabs-container" id="tabBar">
+                <div class="tab active" onclick="spreadsheet.switchSheet('default')">
+                    <span>default</span>
+                </div>
+                <div class="btn-new-tab" onclick="spreadsheet.newSheet()" title="New Sheet">+</div>
+            </div>
+            <div class="sheet-container" id="sheetContainer">
+                <div class="grid-wrapper" id="gridWrapper">
+                    <table id="spreadsheet">
+                        <thead id="tableHead"></thead>
+                        <tbody id="tableBody"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Status Bar -->
+    <div class="status-bar">
+        <div class="status-left">
+            <span class="status-item" id="cellCount">Ready</span>
+            <span class="status-item" id="recordCount"></span>
+        </div>
+        <div class="status-right">
+            <span class="status-item">Spreadsheet</span>
+        </div>
+    </div>
+    <script>
+        class SpreadsheetEngine {
+            constructor(rows = 20, cols = 10) {
+                this.data = [];
+                this.formulas = [];
+                this.headers = [];
+                this.rowCount = rows;
+                this.colCount = cols;
+                this.selectedCell = { row: 0, col: 0 };
+                this.currentTable = 'default';
+                this.tables = [];
+                this.openTabs = ['default'];
+                this.sidebarVisible = false;
+                this.init();
+            }
+            init() {
+                this.generateHeaders();
+                this.initializeData();
+                this.render();
+                this.renderTabs();
+                document.getElementById('sidebar')?.classList.add('collapsed');
+            }
+            generateHeaders() {
+                this.headers = [];
+                for (let i = 0; i < this.colCount; i++) {
+                    let name = '';
+                    let num = i + 1;
+                    while (num > 0) {
+                        num--;
+                        name = String.fromCharCode(65 + (num % 26)) + name;
+                        num = Math.floor(num / 26);
+                    }
+                    this.headers.push(name);
+                }
+            }
+            initializeData() {
+                this.data = Array.from({length: this.rowCount}, () => new Array(this.colCount).fill(''));
+                this.formulas = Array.from({length: this.rowCount}, () => new Array(this.colCount).fill(''));
+            }
+            toggleSidebar() {
+                this.sidebarVisible = !this.sidebarVisible;
+                document.getElementById('sidebar').classList.toggle('collapsed', !this.sidebarVisible);
+                document.getElementById('sidebarToggle').textContent = this.sidebarVisible ? '◀' : '▶';
+            }
+            newSheet() {
+                const name = prompt('Enter sheet name:');
+                if (!name) return;
+                this.switchSheet(name);
+            }
+            switchSheet(name) {
+                this.currentTable = name;
+                if (!this.openTabs.includes(name)) {
+                    this.openTabs.push(name);
+                }
+                this.renderTabs();
+                if (window.loadDataFromPhoton) window.loadDataFromPhoton();
+            }
+            closeTab(name, e) {
+                if (e) e.stopPropagation();
+                if (this.openTabs.length <= 1) return;
+                this.openTabs = this.openTabs.filter(t => t !== name);
+                if (this.currentTable === name) {
+                    this.switchSheet(this.openTabs[0]);
+                } else {
+                    this.renderTabs();
+                }
+            }
+            renderTabs() {
+                const tabBar = document.getElementById('tabBar');
+                if (!tabBar) return;
+                let html = this.openTabs.map(tab => `
+                    <div class="tab ${tab === this.currentTable ? 'active' : ''}" onclick="spreadsheet.switchSheet('${tab}')">
+                        <span>${tab}</span>
+                        <span class="tab-close" onclick="spreadsheet.closeTab('${tab}', event)">×</span>
+                    </div>
+                `).join('');
+                html += '<div class="btn-new-tab" onclick="spreadsheet.newSheet()" title="New Sheet">+</div>';
+                tabBar.innerHTML = html;
+            }
+            renderSheetList(tables) {
+                this.tables = tables;
+                const list = document.getElementById('sheetList');
+                if (!list) return;
+                list.innerHTML = tables.map(table => `
+                    <div class="table-item ${table.name === this.currentTable ? 'active' : ''}" onclick="spreadsheet.switchSheet('${table.name}')">
+                        <span>📄 ${table.name}</span>
+                        <span class="table-info">${(table.size / 1024).toFixed(1)} KB</span>
+                    </div>
+                `).join('');
+            }
+            render() {
+                const thead = document.getElementById('tableHead');
+                const tbody = document.getElementById('tableBody');
+                thead.innerHTML = '<tr><th class="corner"></th>' +
+                    this.headers.map(h => `<th class="col-header">${h}</th>`).join('') + '</tr>';
+                tbody.innerHTML = this.data.map((row, r) => `
+                    <tr>
+                        <th class="row-header">${r + 1}</th>
+                        ${row.map((cell, c) => `
+                            <td data-row="${r}" data-col="${c}">
+                                <div class="cell-content">${cell}</div>
+                            </td>
+                        `).join('')}
+                    </tr>
+                `).join('');
+            }
+            // Stubs for bridge overrides
+            addRow() {}
+            addColumn() {}
+            newFile() {}
+            openImportModal() {}
+            exportCSV() {}
+        }
+        const spreadsheet = new SpreadsheetEngine();
+        function setupPhotonBridge() {
+            if (!window.photon) { setTimeout(setupPhotonBridge, 100); return; }
+            if (window.initMCPBridge) window.initMCPBridge(spreadsheet);
+        }
+        document.addEventListener('DOMContentLoaded', setupPhotonBridge);
+    </script>
+    <script src="mcp-bridge.js"></script>
+</body>
+</html>