Bundle scripts

.npmignore

@@ -0,0 +1,11 @@
+node_modules
+.git
+.vscode
+dist
+**/*
+!dist/
+!dist/**
+!src/styles/
+!.gitignore
+.github
+/.github

README.md

@@ -23,23 +23,32 @@ npm install git+https://git.maze.io/maze/cyberduck.git#main
 
 Note: when installing from a git repository, npm will clone the source. For consumers to get built artifacts (the `dist` bundle and compiled types) the repository must either include the `dist` output or provide a `prepare`/build step that runs on install. If you prefer not to publish, using `npm pack` from the repo owner (tarball) ensures the built `dist` is included.
 
-## Including styles
+Git install prerequisites
 
-CyberDuck emits a single bundled stylesheet. Preferred import options:
+When a consumer installs the package directly from the Git repository, npm (and yarn) will run the package `prepare` script to produce the built `dist` and type artifacts. That means the consumer environment must be able to run the build:
 
-- Import the packaged CSS via the package export (recommended):
+- Have Node.js and npm installed (recommended Node 16+).
+- Have a working `npm install` that can fetch devDependencies so the build tools (`typescript`, `sass`, `vite`) are available.
+
+If you don't want consumers to run the build during install, either include the `dist` output in the repository (not recommended) or distribute a tarball produced by `npm pack` from the author so consumers can install the built package without running `prepare`.
+
+## Including styles (optional)
+
+Styles are optional — CyberDuck does not automatically inject styles when you import components. Import styles only if you want the theme and utilities applied.
+
+- Recommended (package export):
 
 ```ts
 import 'cyberduck/css'
 ```
 
-- Import the compiled CSS file directly (older setups):
+- Direct CSS file (older setups):
 
 ```ts
 import 'cyberduck/dist/cyberduck.css'
 ```
 
-- If you want to include and compile the SCSS source in your app (allows customization), import the SCSS entry:
+- Compile and include SCSS in your app (for customization):
 
 ```scss
 @use 'cyberduck/styles/cyberduck.scss' as *;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cyberduck",
   "private": false,
-  "version": "0.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://git.maze.io/maze/cyberduck.git"
@@ -21,7 +21,8 @@
   ],
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "scripts"
   ],
   "exports": {
     ".": {
@@ -34,30 +35,17 @@
     "./styles": "./src/styles/cyberduck.scss",
     "./styles/*": "./src/styles/*",
     "./css": "./dist/cyberduck.css",
-    "./Navbar": {
+    "./*": {
       "import": "./dist/cyberduck.es.js",
       "require": "./dist/cyberduck.cjs.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./Footer": {
-      "import": "./dist/cyberduck.es.js",
-      "require": "./dist/cyberduck.cjs.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./Layout": {
-      "import": "./dist/cyberduck.es.js",
-      "require": "./dist/cyberduck.cjs.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./Split": {
-      "import": "./dist/cyberduck.es.js",
-      "require": "./dist/cyberduck.cjs.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/*.d.ts"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -p tsconfig.build.json && vite build",
+    "build": "node ./scripts/build-if-needed.cjs",
+    "prepack": "npm run build",
+    "prepare": "npm run build",
     "lint": "eslint .",
     "lint:css": "stylelint \"src/**/*.{scss,css,sass}\"",
     "format:css": "prettier --write \"src/**/*.{scss,css,sass}\"",
@@ -69,8 +57,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.0.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "bootstrap": "^5.0.0",
     "react": "^19.0.0",
     "react-bootstrap": "^2.0.0",
@@ -82,8 +70,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.39.1",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "@types/node": "^25.3.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

scripts/build-if-needed.cjs

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+const cwd = process.cwd()
+const tsconfig = path.join(cwd, 'tsconfig.build.json')
+
+function runIfAvailable(cmdCheck, cmdRun, desc) {
+  try {
+    execSync(cmdCheck, { stdio: 'ignore' })
+    console.log(`Running ${desc}...`)
+    execSync(cmdRun, { stdio: 'inherit' })
+    return true
+  } catch (e) {
+    console.log(`Skipping ${desc} (tool not available or command failed).`)
+    return false
+  }
+}
+
+// 1) TypeScript declarations
+if (fs.existsSync(tsconfig)) {
+  // try to use local tsc if available
+  runIfAvailable('npx --no-install tsc -v', 'npx --no-install tsc -p tsconfig.build.json', 'TypeScript declaration build')
+} else {
+  console.log('No tsconfig.build.json found — skipping TypeScript declaration build')
+}
+
+// 2) Sass build (styles)
+runIfAvailable(
+  'npx --no-install sass --version',
+  'npx --no-install sass --no-source-map --style=compressed --load-path=node_modules src:dist',
+  'Sass styles build',
+)
+
+// 3) Vite build
+runIfAvailable('npx --no-install vite --version', 'npx --no-install vite build', 'Vite build')
+
+// 4) Generate per-subpath declaration wrappers in `dist/` by scanning emitted types
+try {
+  const distTypesRoot = path.join(cwd, 'dist', 'types')
+  if (fs.existsSync(distTypesRoot)) {
+    const collected = []
+    const walk = (dir) => {
+      for (const name of fs.readdirSync(dir)) {
+        const full = path.join(dir, name)
+        const stat = fs.statSync(full)
+        if (stat.isDirectory()) walk(full)
+        else if (stat.isFile() && name.endsWith('.d.ts')) collected.push(full)
+      }
+    }
+    walk(distTypesRoot)
+
+    // Create one wrapper per top-level d.ts basename (skip index.d.ts)
+    collected.forEach(full => {
+      const rel = path.relative(path.join(cwd, 'dist'), full).replace(/\\/g, '/')
+      const base = path.basename(full, '.d.ts')
+      if (base === 'index') return
+      const wrapperPath = path.join(cwd, 'dist', `${base}.d.ts`)
+      const target = `./${rel.replace(/\.d\.ts$/, '')}`
+      const content = `export { default } from '${target}';\n`
+      fs.writeFileSync(wrapperPath, content)
+    })
+    console.log('Generated per-subpath .d.ts wrappers into dist/')
+  } else {
+    console.log('No dist/types found — skipping generation of per-subpath wrappers')
+  }
+} catch (e) {
+  console.warn('Failed to generate per-subpath wrappers:', e && e.message)
+}

src/index.ts

@@ -4,5 +4,6 @@ export { default as Footer } from './components/Layout/Footer'
 export { default as Layout } from './components/Layout/Layout'
 export { default as Split } from './components/Layout/Split'
 
-// Export styles so consumers can import the theme
-import './index.scss'
+// Styles are optional — consumers can import the CSS or SCSS themselves:
+// import 'cyberduck/css'
+// import 'cyberduck/styles/cyberduck.scss'

tsconfig.build.json

@@ -6,5 +6,9 @@
     "emitDeclarationOnly": true,
     "outDir": "dist/types"
   },
-  "include": ["src"]
+  "include": [
+    "src/components",
+    "src/index.ts",
+    "src/styles"
+  ]
 }