@octostar/map-component 0.1.2

package/package.json

@@ -0,0 +1,194 @@
+{
+  "name": "@octostar/map-component",
+  "version": "0.1.2",
+  "type": "module",
+  "license": "UNLICENSED",
+  "packageManager": "pnpm@9.15.0",
+  "description": "MapLibre-based map editor component",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./vite": {
+      "types": "./vite-plugin.d.mts",
+      "default": "./vite-plugin.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "fonts",
+    "vite-plugin.mjs",
+    "vite-plugin.d.mts",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "NODE_ENV=development tsx server/index.ts",
+    "build": "tsx script/build.ts",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc -p tsconfig.build.json",
+    "start": "NODE_ENV=production node dist-app/index.cjs",
+    "check": "tsc",
+    "typecheck": "tsc --noEmit",
+    "db:push": "drizzle-kit push",
+    "prepare": "pnpm run build:lib",
+    "prepublishOnly": "pnpm run build:lib"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@mapbox/mapbox-gl-draw": "^1.5.1",
+    "@mapbox/togeojson": "^0.16.2",
+    "@turf/turf": "^7.3.1",
+    "antd": "^5.27.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "dayjs": "^1.11.19",
+    "file-saver": "^2.0.5",
+    "lucide-react": "^0.453.0",
+    "maplibre-gl": "^5.14.0",
+    "proj4": "^2.20.2",
+    "tailwind-merge": "^2.6.0",
+    "three": "^0.182.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@jridgewell/trace-mapping": "^0.3.25",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.7",
+    "@radix-ui/react-aspect-ratio": "^1.1.3",
+    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-context-menu": "^2.2.7",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-menubar": "^1.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.6",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "@radix-ui/react-scroll-area": "^1.2.4",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@radix-ui/react-toast": "^1.2.7",
+    "@radix-ui/react-toggle": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "@replit/vite-plugin-cartographer": "^0.4.4",
+    "@replit/vite-plugin-dev-banner": "^0.1.1",
+    "@replit/vite-plugin-runtime-error-modal": "^0.0.3",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.3",
+    "@tanstack/react-query": "^5.60.5",
+    "@types/connect-pg-simple": "^7.0.3",
+    "@types/express": "4.17.21",
+    "@types/express-session": "^1.18.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.9",
+    "@types/node": "20.16.11",
+    "@types/passport": "^1.0.16",
+    "@types/passport-local": "^1.0.38",
+    "@types/proj4": "^2.5.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/three": "^0.182.0",
+    "@types/ws": "^8.5.13",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.20",
+    "cmdk": "^1.1.1",
+    "connect-pg-simple": "^10.0.0",
+    "drizzle-kit": "^0.31.4",
+    "drizzle-orm": "^0.39.3",
+    "drizzle-zod": "^0.7.0",
+    "embla-carousel-react": "^8.6.0",
+    "esbuild": "^0.25.0",
+    "express": "^4.21.2",
+    "express-session": "^1.18.1",
+    "framer-motion": "^11.13.1",
+    "input-otp": "^1.4.2",
+    "memorystore": "^1.6.7",
+    "nanoid": "^5.0.9",
+    "next-themes": "^0.4.6",
+    "passport": "^0.7.0",
+    "passport-local": "^1.0.0",
+    "pg": "^8.16.3",
+    "postcss": "^8.4.47",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.55.0",
+    "react-icons": "^5.4.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.2",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.20.5",
+    "tw-animate-css": "^1.2.5",
+    "typescript": "5.6.3",
+    "vaul": "^1.1.2",
+    "vite": "^5.4.20",
+    "wouter": "^3.3.5",
+    "ws": "^8.18.0",
+    "zod": "^3.24.2",
+    "zod-validation-error": "^3.4.0"
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octostarco/octostar-map-component.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "keywords": [
+    "map",
+    "maplibre",
+    "geojson",
+    "react",
+    "editor",
+    "drawing",
+    "gis"
+  ],
+  "pnpm": {
+    "overrides": {
+      "esbuild@<=0.24.2": ">=0.25.0",
+      "qs@<6.14.1": ">=6.14.1"
+    }
+  }
+}

package/vite-plugin.d.mts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+
+export declare function mapFontsPlugin(): Plugin;

package/vite-plugin.mjs

@@ -0,0 +1,74 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const fontsDir = join(__dirname, 'fonts');
+
+const FONT_VARIANTS = fs.existsSync(fontsDir)
+  ? fs.readdirSync(fontsDir).filter(f => fs.statSync(join(fontsDir, f)).isDirectory())
+  : [];
+
+/**
+ * Map a composite font stack (e.g. "Montserrat Regular,Open Sans Regular,Noto Sans Regular")
+ * to the best locally available Noto Sans variant by inspecting keywords in the stack.
+ */
+function resolveFontStack(fontstack) {
+  const lower = fontstack.toLowerCase();
+  if (lower.includes('bold') || lower.includes('semibold') || lower.includes('medium')) {
+    return 'Noto Sans Bold';
+  }
+  if (lower.includes('italic') || lower.includes('oblique')) {
+    return 'Noto Sans Italic';
+  }
+  return 'Noto Sans Regular';
+}
+
+function fontsMiddleware(req, res, next) {
+  const decoded = decodeURIComponent(req.url);
+  // Expected shape: /<fontstack>/<range>.pbf
+  const match = decoded.match(/^\/([^/]+)\/(\d+-\d+\.pbf)$/);
+  if (!match) return next();
+
+  const [, requestedStack, rangeFile] = match;
+
+  // Try exact match first, then fall back to resolved variant
+  let fontDir = requestedStack;
+  let filePath = join(fontsDir, fontDir, rangeFile);
+
+  if (!fs.existsSync(filePath)) {
+    fontDir = resolveFontStack(requestedStack);
+    filePath = join(fontsDir, fontDir, rangeFile);
+  }
+
+  if (fs.existsSync(filePath)) {
+    res.setHeader('Content-Type', 'application/x-protobuf');
+    res.setHeader('Cache-Control', 'public, max-age=86400');
+    fs.createReadStream(filePath).pipe(res);
+  } else {
+    next();
+  }
+}
+
+/**
+ * Vite plugin that serves the map component's bundled glyph fonts at /fonts/.
+ * Works with the default glyphsUrl ('/fonts/{fontstack}/{range}.pbf').
+ *
+ * Composite font stacks from tile styles (e.g. "Montserrat Regular,Open Sans Regular")
+ * are automatically mapped to the bundled Noto Sans variants.
+ *
+ * Usage:
+ *   import { mapFontsPlugin } from '@octostar/map-component/vite';
+ *   export default defineConfig({ plugins: [react(), mapFontsPlugin()] });
+ */
+export function mapFontsPlugin() {
+  return {
+    name: 'octostar-map-fonts',
+    configureServer(server) {
+      server.middlewares.use('/fonts', fontsMiddleware);
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use('/fonts', fontsMiddleware);
+    },
+  };
+}