Version 1.1.2

.gitignore

@@ -141,7 +141,7 @@ out
 
 # Nuxt.js build / generate output
 .nuxt
-dist
+dist/*
 
 # Gatsby files
 .cache/

.npmignore

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

.stylelintrc.json

@@ -6,6 +6,11 @@
     "stylelint-scss",
     "stylelint-order"
   ],
+  "ignoreFiles": [
+    "**/node_modules/**",
+    "dist/**",
+    "src/vendor/**"
+  ],
   "customSyntax": "postcss-scss",
   "rules": {
     "at-rule-no-unknown": null,

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",
+  "private": true,
+  "version": "1.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://git.maze.io/maze/cyberduck.git"
@@ -12,7 +12,7 @@
   "homepage": "https://git.maze.io/maze/cyberduck#readme",
   "type": "module",
   "main": "dist/cyberduck.cjs.js",
-  "module": "dist/cyberduck.es.js",
+  "module": "dist/esm.js",
   "types": "dist/types/index.d.ts",
   "style": "dist/cyberduck.css",
   "sideEffects": [
@@ -21,56 +21,44 @@
   ],
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "scripts"
   ],
   "exports": {
     ".": {
-      "import": "./dist/cyberduck.es.js",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
       "require": "./dist/cyberduck.cjs.js",
-      "default": "./dist/cyberduck.es.js",
-      "types": "./dist/types/index.d.ts"
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
     "./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",
+      "import": "./dist/index.js",
+      "require": "./dist/cyberduck.cjs.js"
     }
   },
   "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}\"",
-    "styles:build": "sass --no-source-map --style=compressed --load-path=node_modules src:dist",
-    "styles:check": "sass --no-source-map --update --load-path=node_modules src:dist",
-    "styles:dev": "sass --watch --no-source-map --load-path=node_modules src:dist",
+    "styles:build": "sass --no-source-map --style=compressed --load-path=node_modules --quiet-deps src:dist",
+    "styles:check": "sass --no-source-map --update --load-path=node_modules --quiet-deps src:dist",
+    "styles:dev": "sass --watch --no-source-map --load-path=node_modules --quiet-deps src:dist",
     "preview": "vite preview"
   },
   "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",
@@ -96,11 +84,6 @@
     "lint-staged": "^16.3.2",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-bootstrap": "^2.10.10",
-    "react-dom": "^19.2.4",
-    "react-router": "^7.13.1",
-    "react-router-dom": "^7.13.1",
     "sass": "^1.97.3",
     "stylelint": "^17.4.0",
     "stylelint-config-standard-scss": "^17.0.0",

scripts/build-if-needed.cjs

@@ -0,0 +1,116 @@
+#!/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 --quiet-deps --silence-deprecation=if-function,global-builtin,color-functions 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)
+}
+
+// Ensure a minimal `dist/types/index.d.ts` exists so consumers installing
+// from the packed tarball won't see a "could not find declaration file" error.
+try {
+  const indexDts = path.join(cwd, 'dist', 'types', 'index.d.ts')
+  if (!fs.existsSync(indexDts)) {
+    const dir = path.dirname(indexDts)
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true })
+    const fallback = `/// <reference types="react" />
+  export const Navbar: import('react').FC<any>;
+  export const Footer: import('react').FC<any>;
+  export const Layout: import('react').FC<any>;
+  export const Split: import('react').FC<any> & { Panel: import('react').FC<any> };
+  export default { Navbar, Footer, Layout, Split };
+  `
+    fs.writeFileSync(indexDts, fallback)
+    console.log('Wrote fallback dist/types/index.d.ts')
+  }
+} catch (e) {
+  console.warn('Failed to write fallback index.d.ts:', e && e.message)
+}
+
+// Write a small ESM wrapper that re-exports everything from the generated
+// `cyberduck.es.js` bundle. Some browser toolchains import the package
+// entry directly; having a tiny wrapper helps ensure named exports are
+// preserved and visible to native ESM loaders.
+try {
+  const esmWrapperPath = path.join(cwd, 'dist', 'esm.js')
+  // Re-export named bindings and build a local default object so we don't
+  // need to import the bundle's default (some tools choke on that).
+  const esmContent = `import { Navbar, Footer, Layout, Split } from './cyberduck.es.js';\nexport { Navbar, Footer, Layout, Split };\nconst __default = { Navbar, Footer, Layout, Split };\nexport default __default;\n`;
+  fs.writeFileSync(esmWrapperPath, esmContent)
+  console.log('Wrote dist/esm.js wrapper')
+} catch (e) {
+  console.warn('Failed to write dist/esm.js wrapper:', e && e.message)
+}
+try {
+  const indexPath = path.join(cwd, 'dist', 'index.js')
+  // index.js mirrors esm.js to help environments that resolve package root
+  // to an index file instead of reading package.json fields.
+  const indexContent = `import { Navbar, Footer, Layout, Split } from './cyberduck.es.js';\nexport { Navbar, Footer, Layout, Split };\nconst __default = { Navbar, Footer, Layout, Split };\nexport default __default;\n`;
+  fs.writeFileSync(indexPath, indexContent)
+  console.log('Wrote dist/index.js wrapper')
+} catch (e) {
+  console.warn('Failed to write dist/index.js wrapper:', e && e.message)
+}

src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Footer: React.FC = () => {
+export const Footer: React.FC = () => {
   return (
     <footer className="footer mt-auto py-3 bg-dark text-light">
       <div className="container text-center">© CyberDuck</div>

src/components/Layout.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
 
-interface LayoutProps {
+export interface LayoutProps {
   children: React.ReactNode
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="app-layout d-flex flex-column">
       <Navbar />

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Navbar: React.FC = () => {
+export const Navbar: React.FC = () => {
   return (
     <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
       <div className="container-fluid">

src/components/Split.tsx

@@ -15,7 +15,7 @@ export type AccentKey =
 
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: number
-  variant?: 'border' | 'solid'
+  variant?: '' | 'border' | 'solid'
   accent?: AccentKey
   children?: React.ReactNode
 }
@@ -23,13 +23,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
 const Panel: React.FC<PanelProps> = ({ children }) => <>{children}</>
 Panel.displayName = 'SplitPanel'
 
-interface SplitProps {
+export interface SplitProps {
   direction?: 'horizontal' | 'vertical'
   gutter?: string | number
   className?: string
   // allow any children but we will look for Panel elements
   children?: React.ReactNode
-  variant?: 'border' | 'solid'
+  variant?: '' | 'border' | 'solid'
   accent?: AccentKey
 }
 
@@ -53,7 +53,7 @@ const Split: React.FC<SplitProps> & { Panel: React.FC<PanelProps> } = ({
 
   // detect Panel children and extract sizes and passthrough props
   const sizes: (number | null)[] = childrenArray.map((c) => {
-    if (React.isValidElement(c) && (c.type as any).displayName === 'SplitPanel') {
+    if (React.isValidElement(c) && (c.type as any)?.displayName === 'SplitPanel') {
       const p = c as React.ReactElement<PanelProps>
       return typeof p.props.size === 'number' ? p.props.size : 1
     }
@@ -71,7 +71,7 @@ const Split: React.FC<SplitProps> & { Panel: React.FC<PanelProps> } = ({
         let extraClass = ''
         let extraStyle: React.CSSProperties | undefined
 
-        if (React.isValidElement(child) && (child.type as any).displayName === 'SplitPanel') {
+        if (React.isValidElement(child) && (child.type as any)?.displayName === 'SplitPanel') {
           const p = child as React.ReactElement<PanelProps>
           extraClass = p.props.className || ''
           extraStyle = p.props.style
@@ -90,7 +90,9 @@ const Split: React.FC<SplitProps> & { Panel: React.FC<PanelProps> } = ({
         }
 
         const mergedStyle = extraStyle ? { ...style, ...extraStyle } : style
-        const childElem = React.isValidElement(child) ? (child as React.ReactElement<PanelProps>) : null
+        const childElem = React.isValidElement(child) && (child.type as any)?.displayName === 'SplitPanel'
+          ? (child as React.ReactElement<PanelProps>)
+          : null
         const variant = childElem ? childElem.props.variant ?? splitVariant : splitVariant
         // Determine accent: a panel with its own `accent` always uses it.
         // Otherwise, if the parent `Split` has an `accent`, only the first
@@ -121,16 +123,13 @@ const Split: React.FC<SplitProps> & { Panel: React.FC<PanelProps> } = ({
             accentBR = true
           }
         }
-        let variantClass = ''
-        if (variant === 'border') variantClass = 'pane--border'
-        else if (variant === 'solid') variantClass = 'pane--solid'
-
+        let variantClass = variant === '' ? '' : `pane--${variant}`
         const paneClass = `pane ${variantClass} ${extraClass} ${accentTL ? 'pane--accent--tl' : ''} ${accentBR ? 'pane--accent--br' : ''}`.trim()
 
         // attach accent color as CSS var for the mixin to pick up
-        const finalStyle = { ...mergedStyle }
+        const finalStyle: React.CSSProperties = { ...mergedStyle }
         if (accent) {
-          ;(finalStyle as any)['--pane-accent-color'] = `var(--color-variant-${accent})`
+          (finalStyle as any)['--pane-accent-color'] = `var(--color-variant-${accent})`
         }
 
         return (

src/index.ts

@@ -1,8 +1,11 @@
-// Library entry: re-export key components and include styles
-export { default as Navbar } from './components/Layout/Navbar'
-export { default as Footer } from './components/Layout/Footer'
-export { default as Layout } from './components/Layout/Layout'
-export { default as Split } from './components/Layout/Split'
+import Navbar from './components/Navbar.tsx'
+import Footer from './components/Footer.tsx'
+import Layout from './components/Layout.tsx'
+import Split from './components/Split.tsx'
 
-// Export styles so consumers can import the theme
-import './index.scss'
+// also export named components so consumers can import { Split } from 'cyberduck'
+export { Navbar, Footer, Layout, Split }
+
+// Styles are optional — consumers can import the CSS or SCSS themselves:
+// import 'cyberduck/css'
+// import 'cyberduck/styles/cyberduck.scss'

src/pages/LayoutHorizontal.tsx

@@ -1,5 +1,5 @@
-import Layout from '../components/Layout/Layout'
-import Split from '../components/Layout/Split'
+import Layout from '../components/Layout'
+import Split from '../components/Split'
 
 export default function LayoutHorizontal() {
   return (

src/pages/LayoutShowcase.tsx

@@ -1,5 +1,5 @@
-import Layout from '../components/Layout/Layout'
-import Split from '../components/Layout/Split'
+import Layout from '../components/Layout'
+import Split from '../components/Split'
 
 export default function LayoutShowcase() {
   return (

src/pages/LayoutVertical.tsx

@@ -1,5 +1,5 @@
-import Layout from '../components/Layout/Layout'
-import Split from '../components/Layout/Split'
+import Layout from '../components/Layout'
+import Split from '../components/Split'
 
 export default function LayoutVertical() {
   return (

src/styles/components/_table.scss

@@ -1,4 +1,5 @@
 @use '../variables' as vars;
+@use 'sass:map' as map;
 
 // Table overrides scaffold
 table {
@@ -27,7 +28,7 @@ table {
     th *,
     td,
     td * {
-      color: var(--color-variant-green) !important;
+      color: var(--color-variant-green);
     }
   }
 
@@ -38,3 +39,8 @@ table {
     }
   }
 }
+
+// Override default table text color for better contrast with CyberDuck palette (especially on striped rows)
+.table > thead > tr > th {
+  color: map.get(vars.$cyberduck-neon, green);
+}

tsconfig.build.json

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

vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig(({ command }) => ({
         'react-bootstrap',
       ],
       output: {
+        exports: 'named',
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
@@ -35,4 +36,11 @@ export default defineConfig(({ command }) => ({
       },
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      },
+    },
+  },
 }))