@grapecity-software/dsh-spreadjs-editor 0.1.0

package/src/client/viewer.css

@@ -0,0 +1,212 @@
+/* dsh-spreadjs-editor panel styles */
+
+.dsh-spreadjs-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dsw-bg, #ffffff);
+  color: var(--dsw-fg, #1f2329);
+}
+
+.dsh-spreadjs-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  row-gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--dsw-border, #d5d8de);
+  background: var(--dsw-bg-subtle, #f7f8fa);
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.dsh-spreadjs-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsh-spreadjs-spacer {
+  flex: 1 1 auto;
+}
+
+.dsh-spreadjs-btn {
+  appearance: none;
+  border: 1px solid var(--dsw-border, #c9cdd4);
+  background: var(--dsw-bg, #ffffff);
+  color: inherit;
+  border-radius: 6px;
+  padding: 5px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.dsh-spreadjs-btn:hover:not(:disabled) {
+  background: var(--dsw-bg-hover, #eef0f3);
+}
+
+.dsh-spreadjs-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.dsh-spreadjs-btn-primary {
+  background: #3b6ef6;
+  border-color: #3b6ef6;
+  color: #fff;
+}
+
+.dsh-spreadjs-btn-primary:hover:not(:disabled) {
+  background: #2f5ce0;
+}
+
+.dsh-spreadjs-export-select {
+  max-width: 110px;
+  padding: 4px 6px;
+  font-size: 12px;
+  border: 1px solid var(--dsw-border, #c9cdd4);
+  border-radius: 6px;
+  background: var(--dsw-bg, #ffffff);
+  color: inherit;
+}
+
+.dsh-spreadjs-editor {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dsh-spreadjs-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.dsh-spreadjs-host > div {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.dsh-spreadjs-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsw-fg-muted, #8a919c);
+  font-size: 13px;
+  background: var(--dsw-bg, #ffffff);
+}
+
+.dsh-spreadjs-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.72);
+  color: #4b5563;
+  font-size: 13px;
+  z-index: 5;
+}
+
+.dsh-spreadjs-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #c0392b;
+  font-size: 13px;
+  padding: 24px;
+  text-align: center;
+  z-index: 5;
+  background: var(--dsw-bg, #ffffff);
+}
+
+.dsh-spreadjs-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--dsw-border, #d5d8de);
+  background: var(--dsw-bg-subtle, #fafbfc);
+  color: var(--dsw-fg-muted, #6b7280);
+  font-size: 12px;
+  flex: 0 0 auto;
+}
+
+.dsh-spreadjs-status-error {
+  color: #c0392b;
+}
+
+.dsh-spreadjs-status-busy {
+  color: #1a56db;
+}
+
+/* Follow the OS light/dark preference. The Designer chrome is themed through
+   GC.Spread.Sheets.Designer.setTheme(); these rules are a fallback for the
+   Designer container and the spreadsheet canvas so it stays readable in dark. */
+@media (prefers-color-scheme: dark) {
+  .dsh-spreadjs-panel {
+    color-scheme: dark;
+  }
+
+  .dsh-spreadjs-header {
+    background: #1e2227;
+    border-color: #343a42;
+  }
+
+  .dsh-spreadjs-btn {
+    background: #262b32;
+    border-color: #3a414a;
+    color: #e8eaed;
+  }
+
+  .dsh-spreadjs-btn:hover:not(:disabled) {
+    background: #2c3138;
+  }
+
+  .dsh-spreadjs-export-select {
+    background: #262b32;
+    border-color: #3a414a;
+    color: #e8eaed;
+  }
+
+  .dsh-spreadjs-loading {
+    background: rgba(20, 22, 26, 0.72);
+    color: #c7ccd3;
+  }
+
+  .dsh-spreadjs-error {
+    background: #171a1f;
+    color: #f0a0a0;
+  }
+
+  .dsh-spreadjs-host,
+  .dsh-spreadjs-host .gc-designer-container,
+  .dsh-spreadjs-host .spread-sheets,
+  .dsh-spreadjs-host .sheet-container,
+  .dsh-spreadjs-host .rowHeader,
+  .dsh-spreadjs-host .colHeader,
+  .dsh-spreadjs-host .hscrollbar,
+  .dsh-spreadjs-host .vscrollbar {
+    background-color: #1e2227;
+    color: #e8eaed;
+  }
+}

package/src/index.ts

@@ -0,0 +1,67 @@
+/**
+ * dsh-spreadjs-editor — node half.
+ *
+ * Registers the `/spreadjs` prefix route on the harness web server. The
+ * better-sidebar browser half reads and writes files through ui-all's session
+ * routes; this host half only supplies the SpreadJS license/config handshake.
+ *
+ * Security posture: the server binds to 127.0.0.1 by default and this plugin
+ * adds no external exposure of its own.
+ */
+
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { Context } from '@deepseek-ai/cordis'
+
+export const name = 'dsh-spreadjs-editor'
+
+/** Required service: the web server whose route table this plugin extends. */
+export const inject = ['webServer']
+
+/** Plugin configuration (patch layer). */
+export interface Config {
+  /** SpreadJS license key; empty runs the evaluation build. @default '' */
+  licenseKey?: string
+}
+
+function sendJson(res: ServerResponse, status: number, body: unknown): void {
+  const data = JSON.stringify(body)
+  res.writeHead(status, {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Content-Length': Buffer.byteLength(data),
+    'Cache-Control': 'no-store',
+  })
+  res.end(data)
+}
+
+function readPathname(req: IncomingMessage): string {
+  return new URL(req.url ?? '/', 'http://localhost').pathname
+}
+
+export function apply(ctx: Context, config: Config = {}): void {
+  const webServer = ctx.webServer
+
+  const disposer = webServer.register({
+    kind: 'prefix',
+    path: '/spreadjs',
+    handler: (req: IncomingMessage, res: ServerResponse): void => {
+      try {
+        const pathname = readPathname(req)
+        if (pathname === '/spreadjs/api/health') {
+          sendJson(res, 200, { ok: true })
+          return
+        }
+        if (pathname === '/spreadjs/api/config') {
+          sendJson(res, 200, { licenseKey: config.licenseKey ?? '' })
+          return
+        }
+        sendJson(res, 404, { error: 'unknown endpoint' })
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error)
+        if (!res.headersSent) sendJson(res, 500, { error: message })
+        else res.destroy()
+      }
+    },
+  })
+
+  ctx.effect(() => disposer, 'dsh-spreadjs-editor: /spreadjs routes')
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src", "tests"]
+}

package/tsdown.config.ts

@@ -0,0 +1,110 @@
+/**
+ * tsdown build for dsh-spreadjs-editor.
+ *
+ * Two artifacts (aligned with the harness client bundle preset):
+ *  - lib/index.js  — node half (ESM). Runs on the harness host: registers the
+ *    /spreadjs file bridge on ctx.webServer. No runtime dependencies beyond
+ *    node builtins (dsh services are injected, not imported).
+ *  - lib/client.js — browser half (CJS closure factory). Loaded by the
+ *    client-modules system through window.__ModuleLoader__.load({id, factory}).
+ *    React resolves from the module table and stays external; SpreadJS and
+ *    the stylesheets are inlined into the bundle.
+ */
+import { readFile } from 'node:fs/promises'
+import type { UserConfig } from 'tsdown'
+
+const PKG_ID = 'dsh-spreadjs-editor'
+
+/** Module-table specifiers the browser bundle resolves at runtime. */
+const CLIENT_EXTERNALS = new Set([
+  'react',
+  'react/jsx-runtime',
+  'react-dom',
+  'react-dom/client',
+  '@deepseek-ai/cordis',
+])
+
+/** Inline any `*.css` import as a raw string module (injected by styles.ts). */
+function cssAsText() {
+  const PREFIX = '\0dsh-spreadjs-css:'
+  const SUFFIX = '.mjs'
+  return {
+    name: 'dsh-spreadjs-css-as-text',
+    async resolveId(this: any, source: string, importer: string | undefined) {
+      if (!source.endsWith('.css') || importer === undefined) return null
+      const resolved = await this.resolve(source, importer, { skipSelf: true })
+      if (resolved === null) return null
+      const fileId = resolved.id
+      this.addWatchFile(fileId)
+      // Virtual id must NOT end in `.css` or tsdown's css-guard intercepts it.
+      return PREFIX + fileId + SUFFIX
+    },
+    async load(this: any, id: string) {
+      if (!id.startsWith(PREFIX)) return null
+      const fileId = id.slice(PREFIX.length, -SUFFIX.length)
+      const source = await readFile(fileId, 'utf8')
+      return `export default ${JSON.stringify(source)}`
+    },
+  }
+}
+
+const nodeHalf: UserConfig = {
+  name: PKG_ID,
+  entry: { index: 'src/index.ts' },
+  outDir: 'lib',
+  format: ['esm'],
+  platform: 'node',
+  target: 'es2022',
+  fixedExtension: false,
+  dts: false,
+  clean: true,
+  sourcemap: true,
+  deps: {
+    // Relative sources inline; node: builtins stay external; nothing else
+    // (the node half imports no bare runtime deps — dsh services are injected).
+    neverBundle: specifier => specifier.startsWith('node:'),
+    alwaysBundle: specifier => specifier.startsWith('.'),
+  },
+}
+
+const clientHalf: UserConfig = {
+  name: `${PKG_ID}/client`,
+  entry: { client: 'src/client/index.ts' },
+  outDir: 'lib',
+  format: 'cjs',
+  platform: 'browser',
+  target: 'es2022',
+  fixedExtension: false,
+  dts: false,
+  clean: false,
+  sourcemap: true,
+  deps: {
+    // Requested module-table rows stay imports; everything else inlines.
+    neverBundle: specifier => CLIENT_EXTERNALS.has(specifier),
+    alwaysBundle: specifier => !CLIENT_EXTERNALS.has(specifier),
+  },
+  // Dual-mode libs resolve their browser flavor; inline deps that read
+  // process.env.NODE_ENV / import.meta.env.MODE need the substitutions.
+  inputOptions: {
+    resolve: {
+      conditionNames: [
+        (process.env.NODE_ENV ?? 'production') === 'development' ? 'development' : 'production',
+        'browser', 'import', 'module', 'default',
+      ],
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+    'import.meta.env.MODE': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+    'import.meta.env': JSON.stringify({ MODE: process.env.NODE_ENV ?? 'production' }),
+  },
+  plugins: [cssAsText()],
+  outputOptions: {
+    entryFileNames: 'client.js',
+    banner: `window.__ModuleLoader__.load({ id: ${JSON.stringify(PKG_ID)}, factory: (require) => {`,
+    footer: 'return module.exports; } });',
+    intro: 'var module = { exports: {} }; var exports = module.exports;',
+  },
+}
+
+export default [nodeHalf, clientHalf]