+ +

+ + + Tile Server + {personal ? `личный ${new URL(API_ORIGIN).host}` : new URL(API_ORIGIN).host} + +

+ + Slug + setSlugDraft(e.target.value)} + autoComplete="off" + spellCheck={false} + placeholder="login" + /> + + + Токен + setTokenDraft(e.target.value)} + autoComplete="off" + spellCheck={false} + placeholder="ts_…" + /> + + + {personal ? ( + + ) : null} + {personal ? "личный" : "публичный"} + + Источник + + + + Стиль + + + {formatStatus(status)} + + + OpenAPI + +

+ + + + + + {banner ?

{banner}

: null} + + ); +} diff --git a/web-demo/src/access.ts b/web-demo/src/access.ts new file mode 100644 index 0000000..e61f2f4 --- /dev/null +++ b/web-demo/src/access.ts @@ -0,0 +1,78 @@ +const SLUG_KEY = "ts.demo.slug"; +const TOKEN_KEY = "ts.demo.token"; + +export const API_ORIGIN = (import.meta.env.VITE_API_ORIGIN ?? "https://tile-server.ru").replace(/\/$/, ""); + +export function serviceUrl(path: string): string { + if (/^https?:\/\//i.test(path)) { + return path; + } + return `${API_ORIGIN}${path.startsWith("/") ? path : `/${path}`}`; +} + +export type Access = { + slug: string; + token: string; +}; + +export function isPersonal(access: Access): boolean { + return access.slug.length > 0 && access.token.length > 0; +} + +export function readAccess(): Access { + const params = new URLSearchParams(window.location.search); + const slug = (params.get("slug") ?? sessionStorage.getItem(SLUG_KEY) ?? "").trim(); + const token = (params.get("token") ?? sessionStorage.getItem(TOKEN_KEY) ?? "").trim(); + return { slug, token }; +} + +export function persistAccess(access: Access): void { + if (access.slug) { + sessionStorage.setItem(SLUG_KEY, access.slug); + } else { + sessionStorage.removeItem(SLUG_KEY); + } + + if (access.token) { + sessionStorage.setItem(TOKEN_KEY, access.token); + } else { + sessionStorage.removeItem(TOKEN_KEY); + } + + const url = new URL(window.location.href); + if (url.searchParams.has("slug") || url.searchParams.has("token")) { + url.searchParams.delete("slug"); + url.searchParams.delete("token"); + window.history.replaceState(null, "", `${url.pathname}${url.search}${url.hash}`); + } +} + +export function stylesListUrl(access: Access): string { + if (isPersonal(access)) { + return serviceUrl(`/u/${encodeURIComponent(access.slug)}/styles?token=${encodeURIComponent(access.token)}`); + } + return serviceUrl("/api/v1/styles"); +} + +export function styleUrl(access: Access, name: string, sourceId: string): string { + if (isPersonal(access)) { + return serviceUrl( + `/u/${encodeURIComponent(access.slug)}/styles/${encodeURIComponent(name)}?source=${encodeURIComponent(sourceId)}&token=${encodeURIComponent(access.token)}` + ); + } + return serviceUrl(`/api/v1/styles/${encodeURIComponent(name)}?source=${encodeURIComponent(sourceId)}`); +} + +export function rewriteServiceUrl(url: string, access: Access): string { + const resolved = new URL(url, `${API_ORIGIN}/`); + const isService = resolved.pathname.startsWith("/u/") || resolved.pathname.startsWith("/api/"); + if (!isService) { + return resolved.href; + } + + if (isPersonal(access) && resolved.pathname.startsWith("/u/") && !resolved.searchParams.has("token")) { + resolved.searchParams.set("token", access.token); + } + + return `${API_ORIGIN}${resolved.pathname}${resolved.search}`; +} diff --git a/web-demo/src/api.ts b/web-demo/src/api.ts new file mode 100644 index 0000000..9139489 --- /dev/null +++ b/web-demo/src/api.ts @@ -0,0 +1,43 @@ +export type TilesetBounds = { + minLon: number; + minLat: number; + maxLon: number; + maxLat: number; +}; + +export type SourceItem = { + id: string; + name: string; + enabled: boolean; + center: number[]; + status: string; + downloadedAt?: string | null; + builtAt?: string | null; + lastError?: string | null; + bounds?: TilesetBounds | null; +}; + +export type StyleItem = { + name: string; + url: string; +}; + +export type SyncStatus = { + isRunning: boolean; + lastStartedAt?: string | null; + lastFinishedAt?: string | null; + nextScheduledAt?: string | null; + lastError?: string | null; +}; + +export async function fetchJson(url: string, options?: RequestInit): Promise { + const response = await fetch(url, options); + if (!response.ok) { + const body = await response.text(); + throw new Error(body || `${response.status} ${response.statusText}`); + } + if (response.status === 204) { + return undefined as T; + } + return (await response.json()) as T; +} diff --git a/web-demo/src/demo.css b/web-demo/src/demo.css new file mode 100644 index 0000000..eabc303 --- /dev/null +++ b/web-demo/src/demo.css @@ -0,0 +1,476 @@ +:root { + --bg: #0b0f14; + --panel: rgba(14, 18, 26, 0.78); + --panel-strong: rgba(10, 13, 18, 0.92); + --text: #f4f1ea; + --muted: #9aa6b4; + --line: rgba(244, 241, 234, 0.1); + --line-strong: rgba(244, 241, 234, 0.16); + --accent: #e8923d; + --accent-press: #f3a85a; + --accent-ink: #1a1208; + --danger: #ff8a7a; + --ok: #7dcea0; + --warn: #f5c16c; + --radius: 16px; + --radius-sm: 10px; + --font: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", ui-sans-serif, system-ui, sans-serif; + --hud-z: 3; + --shadow: 0 18px 50px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.04) inset; + --space: 12px; +} + +* { box-sizing: border-box; } + +html { + color-scheme: dark; +} + +html, body, #root, #map { + margin: 0; + width: 100%; + height: 100%; +} + +body { + font-family: var(--font); + color: var(--text); + background: var(--bg); + overflow: hidden; + letter-spacing: 0.01em; +} + +.hud { + position: absolute; + z-index: var(--hud-z); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%), + var(--panel); + border: 1px solid var(--line); + border-radius: var(--radius); + box-shadow: var(--shadow); + backdrop-filter: blur(22px) saturate(1.35); + -webkit-backdrop-filter: blur(22px) saturate(1.35); +} + +.hud--top { + top: var(--space); + left: var(--space); + max-width: min(70rem, calc(100vw - 4.5rem)); + display: flex; + flex-wrap: nowrap; + align-items: flex-end; + gap: 0.85rem 1rem; + padding: 0.7rem 0.8rem 0.75rem; +} + +.brand { + display: flex; + align-items: center; + gap: 0.7rem; + padding: 0 0.2rem 0.15rem; + flex: 0 0 auto; +} + +.brand__mark { + display: grid; + place-items: center; + width: 2.25rem; + height: 2.25rem; + border-radius: 11px; + color: var(--accent); + background: rgba(232, 146, 61, 0.12); + border: 1px solid rgba(232, 146, 61, 0.28); +} + +.brand__text { + display: flex; + flex-direction: column; + gap: 0.08rem; +} + +.brand strong { + font-size: 0.92rem; + font-weight: 650; + letter-spacing: 0.01em; +} + +.brand__text span { + color: var(--muted); + font-size: 0.68rem; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.toolbar { + display: flex; + flex-wrap: wrap; + align-items: end; + gap: 0.55rem 0.65rem; + padding-left: 0.85rem; + border-left: 1px solid var(--line); +} + +.field { + display: flex; + flex-direction: column; + gap: 0.28rem; + font-size: 0.68rem; + color: var(--muted); + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.field--inline { min-width: 10.5rem; } + +.field--token { min-width: 14rem; } + +.field--token input { + font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; + font-size: 0.78rem; +} + +.field--zoom { min-width: 0; } + +select, button, input { + font: inherit; + letter-spacing: 0; + text-transform: none; + border-radius: var(--radius-sm); + border: 1px solid var(--line-strong); + background: rgba(8, 11, 16, 0.72); + color: var(--text); + padding: 0.48rem 0.7rem; + min-height: 2.75rem; +} + +select, input { + font-variant-numeric: tabular-nums; +} + +select { + appearance: none; + background-image: + linear-gradient(45deg, transparent 50%, var(--muted) 50%), + linear-gradient(135deg, var(--muted) 50%, transparent 50%); + background-position: + calc(100% - 16px) calc(50% - 3px), + calc(100% - 11px) calc(50% - 3px); + background-size: 5px 5px, 5px 5px; + background-repeat: no-repeat; + padding-right: 1.7rem; +} + +.btn, +button { + cursor: pointer; + border: 0; + font-weight: 650; +} + +.btn--accent, +#sync-button, +.hud--goto button[type="submit"] { + background: var(--accent); + color: var(--accent-ink); + box-shadow: 0 8px 20px rgba(232, 146, 61, 0.22); +} + +.btn--accent:hover, +#sync-button:hover, +.hud--goto button[type="submit"]:hover { + background: var(--accent-press); +} + +.btn--block { + width: 100%; +} + +button:disabled { opacity: 0.55; cursor: wait; } + +.preset, +.hud--status summary, +.preset--ghost { + background: rgba(8, 11, 16, 0.55); + color: var(--text); + font-weight: 550; + border: 1px solid var(--line); + box-shadow: none; +} + +.preset:hover, +.preset--ghost:hover, +.hud--status summary:hover { + border-color: rgba(232, 146, 61, 0.45); + color: #fff; +} + +.link { + color: var(--muted); + font-size: 0.78rem; + align-self: center; + padding: 0.45rem 0.35rem; + text-decoration: none; +} + +.link:hover { color: var(--accent); } + +.pill { + align-self: end; + font-size: 0.72rem; + padding: 0.42rem 0.75rem 0.42rem 0.65rem; + min-height: 2.75rem; + display: inline-flex; + align-items: center; + gap: 0.45rem; + border-radius: 999px; + border: 1px solid var(--line); + background: rgba(8, 11, 16, 0.72); + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.pill::before { + content: ""; + width: 0.48rem; + height: 0.48rem; + border-radius: 50%; + background: var(--muted); + box-shadow: 0 0 0 4px rgba(154, 166, 180, 0.12); +} + +.pill--ok { color: var(--ok); border-color: rgba(125, 206, 160, 0.32); } +.pill--ok::before { background: var(--ok); box-shadow: 0 0 0 4px rgba(125, 206, 160, 0.16); } +.pill--work { color: var(--warn); border-color: rgba(245, 193, 108, 0.32); } +.pill--work::before { background: var(--warn); box-shadow: 0 0 0 4px rgba(245, 193, 108, 0.16); } +.pill--fail { color: var(--danger); border-color: rgba(255, 138, 122, 0.4); } +.pill--fail::before { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 138, 122, 0.16); } + +.hud--goto { + left: var(--space); + bottom: 1.75rem; + width: min(22.75rem, calc(100vw - 24px)); + padding: 0.95rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.goto__head h1 { + margin: 0; + font-size: 0.68rem; + font-weight: 650; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.coords { + margin: 0.28rem 0 0; + font-variant-numeric: tabular-nums; + font-size: 0.98rem; + font-weight: 560; + letter-spacing: 0.01em; +} + +.coords__sep { + color: var(--muted); + margin: 0 0.35rem; + font-weight: 400; +} + +.presets { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +.presets button { + min-height: 2.5rem; + padding: 0.4rem 0.75rem; + font-size: 0.8rem; +} + +.goto__row { + display: grid; + grid-template-columns: 1fr 1fr 4.8rem; + gap: 0.45rem; + padding: 0.45rem; + border-radius: 12px; + background: rgba(8, 11, 16, 0.45); + border: 1px solid var(--line); +} + +.goto__row input { + min-height: 2.5rem; + background: transparent; + border-color: transparent; + padding-inline: 0.35rem; +} + +.goto__row input:focus { + border-color: rgba(232, 146, 61, 0.45); + background: rgba(232, 146, 61, 0.06); +} + +.hud--status { + right: var(--space); + bottom: 3.4rem; + top: auto; + width: min(19.5rem, calc(100vw - 24px)); + padding: 0; + overflow: hidden; +} + +.hud--status summary { + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + gap: 0.55rem; + padding: 0.7rem 0.9rem; + font-size: 0.78rem; + letter-spacing: 0.06em; + text-transform: uppercase; + border: 0; + border-radius: 0; + min-height: 2.75rem; + background: transparent; +} + +.hud--status summary::-webkit-details-marker { display: none; } + +.worker__pulse { + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + background: var(--muted); +} + +.hud--status.is-running .worker__pulse { + background: var(--warn); + box-shadow: 0 0 0 0 rgba(245, 193, 108, 0.7); + animation: pulse 1.6s ease-out infinite; +} + +.hud--status.is-ready .worker__pulse { + background: var(--ok); +} + +.hud--status dl, +.hud--status .error { + padding: 0 0.9rem 0.85rem; +} + +dl { + margin: 0; + display: grid; + gap: 0.45rem; +} + +dl div { + display: flex; + justify-content: space-between; + gap: 0.75rem; + font-size: 0.78rem; + letter-spacing: 0; + text-transform: none; +} + +dt { color: var(--muted); } +dd { + margin: 0; + text-align: right; + font-variant-numeric: tabular-nums; +} + +.error { + margin: 0; + font-size: 0.78rem; + color: var(--danger); + letter-spacing: 0; + text-transform: none; +} + +.banner { + position: absolute; + z-index: var(--hud-z); + left: var(--space); + top: 5.4rem; + max-width: min(34rem, calc(100vw - 24px)); + background: rgba(42, 31, 18, 0.92); + color: #ffe0c2; + border: 1px solid #6a4a22; + border-radius: var(--radius); + padding: 0.75rem 1rem; + box-shadow: var(--shadow); +} + +button:focus-visible, +select:focus-visible, +input:focus-visible, +a:focus-visible, +summary:focus-visible { + outline: 2px solid #fff; + outline-offset: 2px; +} + +.maplibregl-ctrl-top-right { top: var(--space); right: var(--space); } +.maplibregl-ctrl-bottom-right { right: var(--space); bottom: var(--space); } + +.maplibregl-ctrl-group { + background: var(--panel-strong); + border: 1px solid var(--line); + border-radius: 12px; + box-shadow: var(--shadow); + overflow: hidden; +} + +.maplibregl-ctrl-group button { + background: transparent; + min-height: 2.25rem; +} + +.maplibregl-ctrl-attrib { + background: rgba(10, 13, 18, 0.62) !important; /* MapLibre default is opaque white */ + color: var(--muted); + border-radius: 8px; +} + +.maplibregl-ctrl-scale { + background: rgba(10, 13, 18, 0.62); + color: var(--text); + border-color: var(--muted); +} + +@keyframes pulse { + 0% { box-shadow: 0 0 0 0 rgba(245, 193, 108, 0.55); } + 100% { box-shadow: 0 0 0 10px rgba(245, 193, 108, 0); } +} + +@media (max-width: 860px) { + .hud--top { + right: 3.6rem; + max-width: none; + flex-wrap: wrap; + align-items: center; + } + + .toolbar { + padding-left: 0; + border-left: 0; + width: 100%; + } + + .field--inline { min-width: 8.5rem; flex: 1; } + .hud--status { display: none; } + .banner { top: auto; bottom: 13.5rem; } +} + +@media (prefers-reduced-motion: reduce) { + * { + scroll-behavior: auto; + animation: none !important; /* third-party MapLibre fade + our pulse */ + transition: none !important; + } +} diff --git a/web-demo/src/main.tsx b/web-demo/src/main.tsx new file mode 100644 index 0000000..a383bfe --- /dev/null +++ b/web-demo/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { App } from "./App"; +import "./demo.css"; + +createRoot(document.getElementById("root")!).render( + + + +); diff --git a/web-demo/src/vite-env.d.ts b/web-demo/src/vite-env.d.ts new file mode 100644 index 0000000..c602aa1 --- /dev/null +++ b/web-demo/src/vite-env.d.ts @@ -0,0 +1,9 @@ +/// + +interface ImportMetaEnv { + readonly VITE_API_ORIGIN?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/web-demo/tsconfig.json b/web-demo/tsconfig.json new file mode 100644 index 0000000..c351008 --- /dev/null +++ b/web-demo/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/web-demo/vite.config.ts b/web-demo/vite.config.ts new file mode 100644 index 0000000..3cb759f --- /dev/null +++ b/web-demo/vite.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; + +export default defineConfig({ + plugins: [react()], + server: { + port: 5174 + }, + build: { + outDir: "dist", + emptyOutDir: true + } +}); diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..c82cc1c --- /dev/null +++ b/web/index.html @@ -0,0 +1,12 @@ + + + + + + Tile Server + + +

+ + + diff --git a/web/nginx.conf b/web/nginx.conf new file mode 100644 index 0000000..cf6bf9d --- /dev/null +++ b/web/nginx.conf @@ -0,0 +1,36 @@ +server { + listen 80; + server_name _; + root /usr/share/nginx/html; + index index.html; + + gzip on; + gzip_types text/css application/javascript application/json; + + location /api/ { + proxy_pass http://tile-server:8080; + proxy_http_version 1.1; + proxy_set_header Host $host; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_set_header Authorization $http_authorization; + proxy_redirect off; + } + + location /u/ { + proxy_pass http://tile-server:8080; + proxy_http_version 1.1; + proxy_set_header Host $host; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_set_header Authorization $http_authorization; + gzip off; + proxy_buffering off; + } + + location / { + try_files $uri $uri/ /index.html; + } +} diff --git a/web/package-lock.json b/web/package-lock.json new file mode 100644 index 0000000..63fe96d --- /dev/null +++ b/web/package-lock.json @@ -0,0 +1,2239 @@ +{ + "name": "tile-server-web", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "tile-server-web", + "version": "1.0.0", + "dependencies": { + "maplibre-gl": "^5.6.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.30.1", + "styled-components": "^6.1.19" + }, + "devDependencies": { + "@types/react": "^18.3.18", + "@types/react-dom": "^18.3.5", + "@vitejs/plugin-react": "^4.3.4", + "typescript": "^5.7.3", + "vite": "^6.0.7" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz", + "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.8", + "@babel/types": "^7.29.8", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz", + "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.8" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz", + "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.8", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.8", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.8", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz", + "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", + "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz", + "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz", + "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz", + "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz", + "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz", + "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz", + "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz", + "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz", + "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz", + "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz", + "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz", + "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz", + "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz", + "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz", + "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz", + "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz", + "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz", + "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz", + "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz", + "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz", + "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openharmony-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz", + "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz", + "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz", + "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz", + "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", + "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz", + "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@mapbox/jsonlint-lines-primitives": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.3.tgz", + "integrity": "sha512-0SElaV0uMxEnxzBhhX9WTuPyUeMsAN/SS0i16tjuba4/mio63MG9khjC1a0JAiPGXAwvwm4UfHJURCN7nyudQg==", + "license": "MIT", + "engines": { + "node": ">= 22" + } + }, + "node_modules/@mapbox/point-geometry": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz", + "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==", + "license": "ISC" + }, + "node_modules/@mapbox/tiny-sdf": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz", + "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==", + "license": "BSD-2-Clause" + }, + "node_modules/@mapbox/unitbezier": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz", + "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==", + "license": "BSD-2-Clause" + }, + "node_modules/@mapbox/vector-tile": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.5.tgz", + "integrity": "sha512-pXj8m7KTsqZt+1jsE0xIpGvqTSbblfkuEJL/NJmNePMtEwxO8V3XMDo9WMSfDeqHvCtBI9Lmt4mGcGR10zecmw==", + "license": "BSD-3-Clause", + "dependencies": { + "@mapbox/point-geometry": "~1.1.0", + "@types/geojson": "^7946.0.16", + "pbf": "^4.0.2" + } + }, + "node_modules/@mapbox/whoots-js": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", + "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==", + "license": "ISC", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@maplibre/geojson-vt": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@maplibre/geojson-vt/-/geojson-vt-6.1.1.tgz", + "integrity": "sha512-FVMOcmSP/yqol45t7StApEyTL5/vmqBCuFhH9n+fFuINenhaX+YgHHIt1yJ86S8kln3uJLcMvmEU2cfn6E2eCQ==", + "license": "ISC", + "dependencies": { + "kdbush": "^4.1.0" + } + }, + "node_modules/@maplibre/maplibre-gl-style-spec": { + "version": "24.10.0", + "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.10.0.tgz", + "integrity": "sha512-lichxSiagMEBBrqHF0trtMQH9RKh+9jUlIJl0qW0QHvt2H/tbvUWdE+ZzI2Jd0/pT7j/iavLonlPu7EQ/ixTOw==", + "license": "ISC", + "dependencies": { + "@mapbox/jsonlint-lines-primitives": "~2.0.2", + "@mapbox/unitbezier": "^1.0.0", + "json-stringify-pretty-compact": "^4.0.0", + "minimist": "^1.2.8", + "quickselect": "^3.0.0", + "tinyqueue": "^3.0.0" + }, + "bin": { + "gl-style-format": "dist/gl-style-format.mjs", + "gl-style-migrate": "dist/gl-style-migrate.mjs", + "gl-style-validate": "dist/gl-style-validate.mjs" + } + }, + "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/@mapbox/unitbezier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-1.0.0.tgz", + "integrity": "sha512-fqd515fjBmANKGGsQ286E2Wvj/XvDFpGzwJxq4CI6jMQue6Oy04uCKp+JWKF00xRTmk6cEu1jPJ9p3xqH8YWqQ==", + "license": "BSD-2-Clause" + }, + "node_modules/@maplibre/mlt": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@maplibre/mlt/-/mlt-1.3.0.tgz", + "integrity": "sha512-7M2O7ABM80Oi8XPkfkrjKB8mOBIxGoVgkA52Mu4RMWoBvvMdagQ522+WxVYujZsMpqIr3BpzrTbXrm4k8lCzCQ==", + "license": "(MIT OR Apache-2.0)", + "dependencies": { + "@mapbox/point-geometry": "^1.1.0" + } + }, + "node_modules/@maplibre/vt-pbf": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@maplibre/vt-pbf/-/vt-pbf-4.3.2.tgz", + "integrity": "sha512-j6p0AdjvAR19Z3XaCysle7A4ZSo08tYOzxD0Y9NQylwPAkwJJeYub5b2eVucdeDh7erhv69DahoLOevDRERRUw==", + "license": "MIT", + "dependencies": { + "@mapbox/point-geometry": "^1.1.0", + "@types/geojson": "^7946.0.16", + "pbf": "^5.1.0" + } + }, + "node_modules/@maplibre/vt-pbf/node_modules/pbf": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz", + "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==", + "license": "BSD-3-Clause", + "dependencies": { + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, + "node_modules/@napi-rs/lzma-linux-x64-gnu": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz", + "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^22.20 || ^24.12 || >=25" + } + }, + "node_modules/@remix-run/router": { + "version": "1.23.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.4.tgz", + "integrity": "sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", + "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.4.tgz", + "integrity": "sha512-I+BSHzTAhKN2n7ZwGZsegGcZjDpLqFOMAtJz/u6uFGe0pUFbq56dEHjqJV/ZUdRJtNXNxA+hREUatZBvMR3Oiw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.63.4.tgz", + "integrity": "sha512-pu3BdjS2LtEzRu2elmGzS3fIeWSZy4BMDIaLNwjorO76+k2d0LMluijhsDx3KQyQBQ/lLUZCQA9/s6csvUfuhw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.63.4.tgz", + "integrity": "sha512-xfSrj9MHnWK9GaSqT9U0ImHtH/N8WZlHLx4cZHiuLcqs640hvZ3hLPd5UR2AZS57FaE8HrRUSpltbZdWRxHiDA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.63.4.tgz", + "integrity": "sha512-bqU99PLJb/dqb3S0GIMdeuyAEETSUgZBoqXYd3Sd+WCsV+MmPhnN6JrotWyir31+QgH7EvvE5/mwGJlEoci8Fw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.63.4.tgz", + "integrity": "sha512-JinsFZ5G40oXQb+sUuiA5x689vhr6dDYK0H0NL+rwKdL6CqnmYN8PE4ZwfRSoIjrCxqTQG/SLfTtSvHeGxoVlw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.63.4.tgz", + "integrity": "sha512-GAdA4UxpiNm27cLHr2GqXBpAD0x9FqwYBY7/YSP0Ss0/PNi4k8gbviqpIpYbVSRBaS2ZcegXEzgTQMbRNCwxCw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.63.4.tgz", + "integrity": "sha512-qDd6NoA1znaLjp4jR5U/KWCdLAKDJNB8W9ChbbDaKbo0xA+Atln5HK6LFCZ4oJQpemtRZA288DCirFRjrspptw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.63.4.tgz", + "integrity": "sha512-WtB5Tz5KTNINb8ZA+8sQ7bmjuS1JrRT7YverYIhUGdWWDlpzVWmIwuZE+jidkEXUn1l0zrEkaIMa8dHF3NGcsA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.63.4.tgz", + "integrity": "sha512-VcQ3L1tjnkKzWjryAVaFhHEWcqOfICX9uxVVoDzm2t0DpgKRHd2zOpVrJc0xsWeBZcBFyYROCIBdyR/fS174pg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.63.4.tgz", + "integrity": "sha512-6+ZQX6P5s0cMDN2Ypb8Lbm2+/sZYmZjdaYny992ujUU9UKi/4CWoJWsl1pNvjWJHNHGK51m+jKGLlh1ylb2ifQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.63.4.tgz", + "integrity": "sha512-D72ZnvkFkBXOfzMMQLcwfPLyGkKb7HZ9/mf97B7v6/P5Lbv4oFOtSY/uHbS8lH6uKUOxoKiuokdb50XZSzzbJw==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.63.4.tgz", + "integrity": "sha512-piU6BxeqA3O9KSu3kRCIQQtNqFFaTu21SEV4FwaRZowpnj3bLaWPZHw+xFqCs0XlJ+aOH3PTRWGoglH+mKA/OA==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.63.4.tgz", + "integrity": "sha512-/5PGpHwqt2EEEOUs1XwzubE/ucr0dWDQ+to3zqi4Ds7EWpwtQ79wXc4JBoxqj/OwpawTsKWzJxHfSuBOq3DrWA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.63.4.tgz", + "integrity": "sha512-cX3beZDLWt7G2oJF+nhChiT+qtaihs+S2xi7ziGmVB+2pwPng6D0Ed0HmElQOgv2UsUmSJJLGwpBao/3TDx3VA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.63.4.tgz", + "integrity": "sha512-1uz2mGWHyptR7DgHHrlbdRAjXK7v7elGZ9lMja910/RP+ZYbX6xAmCiU9UZSX4hqmgtHMv6lr5l3kq1HIOpcag==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.63.4.tgz", + "integrity": "sha512-nLS8topojxyz7SRpKR2IODRpQ0XPZ+xaOXvT3+hqK/Uy8Lo5HFgkkIBiIrCu5tL5YqzTvgovGw55PwpahTAGig==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.63.4.tgz", + "integrity": "sha512-gs7DRKotr3l3q+jGPQBjH0ng1FjlEDm5ueQrkw5JtQvtLyEIcLASqAEaor56BhkKRzk+IcQzrcanBdb/bBQn8g==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.63.4.tgz", + "integrity": "sha512-791ET7W17NnScOZM7h4dX5hYspxE28htPFsb1awY/NRR8+PRNkS53e475rDdxXXDrP+kwnCcNWg9CX5ztn/Aqw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.63.4.tgz", + "integrity": "sha512-iwZQRcmj7g88g3tzefIrQY7qvmuA/cfYwhrDtTBhsmukO4U2huVO5W+86XacUMRvdSFVAc6kZUZy21JaRwiB9w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.63.4.tgz", + "integrity": "sha512-dVHFp9gRWrdTpnqQuGfCwd7hOQDatK1VCP2iWhLY/cGrOQs/ucFzJ6A5SRqbXX12ZDI8EUuejSM5kwg+ja7Png==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, + "node_modules/@rollup/rollup-openharmony-arm64": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.63.4.tgz", + "integrity": "sha512-t3NlauOW6gxZVVFcBEnO62Cb4wbyDFL416gTg1uFI/2tgqYQlf69FbSE115Ajre9I+c26Lk4mcmdFUsS/DGifQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.63.4.tgz", + "integrity": "sha512-xWuIaSye5FWZF8+UYtVEcHtRJDN5kN9Kfgxx3Kq8XIov9KSKbc1fiqQCm90SKrgQbUXZelbnUhnlUJmfSE7P9A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.63.4.tgz", + "integrity": "sha512-9ALJJUOg/ZflMJepVo2PlgsGxSaxN7SQ4Z8GoZfVlarWr6r3rkHUNsd/zAio7p4YMtChSMXPionxej4Hkf6CXQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-gnu": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.63.4.tgz", + "integrity": "sha512-blj9z5qx/Pv4WU0W1NMFDB97e0JH5ed+aZGywW8WCvp/NhWX/4PFAq5uu6Q0AebNn+Vo6KzUYDT++JzTT5ojlQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.63.4.tgz", + "integrity": "sha512-Erx822VRBwLa124shbj+wNXe//BOgMEctDV0m1aqTQdNO1S69DgNUCFKC1RCeZfixs1J31l6igk1ziyXErbigQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz", + "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz", + "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "license": "MIT" + }, + "node_modules/@types/prop-types": { + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.31", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz", + "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.3.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", + "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^18.0.0" + } + }, + "node_modules/@vitejs/plugin-react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", + "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.28.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-beta.27", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.17.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.11.25", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.25.tgz", + "integrity": "sha512-gMmEShwwq7FJqMwvfRwvCl00v4kN+KOfJqXn+f4nrufak5gNHJOksd/60Dvjuz7sI8Y5WiSFBa8FEYr+zoyqCw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/browserslist": { + "version": "4.29.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.0.tgz", + "integrity": "sha512-3GSvyjvDI4Dur1Meg2BekJquu5uF+9R9a1+5M1Mde192eZoXbeXjzgOsgqPS2V8D5wrrip0gR5Hf/GhWQ9ZzaA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.11.23", + "caniuse-lite": "^1.0.30001810", + "electron-to-chromium": "^1.5.427", + "node-releases": "^2.0.55", + "update-browserslist-db": "^1.3.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001810", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz", + "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/earcut": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.3.tgz", + "integrity": "sha512-vnS4AVwp1KHAF13i1vp1/2D5evWy3k5u/iW/B81QVsUZtV8cv2tU0b2VNFlqvh4kYwrFMDdjPCfAmfyJW9y14Q==", + "license": "ISC" + }, + "node_modules/electron-to-chromium": { + "version": "1.5.433", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.433.tgz", + "integrity": "sha512-5lCAbyZBjtmUt/RAGHRqrL2q0oEFRThDAsZHHDn9XHa89Qw7gMYOeSicBTy+AHfvo0r6vwsZvqNJTQIQy1BLzA==", + "dev": true, + "license": "ISC" + }, + "node_modules/esbuild": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", + "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.12", + "@esbuild/android-arm": "0.25.12", + "@esbuild/android-arm64": "0.25.12", + "@esbuild/android-x64": "0.25.12", + "@esbuild/darwin-arm64": "0.25.12", + "@esbuild/darwin-x64": "0.25.12", + "@esbuild/freebsd-arm64": "0.25.12", + "@esbuild/freebsd-x64": "0.25.12", + "@esbuild/linux-arm": "0.25.12", + "@esbuild/linux-arm64": "0.25.12", + "@esbuild/linux-ia32": "0.25.12", + "@esbuild/linux-loong64": "0.25.12", + "@esbuild/linux-mips64el": "0.25.12", + "@esbuild/linux-ppc64": "0.25.12", + "@esbuild/linux-riscv64": "0.25.12", + "@esbuild/linux-s390x": "0.25.12", + "@esbuild/linux-x64": "0.25.12", + "@esbuild/netbsd-arm64": "0.25.12", + "@esbuild/netbsd-x64": "0.25.12", + "@esbuild/openbsd-arm64": "0.25.12", + "@esbuild/openbsd-x64": "0.25.12", + "@esbuild/openharmony-arm64": "0.25.12", + "@esbuild/sunos-x64": "0.25.12", + "@esbuild/win32-arm64": "0.25.12", + "@esbuild/win32-ia32": "0.25.12", + "@esbuild/win32-x64": "0.25.12" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/gl-matrix": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz", + "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==", + "license": "MIT" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json-stringify-pretty-compact": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz", + "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==", + "license": "MIT" + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/kdbush": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.1.0.tgz", + "integrity": "sha512-e9vurzrXJQrFX6ckpHP3bvj5l+9CnYzkxDNnNQ1h2QTqdWsUAJgXiKdGNcOa1EY85dU8KbQ+z/FdQdB7P+9yfQ==", + "license": "ISC" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/maplibre-gl": { + "version": "5.24.0", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.24.0.tgz", + "integrity": "sha512-ALyFxgtd5R+65UqZ/++lOqwWcC0SNho9c27fYSyLmG7AfnAul2o46F05aDJGPbFU57wos9dgcIySHs0Xe6ia3A==", + "license": "BSD-3-Clause", + "dependencies": { + "@mapbox/jsonlint-lines-primitives": "^2.0.2", + "@mapbox/point-geometry": "^1.1.0", + "@mapbox/tiny-sdf": "^2.1.0", + "@mapbox/unitbezier": "^0.0.1", + "@mapbox/vector-tile": "^2.0.4", + "@mapbox/whoots-js": "^3.1.0", + "@maplibre/geojson-vt": "^6.1.0", + "@maplibre/maplibre-gl-style-spec": "^24.8.1", + "@maplibre/mlt": "^1.1.8", + "@maplibre/vt-pbf": "^4.3.0", + "@types/geojson": "^7946.0.16", + "earcut": "^3.0.2", + "gl-matrix": "^3.4.4", + "kdbush": "^4.0.2", + "murmurhash-js": "^1.0.0", + "pbf": "^4.0.1", + "potpack": "^2.1.0", + "quickselect": "^3.0.0", + "tinyqueue": "^3.0.0" + }, + "engines": { + "node": ">=16.14.0", + "npm": ">=8.1.0" + }, + "funding": { + "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/murmurhash-js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", + "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==", + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.19", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz", + "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.56", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.56.tgz", + "integrity": "sha512-x0InOIyzgdk+eyaWaRJFH5snEtiImgBgblZ2CyPrLmqqcuMQkEvcDPHbzqbD8eDsSeJbVOjn+crzyzHaM4D+/A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/pbf": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.2.tgz", + "integrity": "sha512-J0ajxARhZfpUEebxYs1vhMGMuLSXtBe1e+fFPDrf2uA2hgo+UshKfNUWOz92HJNz6/NFEXseQPddnHkTreWRqg==", + "license": "BSD-3-Clause", + "dependencies": { + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz", + "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz", + "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.18", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, + "node_modules/potpack": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz", + "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==", + "license": "ISC" + }, + "node_modules/protocol-buffers-schema": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz", + "integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==", + "license": "MIT" + }, + "node_modules/quickselect": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz", + "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==", + "license": "ISC" + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/react-refresh": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", + "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "6.30.6", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.6.tgz", + "integrity": "sha512-5HfK7k5im7LTOB0EqCQmfvy4C13G92Ssj1VTmouTK3AJvyjKTnFuCV0vcMAD/JS+JC4DvDIBRrlAeJIFjh5VWg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.6", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.6.tgz", + "integrity": "sha512-0RHKZz7wwffvkU+2MFVT2NnjK44ssLEV+m0CAJaS2Ksmorrwj7WxH00jO0SOCW26/tINUnJHToXblDs33I38YQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.4", + "react-router": "6.30.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "license": "MIT", + "dependencies": { + "protocol-buffers-schema": "^3.3.1" + } + }, + "node_modules/rollup": { + "version": "4.63.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.63.4.tgz", + "integrity": "sha512-4U0liVayNIoLp3GFl1FcI8561WepLnZ1rqfraGh7S9B3Ur5F9S283y8Futii7RUU2C/97tOBmBy7nYvhoiOpbQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@napi-rs/lzma-linux-x64-gnu": "1.5.1", + "@rollup/rollup-android-arm-eabi": "4.63.4", + "@rollup/rollup-android-arm64": "4.63.4", + "@rollup/rollup-darwin-arm64": "4.63.4", + "@rollup/rollup-darwin-x64": "4.63.4", + "@rollup/rollup-freebsd-arm64": "4.63.4", + "@rollup/rollup-freebsd-x64": "4.63.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.63.4", + "@rollup/rollup-linux-arm-musleabihf": "4.63.4", + "@rollup/rollup-linux-arm64-gnu": "4.63.4", + "@rollup/rollup-linux-arm64-musl": "4.63.4", + "@rollup/rollup-linux-loong64-gnu": "4.63.4", + "@rollup/rollup-linux-loong64-musl": "4.63.4", + "@rollup/rollup-linux-ppc64-gnu": "4.63.4", + "@rollup/rollup-linux-ppc64-musl": "4.63.4", + "@rollup/rollup-linux-riscv64-gnu": "4.63.4", + "@rollup/rollup-linux-riscv64-musl": "4.63.4", + "@rollup/rollup-linux-s390x-gnu": "4.63.4", + "@rollup/rollup-linux-x64-gnu": "4.63.4", + "@rollup/rollup-linux-x64-musl": "4.63.4", + "@rollup/rollup-openbsd-x64": "4.63.4", + "@rollup/rollup-openharmony-arm64": "4.63.4", + "@rollup/rollup-win32-arm64-msvc": "4.63.4", + "@rollup/rollup-win32-ia32-msvc": "4.63.4", + "@rollup/rollup-win32-x64-gnu": "4.63.4", + "@rollup/rollup-win32-x64-msvc": "4.63.4", + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/styled-components": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.5.3.tgz", + "integrity": "sha512-vAX79sfpmUerP9fsTTxoTrBDE0RuO4ahjInyWYoohNgqrdg63Ms4q6FJ/o2Fyity82NU3cujOT8Ewl9TThBdwg==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.4.0", + "css-to-react-native": "3.2.0", + "csstype": "3.2.3", + "stylis": "4.3.6" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "css-to-react-native": ">= 3.2.0", + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-native": ">= 0.68.0" + }, + "peerDependenciesMeta": { + "css-to-react-native": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/stylis": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz", + "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==", + "license": "MIT" + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyqueue": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz", + "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==", + "license": "ISC" + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz", + "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz", + "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.25.0", + "fdir": "^6.4.4", + "picomatch": "^4.0.2", + "postcss": "^8.5.3", + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "license": "ISC" + } + } +} diff --git a/web/package.json b/web/package.json new file mode 100644 index 0000000..4c0c342 --- /dev/null +++ b/web/package.json @@ -0,0 +1,25 @@ +{ + "name": "tile-server-web", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc --noEmit && vite build", + "preview": "vite preview" + }, + "dependencies": { + "maplibre-gl": "^5.6.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.30.1", + "styled-components": "^6.1.19" + }, + "devDependencies": { + "@types/react": "^18.3.18", + "@types/react-dom": "^18.3.5", + "@vitejs/plugin-react": "^4.3.4", + "typescript": "^5.7.3", + "vite": "^6.0.7" + } +} diff --git a/web/src/App.tsx b/web/src/App.tsx new file mode 100644 index 0000000..d4fc7a2 --- /dev/null +++ b/web/src/App.tsx @@ -0,0 +1,82 @@ +import { type ReactNode } from "react"; +import { Navigate, Route, Routes } from "react-router-dom"; +import { AppShell } from "./components/layout/AppShell"; +import { useAuth } from "./features/auth/AuthContext"; +import { LoginPage } from "./features/auth/LoginPage"; +import { DashboardPage } from "./features/usage/DashboardPage"; +import { StylesPage } from "./features/styles/StylesPage"; +import { StyleEditorPage } from "./features/styles/StyleEditorPage"; +import { TokensPage } from "./features/tokens/TokensPage"; +import { GuidesPage } from "./features/guides/GuidesPage"; +import { CookieBanner } from "./legal/CookieBanner"; +import { LegalPage } from "./legal/LegalPage"; + +function Guard({ children }: { children: ReactNode }) { + const { user, loading, logout } = useAuth(); + if (loading) { + return

Загрузка…

; + } + if (!user) { + return ; + } + return ( + void logout()}> + {children} + + ); +} + +export function App() { + const { user, loading } = useAuth(); + + return ( + <> + + : } /> + } /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + } /> + + + + ); +} diff --git a/web/src/api.ts b/web/src/api.ts new file mode 100644 index 0000000..6898f45 --- /dev/null +++ b/web/src/api.ts @@ -0,0 +1,137 @@ +export class ApiError extends Error { + constructor( + public readonly status: number, + message: string + ) { + super(message); + } +} + +async function request(path: string, init: RequestInit = {}): Promise { + const headers = new Headers(init.headers); + if (init.body && !headers.has("Content-Type")) { + headers.set("Content-Type", "application/json"); + } + + const response = await fetch(path, { + ...init, + headers, + credentials: "include" + }); + + if (response.status === 204) { + return undefined as T; + } + + const text = await response.text(); + const payload = text ? (JSON.parse(text) as unknown) : undefined; + if (!response.ok) { + const detail = + payload && typeof payload === "object" && "detail" in payload + ? String((payload as { detail?: string }).detail) + : response.statusText; + throw new ApiError(response.status, detail || "Request failed"); + } + + return payload as T; +} + +export type Me = { + id: string; + login: string; + displayName: string; + slug: string; + yandexId: string; +}; + +export type AuthResponse = { + user: Me; + cabinetToken?: string | null; +}; + +export type YandexProvider = { + enabled: boolean; + clientId?: string | null; + redirectUri?: string | null; +}; + +export type AuthProviders = { + yandex: YandexProvider; +}; + +export type UsageDay = { + date: string; + tileRequests: number; + styleRequests: number; + bytes: number; +}; + +export type TokenItem = { + id: string; + name: string; + prefix: string; + createdAt: string; + revokedAt?: string | null; +}; + +export type CreatedToken = TokenItem & { token: string }; + +export type StyleItem = { + name: string; + createdFrom?: string | null; + updatedAt: string; + isPreset: boolean; +}; + +export type SourceItem = { + id: string; + name: string; + enabled: boolean; + center: number[]; +}; + +export const api = { + me: () => request("/api/v1/me"), + providers: () => request("/api/v1/auth/providers"), + loginYandex: (code: string, redirectUri: string, state?: string | null) => + request("/api/v1/auth/yandex", { + method: "POST", + body: JSON.stringify({ code, state, redirectUri }) + }), + logout: () => request("/api/v1/auth/logout", { method: "POST" }), + usage: (from: string, to: string) => + request(`/api/v1/me/usage?from=${from}&to=${to}`), + tokens: () => request("/api/v1/me/tokens"), + createToken: (name: string) => + request("/api/v1/me/tokens", { + method: "POST", + body: JSON.stringify({ name }) + }), + revokeToken: (id: string) => + request(`/api/v1/me/tokens/${id}`, { method: "DELETE" }), + styles: () => request("/api/v1/me/styles"), + getStyle: (name: string) => request(`/api/v1/me/styles/${name}`), + cloneStyle: (name: string, from: string) => + request("/api/v1/me/styles", { + method: "POST", + body: JSON.stringify({ name, from }) + }), + saveStyle: (name: string, style: unknown) => + request(`/api/v1/me/styles/${name}`, { + method: "PUT", + body: JSON.stringify(style) + }), + deleteStyle: (name: string) => + request(`/api/v1/me/styles/${name}`, { method: "DELETE" }), + sources: () => request("/api/v1/sources") +}; + +const TOKEN_KEY = "ts.previewToken"; + +export function getPreviewToken(): string | null { + return sessionStorage.getItem(TOKEN_KEY); +} + +export function setPreviewToken(token: string): void { + sessionStorage.setItem(TOKEN_KEY, token); +} diff --git a/web/src/auth/yandexRedirect.ts b/web/src/auth/yandexRedirect.ts new file mode 100644 index 0000000..dd59344 --- /dev/null +++ b/web/src/auth/yandexRedirect.ts @@ -0,0 +1,51 @@ +const YANDEX_AUTHORIZE = "https://oauth.yandex.ru/authorize"; + +export function yandexCodeFromQuery(search: string): string | null { + const params = new URLSearchParams(search.startsWith("?") ? search : `?${search}`); + const code = params.get("code")?.trim(); + if (!code) return null; + // Telegram login also lands on /login with id/hash — never treat that as Yandex. + if (params.has("hash") && params.has("id")) return null; + return code; +} + +export function yandexErrorFromQuery(search: string): string | null { + const params = new URLSearchParams(search.startsWith("?") ? search : `?${search}`); + if (params.has("hash") && params.has("id")) return null; + return params.get("error_description")?.trim() || params.get("error")?.trim() || null; +} + +export function yandexAuthorizeUrl( + clientId: string, + redirectUri: string, + state?: string | null, +): string { + const params = new URLSearchParams({ + response_type: "code", + client_id: clientId, + redirect_uri: redirectUri, + force_confirm: "yes", + }); + if (state) params.set("state", state); + return `${YANDEX_AUTHORIZE}?${params.toString()}`; +} + +/** Must match the Callback URL registered in the Yandex app (trailing slash). */ +export function yandexRedirectUri( + configured?: string | null, + origin = window.location.origin, +): string { + const local = `${origin.replace(/\/$/, "")}/`; + if (!configured) return local; + try { + if (new URL(configured).origin === new URL(local).origin) return configured; + } catch { + // Fall through to the current origin. + } + return local; +} + +/** @deprecated use yandexRedirectUri */ +export function cabinetLoginRedirectUri(origin = window.location.origin): string { + return yandexRedirectUri(null, origin); +} diff --git a/web/src/brand.ts b/web/src/brand.ts new file mode 100644 index 0000000..b9ca152 --- /dev/null +++ b/web/src/brand.ts @@ -0,0 +1 @@ +export const APP_NAME = "Tile Server"; diff --git a/web/src/components/layout/AppShell.tsx b/web/src/components/layout/AppShell.tsx new file mode 100644 index 0000000..9b42d16 --- /dev/null +++ b/web/src/components/layout/AppShell.tsx @@ -0,0 +1,73 @@ +import { NavLink, useLocation } from "react-router-dom"; +import type { ReactNode } from "react"; +import { APP_NAME } from "../../brand"; +import { SiteFooter } from "../../legal/SiteFooter"; +import { AppAvatar, AppButton, AppText } from "../../ui"; +import { PRIMARY_NAV } from "./nav"; + +type Props = { + brand?: string; + userLabel: string; + onLogout: () => void; + children: ReactNode; +}; + +function initials(label: string): string { + const parts = label.trim().split(/\s+/).filter(Boolean); + if (parts.length === 0) { + return "•"; + } + if (parts.length === 1) { + return parts[0].slice(0, 1).toUpperCase(); + } + return (parts[0][0] + parts[1][0]).toUpperCase(); +} + +export function AppShell({ + brand = APP_NAME, + userLabel, + onLogout, + children, +}: Props) { + const location = useLocation(); + const workspace = /^\/styles\/[^/]+$/.test(location.pathname); + + return ( +

+ + {brand} + +

+ + + {userLabel} + + + Выйти + +

+ + + +

{children}

+ ); +} diff --git a/web/src/components/layout/AuthLayout.tsx b/web/src/components/layout/AuthLayout.tsx new file mode 100644 index 0000000..17eeb0c --- /dev/null +++ b/web/src/components/layout/AuthLayout.tsx @@ -0,0 +1,38 @@ +import type { ReactNode } from "react"; +import { APP_NAME } from "../../brand"; +import { AppText } from "../../ui"; + +type Props = { + brand?: string; + title: string; + lead: string; + cta: ReactNode; + footer?: ReactNode; + flash?: ReactNode; +}; + +export function AuthLayout({ + brand = APP_NAME, + title, + lead, + cta, + footer, + flash, +}: Props) { + return ( +

+ + {brand} + + + {title} + + {lead} +

{cta}

+ {flash} + {footer ?

{footer}

: null} +

+ ); +} diff --git a/web/src/components/layout/nav.ts b/web/src/components/layout/nav.ts new file mode 100644 index 0000000..d3ce5a3 --- /dev/null +++ b/web/src/components/layout/nav.ts @@ -0,0 +1,6 @@ +export const PRIMARY_NAV = [ + { id: "overview", to: "/", label: "Обзор", soon: false }, + { id: "guides", to: "/guides", label: "Инструкции", soon: false }, + { id: "styles", to: "/styles", label: "Стили", soon: false }, + { id: "tokens", to: "/tokens", label: "Токены", soon: false }, +] as const; diff --git a/web/src/components/ui/Banner.tsx b/web/src/components/ui/Banner.tsx new file mode 100644 index 0000000..79f44ef --- /dev/null +++ b/web/src/components/ui/Banner.tsx @@ -0,0 +1,14 @@ +import type { ReactNode } from "react"; + +type Props = { + children: ReactNode; + tone?: "warn"; +}; + +export function Banner({ children, tone = "warn" }: Props) { + return ( +

+ {children} +

+ ); +} diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx new file mode 100644 index 0000000..168abfc --- /dev/null +++ b/web/src/components/ui/Button.tsx @@ -0,0 +1,45 @@ +import type { ButtonHTMLAttributes, ReactNode } from "react"; +import { AppButton, type AppButtonSize, type AppButtonStyle } from "../../ui"; + +type Variant = "primary" | "secondary" | "ghost" | "destructive"; +type Size = "md" | "sm"; + +const STYLE: Record = { + primary: "filled", + secondary: "gray", + ghost: "plain", + destructive: "destructive", +}; + +const SIZE: Record = { + md: "medium", + sm: "small", +}; + +type Props = ButtonHTMLAttributes & { + variant?: Variant; + size?: Size; + expanded?: boolean; + children: ReactNode; +}; + +export function Button({ + variant = "secondary", + size = "md", + expanded = false, + className = "", + children, + ...rest +}: Props) { + return ( + + {children} + + ); +} diff --git a/web/src/components/ui/EmptyState.tsx b/web/src/components/ui/EmptyState.tsx new file mode 100644 index 0000000..45d6af1 --- /dev/null +++ b/web/src/components/ui/EmptyState.tsx @@ -0,0 +1,10 @@ +import type { ReactNode } from "react"; +import { AppEmptyView } from "../../ui"; + +type Props = { + children: ReactNode; +}; + +export function EmptyState({ children }: Props) { + return ; +} diff --git a/web/src/components/ui/Field.tsx b/web/src/components/ui/Field.tsx new file mode 100644 index 0000000..d1fd25c --- /dev/null +++ b/web/src/components/ui/Field.tsx @@ -0,0 +1,12 @@ +import type { InputHTMLAttributes, ReactNode } from "react"; +import { AppTextField } from "../../ui"; + +type Props = InputHTMLAttributes & { + label: string; + id: string; + hint?: ReactNode; +}; + +export function Field({ label, id, hint, className = "", ...rest }: Props) { + return ; +} diff --git a/web/src/components/ui/Flash.tsx b/web/src/components/ui/Flash.tsx new file mode 100644 index 0000000..baa2aec --- /dev/null +++ b/web/src/components/ui/Flash.tsx @@ -0,0 +1,14 @@ +type Props = { + error?: string | null; + notice?: string | null; +}; + +export function Flash({ error = null, notice = null }: Props) { + if (!error && !notice) return null; + return ( +

+ {error ?

{error}

: null} + {notice ?

{notice}

: null} +

+ ); +} diff --git a/web/src/components/ui/MetricGrid.tsx b/web/src/components/ui/MetricGrid.tsx new file mode 100644 index 0000000..1728d52 --- /dev/null +++ b/web/src/components/ui/MetricGrid.tsx @@ -0,0 +1,26 @@ +import type { ReactNode } from "react"; +import { AppListSection, AppListTile } from "../../ui"; + +export type MetricItem = { + label: string; + value: ReactNode; + warn?: boolean; +}; + +type Props = { + items: MetricItem[]; +}; + +export function MetricGrid({ items }: Props) { + return ( + + {items.map((item) => ( + {item.value}} + /> + ))} + + ); +} diff --git a/web/src/components/ui/PageHeader.tsx b/web/src/components/ui/PageHeader.tsx new file mode 100644 index 0000000..b3a2a9b --- /dev/null +++ b/web/src/components/ui/PageHeader.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from "react"; +import { AppText } from "../../ui"; + +type Props = { + eyebrow?: string; + title: string; + description?: ReactNode; +}; + +export function PageHeader({ eyebrow, title, description }: Props) { + return ( +

+ {eyebrow ? {eyebrow} : null} + + {title} + + {description ? {description} : null} +

+ ); +} diff --git a/web/src/components/ui/ProgressBar.tsx b/web/src/components/ui/ProgressBar.tsx new file mode 100644 index 0000000..ba646b1 --- /dev/null +++ b/web/src/components/ui/ProgressBar.tsx @@ -0,0 +1,17 @@ +import { AppProgress, AppText } from "../../ui"; + +type Props = { + spent: number; + total: number; + label?: string; +}; + +export function ProgressBar({ spent, total, label }: Props) { + const pct = total > 0 ? Math.min(100, Math.max(0, (spent / total) * 100)) : 0; + return ( +

+ + {Math.round(pct)}% бюджета использовано +

+ ); +} diff --git a/web/src/components/ui/Section.tsx b/web/src/components/ui/Section.tsx new file mode 100644 index 0000000..fc9811d --- /dev/null +++ b/web/src/components/ui/Section.tsx @@ -0,0 +1,28 @@ +import type { ReactNode } from "react"; +import { AppSectionHeader } from "../../ui"; + +type Props = { + title: string; + description?: ReactNode; + actions?: ReactNode; + children: ReactNode; + labelledBy?: string; +}; + +export function Section({ title, description, actions, children, labelledBy }: Props) { + const id = labelledBy ?? `section-${title.toLowerCase().replace(/\s+/g, "-")}`; + return ( +

+ {title} +

+ {description ?

{description}

: null} +

+ {actions} +

+ {children} +

+ ); +} diff --git a/web/src/components/ui/index.ts b/web/src/components/ui/index.ts new file mode 100644 index 0000000..c962fe9 --- /dev/null +++ b/web/src/components/ui/index.ts @@ -0,0 +1,10 @@ +export { Button } from "./Button"; +export { Field } from "./Field"; +export { Flash } from "./Flash"; +export { ProgressBar } from "./ProgressBar"; +export { MetricGrid } from "./MetricGrid"; +export { PageHeader } from "./PageHeader"; +export { Section } from "./Section"; +export { EmptyState } from "./EmptyState"; +export { Banner } from "./Banner"; +export * from "../../ui"; diff --git a/web/src/design/base.css b/web/src/design/base.css new file mode 100644 index 0000000..8790320 --- /dev/null +++ b/web/src/design/base.css @@ -0,0 +1,70 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body, +#root { + min-height: 100%; +} + +body { + margin: 0; + font-family: var(--font-sans); + font-size: var(--text-body); + letter-spacing: -0.41px; + color: var(--label); + background: var(--grouped-background); + line-height: 1.3; + -webkit-font-smoothing: antialiased; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input { + font: inherit; +} + +h1, +h2, +h3 { + margin: 0; + font-weight: 600; + letter-spacing: -0.02em; +} + +p { + margin: 0; +} + +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.muted { + color: var(--color-muted); +} + +.mono { + font-family: var(--font-mono); +} + +.is-warn { + color: var(--color-warn) !important; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } +} diff --git a/web/src/design/components.css b/web/src/design/components.css new file mode 100644 index 0000000..ad0a759 --- /dev/null +++ b/web/src/design/components.css @@ -0,0 +1,993 @@ +/* —— Layout shell —— */ +.app-shell { + min-height: 100vh; + display: grid; + grid-template-columns: var(--sidebar-width) minmax(0, 1fr); + grid-template-rows: auto 1fr; + grid-template-areas: + "header header" + "nav main"; + background: var(--grouped-background); +} + +.app-shell__header { + grid-area: header; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + min-height: 44px; + padding: 0 var(--gutter); + border-bottom: var(--hairline) solid var(--separator); + background: var(--bar-background); + backdrop-filter: saturate(180%) blur(20px); + position: sticky; + top: 0; + z-index: var(--z-header); +} + +.app-shell__brand { + font-size: var(--text-md); + font-weight: 700; + letter-spacing: -0.01em; +} + +.app-shell__user { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.app-shell__chip { + max-width: 12rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--color-muted); + font-size: var(--text-sm); +} + +.app-shell__nav { + grid-area: nav; + padding: var(--space-2) 0 var(--space-4); + position: sticky; + top: 44px; + height: calc(100vh - 44px); + overflow: auto; +} + +.app-shell__nav-label { + margin: 0 var(--space-2) var(--space-2); + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--color-muted); +} + +.app-shell__nav-list { + list-style: none; + margin: 0 var(--gutter); + padding: 0; + display: grid; + background: var(--grouped-surface); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.app-shell__nav-link { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + min-height: var(--row-min-height); + padding: 0 var(--gutter); + color: var(--label); + font-size: var(--text-body); + letter-spacing: -0.41px; +} + +.app-shell__nav-link:hover { + background: var(--system-gray5); +} + +.app-shell__nav-link.is-active { + color: var(--accent); + font-weight: 600; +} + +.app-shell__nav-link.is-disabled { + opacity: 0.45; + pointer-events: none; +} + +.app-shell__badge { + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--color-muted); +} + +.app-shell__main { + grid-area: main; + min-width: 0; +} + +.app-shell--workspace .app-shell__main { + overflow: hidden; +} + +.page { + width: min(var(--content-max), 100%); + margin: 0 auto; + padding: var(--space-5) 0 var(--space-8); +} + +.page > .app-text, +.page > .app-btn { + margin-inline: var(--gutter); +} + +.page-header { + margin-bottom: var(--space-5); + padding: 0 var(--gutter); + display: grid; + gap: var(--space-1); +} + +.page-header__eyebrow { + margin: 0 0 var(--space-2); + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--color-muted); +} + +.page-header__title { + font-size: var(--text-xl); + line-height: 1.2; +} + +.page-header__desc { + margin-top: var(--space-2); + color: var(--color-muted); + font-size: var(--text-md); + max-width: 36rem; +} + +.section { + margin: 0 0 var(--space-6); +} + +.section:first-child { + border-top: 0; + padding-top: 0; +} + +.section__head { + margin-bottom: var(--space-2); + padding-right: var(--gutter); +} + +.section__head--row { + display: flex; + justify-content: space-between; + gap: var(--space-4); + align-items: end; +} + +.section__title { + margin: 0; +} + +.section__title .app-section-header { + padding-bottom: 0; +} + +.section__desc { + margin: 0; + padding: 0 var(--gutter); + color: var(--secondary-label); + font-size: var(--text-footnote); +} + +/* —— Auth layout —— */ +.auth-layout { + min-height: 100vh; + display: grid; + place-items: center; + padding: var(--space-5); + background: var(--color-bg); +} + +.auth-panel { + width: min(400px, 100%); + padding: var(--space-6) var(--gutter); + display: grid; + gap: var(--space-3); +} + +.auth-panel__brand { + margin: 0 0 var(--space-5); + color: var(--color-accent); + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: var(--text-xs); + font-weight: 600; +} + +.auth-panel__title { + font-size: var(--text-xl); + line-height: 1.25; +} + +.auth-panel__lead { + margin-top: var(--space-2); + color: var(--color-muted); + font-size: var(--text-md); +} + +.auth-panel__cta { + display: grid; + gap: var(--space-3); + margin-top: var(--space-5); + min-height: 48px; +} + +.auth-divider { + margin: 0; + color: var(--color-muted); + font-size: var(--text-sm); + text-align: center; +} + +.auth-panel__foot { + margin-top: var(--space-5); + padding-top: var(--space-4); + border-top: 1px solid var(--color-line); + color: var(--color-muted); + font-size: var(--text-sm); +} + +.auth-panel__foot code { + font-family: var(--font-mono); + font-size: 0.85em; + color: var(--color-ink); +} + +.tg-login { + min-height: 44px; +} + +.btn--yandex { + width: 100%; + gap: var(--space-2); + background: #000; + color: #fff; + text-decoration: none; +} + +.btn--yandex:hover:not(:disabled) { + background: #1a1a1a; + color: #fff; + border-radius: 8px; +} + +.btn--yandex__mark { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + border-radius: 8px; + background: #fc3f1d; + color: #fff; + font-size: 0.75rem; + font-weight: 700; + line-height: 1; +} + +/* —— UI primitives —— */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + height: var(--control-height-md); + padding: 0 var(--space-4); + border-radius: var(--radius-lg); + border: 0; + font-weight: 600; + font-size: var(--text-body); + cursor: pointer; + background: var(--system-gray5); + color: var(--label); +} + +.btn:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.btn--primary { + background: var(--accent); + color: #fff; +} + +.btn--primary:hover:not(:disabled) { + filter: brightness(1.04); +} + +.btn--secondary { + background: var(--system-gray5); + color: var(--label); +} + +.btn--ghost { + background: transparent; + color: var(--accent); +} + +.btn--sm { + height: var(--control-height-sm); + padding: 0 var(--space-3); + font-size: var(--text-sm); +} + +.field { + display: grid; + gap: var(--space-2); +} + +.field__label { + color: var(--color-ink-secondary); + font-size: var(--text-xs); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.field__control { + width: 100%; + height: var(--control-height-md); + border: 0; + background: var(--grouped-surface); + color: var(--label); + border-radius: var(--radius-md); + padding: 0 var(--space-3); +} + +.field__control:hover:not(:disabled) { + border-color: var(--color-ink-secondary); +} + +.field__control:disabled { + background: var(--color-bg); + color: var(--color-muted); +} + +.form { + display: grid; + gap: var(--space-4); + padding-inline: var(--gutter); +} + +.form__row { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: var(--space-3); +} + +.form__actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + align-items: center; +} + +.data-list__row .form__actions { + flex-shrink: 0; + justify-content: flex-end; +} + +.check { + display: flex; + align-items: flex-start; + gap: var(--space-2); + color: var(--color-ink-secondary); + font-size: var(--text-md); + cursor: pointer; +} + +.check input { + margin-top: 0.15rem; + accent-color: var(--color-accent); +} + +.flash { + display: grid; + gap: var(--space-2); + margin-bottom: var(--space-4); +} + +.flash { + margin-inline: var(--gutter); +} + +.flash__item { + margin: 0; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + font-size: var(--text-subhead); +} + +.flash__item--error { + color: var(--color-danger); + background: var(--color-danger-bg); + border-color: #e2bcbc; +} + +.flash__item--ok { + color: var(--color-ok); + background: var(--color-ok-bg); + border-color: #b9d8c7; +} + +.banner { + margin: var(--space-4) var(--gutter) 0; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + font-size: var(--text-subhead); +} + +.banner--warn { + color: var(--color-warn); + background: var(--color-warn-bg); + border-color: #e2d4a8; +} + +.metric-grid { + margin: var(--space-5) 0 0; + padding: 0; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border: 1px solid var(--color-line); + background: var(--color-surface); +} + +.metric-grid > div { + padding: var(--space-3) var(--space-4); + border-right: 1px solid var(--color-line); +} + +.metric-grid > div:last-child { + border-right: 0; +} + +.metric-grid dt { + margin: 0; + color: var(--color-muted); + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 500; +} + +.metric-grid dd { + margin: var(--space-1) 0 0; + font-family: var(--font-mono); + font-size: var(--text-base); + font-weight: 500; +} + +.progress { + margin: var(--space-4) var(--gutter) 0; + display: grid; + gap: var(--space-2); +} + +.progress__track { + height: 4px; + background: var(--color-line); + overflow: hidden; +} + +.progress__bar { + display: block; + height: 100%; + background: var(--color-accent); +} + +.progress__meta { + margin-top: var(--space-2); + font-size: var(--text-xs); + font-family: var(--font-mono); + color: var(--color-muted); +} + +.hero-metric__label { + margin-top: var(--space-4); + color: var(--color-muted); + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 500; +} + +.hero-metric__label, +.hero-metric__value { + padding-inline: var(--gutter); +} + +.meta-row { + margin: 0; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-2); + font-size: var(--text-xs); + font-weight: 500; + color: var(--color-muted); + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.meta-row__dot { + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--color-line-strong); +} + +.data-list { + list-style: none; + margin: 0 var(--gutter); + padding: 0; + background: var(--grouped-surface); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.data-list__row { + display: flex; + justify-content: space-between; + gap: var(--space-4); + align-items: baseline; + min-height: var(--row-min-height); + padding: 10px var(--gutter); + box-shadow: inset 0 var(--hairline) 0 var(--separator); +} + +.data-list__row:last-child { + border-bottom: 0; +} + +.data-list__primary { + display: block; + font-size: var(--text-body); + font-weight: 400; + letter-spacing: -0.41px; + font-variant-numeric: tabular-nums; +} + +.data-list__secondary { + display: block; + margin-top: 0.1rem; + font-size: var(--text-sm); + color: var(--color-muted); +} + +.data-list__meta { + color: var(--color-muted); + font-family: var(--font-mono); + font-size: var(--text-xs); + white-space: nowrap; +} + +.empty-state { + margin: 0 var(--gutter); + padding: var(--space-6) var(--gutter); + color: var(--secondary-label); + font-size: var(--text-subhead); + text-align: center; +} + +.pager { + display: flex; + align-items: center; + gap: var(--space-3); + margin-top: var(--space-4); + padding-inline: var(--gutter); + font-size: var(--text-footnote); +} + +.panel { + border: 1px solid var(--color-line); + background: var(--color-surface); +} + +.panel__head { + padding: var(--space-4); + border-bottom: 1px solid var(--color-line); + font-size: var(--text-sm); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.panel__body { + padding: var(--space-4); +} + +.coming-soon { + border: 1px solid var(--color-line); + background: var(--color-surface); + padding: var(--space-6); +} + +.coming-soon__title { + font-size: var(--text-lg); +} + +.coming-soon__text { + margin-top: var(--space-2); + color: var(--color-muted); + font-size: var(--text-md); + max-width: 28rem; +} + +.skel { + background: var(--color-line); + border-radius: var(--radius-sm); +} + +.skel-line { + height: 0.75rem; +} + +.skel-title { + height: 2rem; + width: min(220px, 55%); + margin: var(--space-3) 0; +} + +.w-20 { + width: 4.5rem; +} +.w-24 { + width: 5.5rem; +} +.w-32 { + width: 7rem; +} +.w-56 { + width: 12rem; +} +.mt-2 { + margin-top: var(--space-2); +} + +.field__hint { + margin: 0; + font-size: var(--text-sm); +} + +.day-chips { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); +} + +.day-chip { + min-width: 2.5rem; + height: 28px; + padding: 0 var(--space-3); + border: 0; + border-radius: var(--radius-capsule); + background: var(--system-gray5); + color: var(--label); + font-size: var(--text-subhead); + cursor: pointer; +} + +.day-chip:hover:not(:disabled) { + border-color: var(--color-ink-secondary); +} + +.day-chip.is-on { + background: rgb(18 136 90 / 15%); + color: var(--accent); +} + +.day-chip:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.choice-set { + margin: 0; + padding: 0; + border: 0; + display: grid; + gap: var(--space-2); +} + +.choice-set legend { + margin-bottom: var(--space-1); +} + +.split-block { + display: grid; + gap: var(--space-2); +} + +@media (max-width: 860px) { + .app-shell { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "nav" + "main"; + } + + .app-shell__nav { + position: static; + height: auto; + border-right: 0; + border-bottom: 1px solid var(--color-line); + padding: var(--space-3); + } + + .app-shell__nav-label { + display: none; + } + + .app-shell__nav-list { + display: flex; + gap: var(--space-2); + overflow-x: auto; + background: transparent; + margin: 0 var(--gutter); + } + + .app-shell__nav-link { + white-space: nowrap; + background: var(--system-gray5); + border-radius: var(--radius-capsule); + min-height: 32px; + padding: 0 12px; + font-size: var(--text-subhead); + } + + .app-shell__nav-link.is-active { + background: var(--grouped-surface); + } + + .page { + width: min(var(--content-max), calc(100% - 2 * var(--space-4))); + } + + .metric-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .metric-grid > div:nth-child(2) { + border-right: 0; + } + + .metric-grid > div:nth-child(3), + .metric-grid > div:nth-child(4) { + border-top: 1px solid var(--color-line); + } + + .form__row { + grid-template-columns: 1fr; + } + + .section__head--row { + flex-direction: column; + align-items: start; + } + + .cal__day { + min-height: 3.5rem; + } +} + +/* —— Calendar —— */ +.cal { + display: grid; + gap: var(--space-3); +} + +.cal__weekdays, +.cal__grid { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 2px; +} + +.cal__weekday { + text-align: center; + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--color-muted); + padding: var(--space-1) 0; +} + +.cal__day { + position: relative; + display: flex; + flex-direction: column; + align-items: stretch; + gap: 2px; + min-height: 4.25rem; + padding: var(--space-2) var(--space-2) var(--space-1); + margin: 0; + border: 0; + border-radius: var(--radius-md); + background: var(--grouped-surface); + color: var(--label); + text-align: left; + cursor: pointer; + font: inherit; +} + +.cal__day:hover { + border-color: var(--color-line-strong); +} + +.cal__day--out { + opacity: 0.42; +} + +.cal__day--today { + border-color: var(--color-accent); + background: var(--color-accent-soft); +} + +.cal__day--selected { + outline: 2px solid var(--color-ink); + outline-offset: -1px; + z-index: 1; +} + +.cal__day-num { + font-size: var(--text-sm); + font-weight: 600; + font-variant-numeric: tabular-nums; + line-height: 1.2; +} + +.cal__day-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-1); +} + +.cal__spend-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-ink); + flex-shrink: 0; +} + +.cal__spend-sum { + font-size: var(--text-xs); + font-weight: 600; + font-variant-numeric: tabular-nums; + color: var(--color-ink-secondary); + line-height: 1.2; + letter-spacing: -0.02em; +} + +.cal__day--spent .cal__spend-sum { + color: var(--color-ink); +} + +.cal-day-block + .cal-day-block { + margin-top: var(--space-4); + padding-top: var(--space-4); + border-top: 1px solid var(--color-line); +} + +.cal-day-block__title { + margin: 0 0 var(--space-2); + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-muted); +} + +.cal-legend__swatch--spend { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-ink); + margin-top: 5px; + margin-left: 4px; + margin-right: 4px; +} + +.cal__stripes { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; + min-height: 0; + margin-top: 2px; +} + +.cal__stripe { + display: block; + height: 5px; + border-radius: 1px; + flex: 1; + min-height: 4px; + max-height: 8px; +} + +.cal__pays { + display: flex; + gap: 3px; + justify-content: flex-end; + align-items: center; + min-height: 8px; +} + +.cal__pay { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1.5px solid var(--color-surface); + box-shadow: 0 0 0 1px rgba(18, 23, 20, 0.2); + flex-shrink: 0; +} + +.cal-legend { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: var(--space-2); +} + +.cal-legend__item { + display: flex; + align-items: flex-start; + gap: var(--space-2); + font-size: var(--text-sm); + color: var(--color-ink-secondary); +} + +.cal-legend__swatch { + display: inline-block; + width: 14px; + height: 14px; + flex-shrink: 0; + margin-top: 2px; + border-radius: var(--radius-sm); +} + +.cal-legend__swatch--budget { + border: 1px solid transparent; +} + +.cal-legend__swatch--pay { + width: 10px; + height: 10px; + border-radius: 50%; + margin-top: 4px; + margin-left: 2px; + margin-right: 2px; +} + +.cal-legend__meta { + color: var(--color-muted); +} diff --git a/web/src/design/index.css b/web/src/design/index.css new file mode 100644 index 0000000..db6cb1b --- /dev/null +++ b/web/src/design/index.css @@ -0,0 +1,5 @@ +@import "./tokens.css"; +@import "./base.css"; +@import "../ui/kit.css"; +@import "./components.css"; +@import "../legal/legal.css"; diff --git a/web/src/design/tokens.css b/web/src/design/tokens.css new file mode 100644 index 0000000..46cc69a --- /dev/null +++ b/web/src/design/tokens.css @@ -0,0 +1,117 @@ +:root { + /* 4pt grid — same as mobile/lib/theme/tokens.dart */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 28px; + --space-7: 40px; + --space-8: 56px; + --gutter: 16px; + + /* SF Pro scale (Apple HIG), rendered in Inter */ + --text-caption2: 11px; + --text-caption1: 12px; + --text-footnote: 13px; + --text-subhead: 15px; + --text-callout: 16px; + --text-body: 17px; + --text-headline: 17px; + --text-title3: 20px; + --text-title2: 22px; + --text-title1: 28px; + --text-large-title: 34px; + + /* Legacy aliases used by older product CSS */ + --text-xs: var(--text-caption2); + --text-sm: var(--text-footnote); + --text-md: var(--text-subhead); + --text-base: var(--text-body); + --text-lg: var(--text-title3); + --text-xl: var(--text-title2); + --text-2xl: var(--text-large-title); + + /* Light — CupertinoDynamicColor.color */ + --accent: #12885a; + --accent-soft: #e4f4ec; + --system-red: #ff3b30; + --system-orange: #ff9500; + --system-green: #34c759; + --system-gray: #8e8e93; + --system-gray3: #c7c7cc; + --system-gray5: #e5e5ea; + --system-gray6: #f2f2f7; + --label: #000000; + --secondary-label: rgb(60 60 67 / 60%); + --tertiary-label: rgb(60 60 67 / 30%); + --separator: rgb(60 60 67 / 29%); + --opaque-separator: #c6c6c8; + --grouped-background: #f2f2f7; + --grouped-surface: #ffffff; + --bar-background: rgb(249 249 249 / 94%); + + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-capsule: 999px; + + --control-height: 50px; + --control-height-md: 44px; + --control-height-sm: 34px; + --row-min-height: 44px; + --hairline: 0.5px; + + --shell-max: 960px; + --content-max: 720px; + --sidebar-width: 240px; + + --font-sans: "Inter", "SF Pro Text", "Segoe UI", sans-serif; + --font-mono: "Inter", ui-monospace, monospace; + + --shadow-none: none; + --z-header: 20; + --z-sidebar: 15; + --z-toast: 40; + + /* Backward-compatible names from the previous system UI */ + --color-ink: var(--label); + --color-ink-secondary: var(--secondary-label); + --color-muted: var(--secondary-label); + --color-line: var(--separator); + --color-line-strong: var(--opaque-separator); + --color-bg: var(--grouped-background); + --color-surface: var(--grouped-surface); + --color-accent: var(--accent); + --color-accent-hover: #0e6f4a; + --color-accent-soft: var(--accent-soft); + --color-warn: var(--system-orange); + --color-warn-bg: rgb(255 149 0 / 12%); + --color-danger: var(--system-red); + --color-danger-bg: rgb(255 59 48 / 12%); + --color-ok: var(--system-green); + --color-ok-bg: rgb(52 199 89 / 12%); +} + +@media (prefers-color-scheme: dark) { + :root { + --accent: #3cd68c; + --accent-soft: #14301f; + --system-red: #ff453a; + --system-orange: #ff9f0a; + --system-green: #30d158; + --system-gray3: #48484a; + --system-gray5: #2c2c2e; + --system-gray6: #1c1c1e; + --label: #ffffff; + --secondary-label: rgb(235 235 245 / 60%); + --tertiary-label: rgb(235 235 245 / 30%); + --separator: rgb(84 84 88 / 65%); + --opaque-separator: #38383a; + --grouped-background: #000000; + --grouped-surface: #1c1c1e; + --bar-background: rgb(29 29 29 / 94%); + --color-accent-hover: #5ee0a2; + } +} diff --git a/web/src/features/auth/AuthContext.tsx b/web/src/features/auth/AuthContext.tsx new file mode 100644 index 0000000..9d0b708 --- /dev/null +++ b/web/src/features/auth/AuthContext.tsx @@ -0,0 +1,80 @@ +import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react"; +import { api, setPreviewToken, type Me } from "../../api"; +import { yandexRedirectUri } from "../../auth/yandexRedirect"; + +type AuthState = { + user: Me | null; + loading: boolean; + error: string | null; + refresh: () => Promise; + logout: () => Promise; +}; + +const AuthContext = createContext(null); + +export function AuthProvider({ children }: { children: ReactNode }) { + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const refresh = async () => { + try { + setUser(await api.me()); + setError(null); + } catch { + setUser(null); + } + }; + + useEffect(() => { + const params = new URLSearchParams(window.location.search); + const code = params.get("code"); + const state = params.get("state"); + + const boot = async () => { + try { + if (code) { + const redirectUri = + sessionStorage.getItem("ts.oauthRedirect") ?? yandexRedirectUri("https://tile-server.ru"); + const auth = await api.loginYandex(code, redirectUri, state); + sessionStorage.removeItem("ts.oauthState"); + sessionStorage.removeItem("ts.oauthRedirect"); + setUser(auth.user); + if (auth.cabinetToken) { + setPreviewToken(auth.cabinetToken); + } + window.history.replaceState({}, "", "/"); + } else { + await refresh(); + } + } catch (err) { + setError(err instanceof Error ? err.message : "Ошибка входа"); + setUser(null); + } finally { + setLoading(false); + } + }; + + void boot(); + }, []); + + const logout = async () => { + await api.logout(); + setUser(null); + }; + + const value = useMemo( + () => ({ user, loading, error, refresh, logout }), + [user, loading, error] + ); + + return {children}; +} + +export function useAuth(): AuthState { + const ctx = useContext(AuthContext); + if (!ctx) { + throw new Error("AuthProvider is required"); + } + return ctx; +} diff --git a/web/src/features/auth/LoginPage.tsx b/web/src/features/auth/LoginPage.tsx new file mode 100644 index 0000000..f89305e --- /dev/null +++ b/web/src/features/auth/LoginPage.tsx @@ -0,0 +1,85 @@ +import { useEffect, useState } from "react"; +import { Navigate } from "react-router-dom"; +import { api } from "../../api"; +import { yandexRedirectUri } from "../../auth/yandexRedirect"; +import { AuthLayout } from "../../components/layout/AuthLayout"; +import { Flash } from "../../components/ui"; +import { LegalCheckboxes } from "../../legal/LegalCheckboxes"; +import { SiteFooter } from "../../legal/SiteFooter"; +import { useAuth } from "./AuthContext"; +import { YandexLoginButton } from "./YandexLoginButton"; + +export function LoginPage() { + const { user, loading, error } = useAuth(); + const [yandexClientId, setYandexClientId] = useState(null); + const [configuredRedirect, setConfiguredRedirect] = useState(null); + const [providerError, setProviderError] = useState(null); + const [offerAccepted, setOfferAccepted] = useState(false); + const [consentAccepted, setConsentAccepted] = useState(false); + const redirectUri = yandexRedirectUri(configuredRedirect); + const accepted = offerAccepted && consentAccepted; + + useEffect(() => { + let cancelled = false; + void api + .providers() + .then((providers) => { + if (cancelled) { + return; + } + const yandex = providers.yandex; + const id = yandex?.enabled ? yandex.clientId : null; + setYandexClientId(id && id.length > 0 ? id : null); + setConfiguredRedirect(yandex?.redirectUri ?? null); + if (id) { + sessionStorage.setItem("ts.oauthRedirect", yandexRedirectUri(yandex.redirectUri)); + } + if (!yandex?.enabled) { + setProviderError("Яндекс OAuth не настроен. Задайте YANDEX_CLIENT_SECRET в .env на сервере."); + } + }) + .catch((err: unknown) => { + if (!cancelled) { + setYandexClientId(null); + setProviderError(err instanceof Error ? err.message : "Не удалось проверить вход через Яндекс"); + } + }); + return () => { + cancelled = true; + }; + }, []); + + if (loading) { + return

Загрузка…

; + } + + if (user) { + return ; + } + + return ( + + + + + ) : null + } + flash={} + footer={} + /> + ); +} diff --git a/web/src/features/auth/YandexLoginButton.tsx b/web/src/features/auth/YandexLoginButton.tsx new file mode 100644 index 0000000..3201579 --- /dev/null +++ b/web/src/features/auth/YandexLoginButton.tsx @@ -0,0 +1,38 @@ +import { yandexAuthorizeUrl } from "../../auth/yandexRedirect"; + +type Props = { + clientId: string; + redirectUri: string; + state?: string | null; + disabled?: boolean; +}; + +export function YandexLoginButton({ + clientId, + redirectUri, + state, + disabled = false, +}: Props) { + const href = yandexAuthorizeUrl(clientId, redirectUri, state); + const className = `app-btn app-btn--large app-btn--expanded btn--yandex${disabled ? " is-disabled" : ""}`; + + if (disabled) { + return ( + + + Войти через Яндекс + + ); + } + + return ( + + + Войти через Яндекс + + ); +} diff --git a/web/src/features/guides/GuidesPage.tsx b/web/src/features/guides/GuidesPage.tsx new file mode 100644 index 0000000..e35b4f3 --- /dev/null +++ b/web/src/features/guides/GuidesPage.tsx @@ -0,0 +1,151 @@ +import { useEffect, useMemo, useState } from "react"; +import { Link } from "react-router-dom"; +import { api, getPreviewToken, setPreviewToken, type SourceItem } from "../../api"; +import { Button, Flash, PageHeader } from "../../components/ui"; +import { useAuth } from "../auth/AuthContext"; +import { StylePreview } from "../styles/StylePreview"; +import "./guides.css"; + +function CopyBlock({ label, value }: { label: string; value: string }) { + const [copied, setCopied] = useState(false); + return ( +

+ {label} + +

{value}

+ + ); +} + +export function GuidesPage() { + const { user } = useAuth(); + const [sources, setSources] = useState([]); + const [error, setError] = useState(null); + const [creating, setCreating] = useState(false); + const [token, setToken] = useState(() => getPreviewToken()); + const source = sources[0]?.id ?? "central-fed-district"; + const origin = window.location.origin; + const slug = user?.slug ?? "{slug}"; + + useEffect(() => { + void api + .sources() + .then((list) => setSources(list.filter((item) => item.enabled))) + .catch((err: unknown) => setError(err instanceof Error ? err.message : "Не удалось загрузить источники")); + }, []); + + const styleUrl = `${origin}/u/${slug}/styles/osm-bright?source=${source}${token ? `&token=${token}` : "&token=ts_…"}`; + const tilesUrl = `${origin}/u/${slug}/tiles/${source}/{z}/{x}/{y}.pbf?token=${token ?? "ts_…"}`; + + const html = useMemo( + () => ` + +

+`, + [styleUrl] + ); + + const react = useMemo( + () => `import maplibregl from "maplibre-gl"; +import "maplibre-gl/dist/maplibre-gl.css"; + +const map = new maplibregl.Map({ + container: "map", + style: "${styleUrl}", + center: [37.6173, 55.7558], + zoom: 11 +});`, + [styleUrl] + ); + + return ( +

+ + + +

+ 1. Токен +
В разделе «Токены» создайте ключ. Он показывается один раз и дальше уходит только в query token= или Bearer.
+ {!token ? ( + + ) : ( +
Превью-токен этой сессии уже есть.
+ )} +
+ 2. Стиль +
+ Пресет osm-bright доступен сразу. Свой вид — клонируйте в{" "} + Стилях и откройте визуальный редактор. +
+
+ 3. URL +
MapLibre просит style JSON. Сервер сам подставит тайлы с тем же токеном.
+

+ + + + +

HTML

+ + +

React + MapLibre

+ + +

Результат

Живая карта с вашего аккаунта. Если токена нет — сначала шаг 1.

+ {user && token ? ( + + ) : ( +

Нужен токен, чтобы нарисовать карту.

+ )} +

+ ); +} diff --git a/web/src/features/guides/guides.css b/web/src/features/guides/guides.css new file mode 100644 index 0000000..8271bbb --- /dev/null +++ b/web/src/features/guides/guides.css @@ -0,0 +1,121 @@ +.guides { + width: min(880px, 100%); + margin: 0 auto; + padding: var(--space-5) 0 var(--space-8); +} + +.guides .page-header { + padding-inline: var(--gutter); +} + +.guides__h { + margin: var(--space-6) var(--gutter) var(--space-3); + font-size: var(--text-title3); + letter-spacing: -0.02em; +} + +.guide-steps { + list-style: none; + margin: 0 var(--gutter) var(--space-5); + padding: 0; + display: grid; + gap: var(--space-3); +} + +.guide-steps li { + padding: var(--space-4); + border-radius: var(--radius-xl); + background: var(--grouped-surface); + box-shadow: 0 1px 0 var(--separator); +} + +.guide-steps strong { + display: block; + margin-bottom: 6px; +} + +.guide-steps p { + margin: 0 0 var(--space-3); + color: var(--secondary-label); + font-size: var(--text-subhead); +} + +.guide-steps code { + font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; + font-size: 0.92em; +} + +.guide-ok { + margin: 0; + color: var(--accent); + font-size: var(--text-footnote); +} + +.guide-code { + margin: 0 var(--gutter) var(--space-4); + border-radius: var(--radius-xl); + overflow: hidden; + background: #11161c; + color: #e8eef4; +} + +.guide-code figcaption { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 14px; + font-size: var(--text-caption1); + letter-spacing: 0.04em; + text-transform: uppercase; + color: rgb(232 238 244 / 55%); + border-bottom: 1px solid rgb(255 255 255 / 8%); +} + +.guide-code button { + border: 0; + background: transparent; + color: #3cd68c; + cursor: pointer; + text-transform: none; + letter-spacing: 0; +} + +.guide-code pre { + margin: 0; + padding: 14px 16px 16px; + overflow: auto; + font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; + font-size: 12.5px; + line-height: 1.5; + white-space: pre-wrap; +} + +.guide-result { + margin: var(--space-6) var(--gutter) 0; + padding: var(--space-4); + border-radius: var(--radius-xl); + background: var(--grouped-surface); +} + +.guide-result h2 { + margin: 0 0 6px; + font-size: var(--text-title3); +} + +.guide-result p { + margin: 0 0 var(--space-4); + color: var(--secondary-label); +} + +.guide-result .map-frame { + height: 22rem; +} + +.guide-result__empty { + display: grid; + place-items: center; + height: 14rem; + border-radius: 12px; + background: var(--grouped-background); + color: var(--secondary-label); +} diff --git a/web/src/features/styles/LayerInspector.tsx b/web/src/features/styles/LayerInspector.tsx new file mode 100644 index 0000000..6e7f88b --- /dev/null +++ b/web/src/features/styles/LayerInspector.tsx @@ -0,0 +1,146 @@ +import { fieldsForLayer } from "./layerFields"; +import { + asColor, + asNumber, + isExpression, + LAYER_TYPE_LABEL, + toColorInput, + type StyleLayer +} from "./styleModel"; + +type Props = { + layer: StyleLayer | null; + readOnly: boolean; + onPaint: (property: string, value: unknown) => void; + onLayout: (property: string, value: unknown) => void; +}; + +export function LayerInspector({ layer, readOnly, onPaint, onLayout }: Props) { + if (!layer) { + return ( + + ); + } + + const fields = fieldsForLayer(layer.type); + const hidden = layer.layout?.visibility === "none"; + + return ( +

{LAYER_TYPE_LABEL[layer.type] ?? layer.type}

+ {layer.id} + {layer["source-layer"] ? {layer["source-layer"]} : null} +

+ +

+ {fields.map((field) => { + if (field.kind === "visibility") { + return ( + + Видимость + + + ); + } + + const raw = layer.paint?.[field.property]; + const complex = isExpression(raw) && asColor(raw) === null && asNumber(raw) === null; + + if (field.kind === "color") { + const color = asColor(raw); + return ( + + {field.label} + {complex ? ( +

+ формула + +

+ ) : ( +

+ onPaint(field.property, e.target.value)} + /> + onPaint(field.property, e.target.value)} + /> +

+ )} + + ); + } + + const number = asNumber(raw); + return ( + + {field.label} + {complex || number === null ? ( +

+ {complex ? "по зуму" : "не задано"} + 1 ? 2 : 1)} + onChange={(e) => { + const next = Number(e.target.value); + if (Number.isFinite(next)) { + onPaint(field.property, next); + } + }} + /> +

+ ) : ( +

+ onPaint(field.property, Number(e.target.value))} + /> + onPaint(field.property, Number(e.target.value))} + /> +

+ )} + + ); + })} +

+ ); +} diff --git a/web/src/features/styles/LayerList.tsx b/web/src/features/styles/LayerList.tsx new file mode 100644 index 0000000..ac50519 --- /dev/null +++ b/web/src/features/styles/LayerList.tsx @@ -0,0 +1,71 @@ +import { useMemo, useState } from "react"; +import { LAYER_TYPE_LABEL, type StyleLayer } from "./styleModel"; + +type Props = { + layers: StyleLayer[]; + selectedId: string | null; + readOnly: boolean; + onSelect: (id: string) => void; + onToggle: (id: string, visible: boolean) => void; +}; + +export function LayerList({ layers, selectedId, readOnly, onSelect, onToggle }: Props) { + const [query, setQuery] = useState(""); + const visible = useMemo(() => { + const q = query.trim().toLowerCase(); + const items = [...layers].reverse(); + if (!q) { + return items; + } + return items.filter( + (layer) => + layer.id.toLowerCase().includes(q) || + layer.type.toLowerCase().includes(q) || + (layer["source-layer"] ?? "").toLowerCase().includes(q) + ); + }, [layers, query]); + + return ( + + ); +} diff --git a/web/src/features/styles/LiveMap.tsx b/web/src/features/styles/LiveMap.tsx new file mode 100644 index 0000000..fa049cc --- /dev/null +++ b/web/src/features/styles/LiveMap.tsx @@ -0,0 +1,73 @@ +import { useEffect, useRef } from "react"; +import maplibregl, { type Map as MapLibreMap, type StyleSpecification } from "maplibre-gl"; +import "maplibre-gl/dist/maplibre-gl.css"; +import { bindStyleForPreview, type MapStyle, type StyleEdit } from "./styleModel"; + +type Props = { + style: MapStyle; + tilesUrl: string; + selectedLayerId: string | null; + lastEdit: StyleEdit | null; + styleEpoch: number; + onSelectLayer: (layerId: string) => void; +}; + +export function LiveMap({ style, tilesUrl, selectedLayerId, lastEdit, styleEpoch, onSelectLayer }: Props) { + const el = useRef(null); + const mapRef = useRef(null); + + useEffect(() => { + if (!el.current || !tilesUrl) { + return; + } + const map = new maplibregl.Map({ + container: el.current, + style: bindStyleForPreview(style, tilesUrl) as StyleSpecification, + center: [37.6173, 55.7558], + zoom: 11, + maxZoom: 18, + attributionControl: { compact: true, customAttribution: "© OpenStreetMap" }, + transformRequest: (url) => ({ url: new URL(url, window.location.origin).href }) + }); + map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right"); + map.on("click", (event) => { + const hit = map.queryRenderedFeatures(event.point)[0]; + if (hit?.layer?.id) { + onSelectLayer(hit.layer.id); + } + }); + mapRef.current = map; + return () => { + map.remove(); + mapRef.current = null; + }; + // Recreate only when tiles source changes. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tilesUrl, styleEpoch]); + + useEffect(() => { + const map = mapRef.current; + if (!map || !lastEdit || !map.isStyleLoaded() || !map.getLayer(lastEdit.layerId)) { + return; + } + try { + if (lastEdit.target === "paint") { + map.setPaintProperty(lastEdit.layerId, lastEdit.property, lastEdit.value); + } else { + map.setLayoutProperty(lastEdit.layerId, lastEdit.property, lastEdit.value); + } + } catch { + map.setStyle(bindStyleForPreview(style, tilesUrl) as StyleSpecification, { diff: true }); + } + }, [lastEdit, style, tilesUrl]); + + return ( +

+ ); +} diff --git a/web/src/features/styles/StyleEditorPage.tsx b/web/src/features/styles/StyleEditorPage.tsx new file mode 100644 index 0000000..86a9692 --- /dev/null +++ b/web/src/features/styles/StyleEditorPage.tsx @@ -0,0 +1,195 @@ +import { useEffect, useMemo, useState } from "react"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import { api, getPreviewToken, type SourceItem } from "../../api"; +import { Button, Flash } from "../../components/ui"; +import { useAuth } from "../auth/AuthContext"; +import { LayerInspector } from "./LayerInspector"; +import { LayerList } from "./LayerList"; +import { LiveMap } from "./LiveMap"; +import { + isMapStyle, + tilesTemplate, + updateLayer, + type MapStyle, + type StyleEdit, + type StyleLayer +} from "./styleModel"; +import "./editor.css"; + +export function StyleEditorPage() { + const { name } = useParams<{ name: string }>(); + const navigate = useNavigate(); + const { user } = useAuth(); + const [style, setStyle] = useState(null); + const [sources, setSources] = useState([]); + const [source, setSource] = useState(""); + const [selectedId, setSelectedId] = useState(null); + const [lastEdit, setLastEdit] = useState(null); + const [styleEpoch, setStyleEpoch] = useState(0); + const [error, setError] = useState(null); + const [saving, setSaving] = useState(false); + const [isPreset, setIsPreset] = useState(true); + const token = getPreviewToken(); + + useEffect(() => { + if (!name) { + return; + } + void Promise.all([api.getStyle(name), api.styles(), api.sources()]) + .then(([raw, list, sourceList]) => { + if (!isMapStyle(raw)) { + throw new Error("Стиль должен быть объектом MapLibre (version 8)."); + } + setStyle(raw); + setIsPreset(list.find((item) => item.name === name)?.isPreset ?? true); + const enabled = sourceList.filter((item) => item.enabled); + setSources(enabled); + setSource((current) => current || enabled[0]?.id || ""); + const first = raw.layers?.[raw.layers.length - 1]?.id ?? null; + setSelectedId(first); + setStyleEpoch((n) => n + 1); + }) + .catch((err: unknown) => setError(err instanceof Error ? err.message : "Не удалось открыть стиль")); + }, [name]); + + const layers = style?.layers ?? []; + const selected: StyleLayer | null = layers.find((layer) => layer.id === selectedId) ?? null; + const tilesUrl = useMemo(() => { + if (!user || !source || !token) { + return ""; + } + return tilesTemplate(user.slug, source, token); + }, [user, source, token]); + + const apply = (edit: StyleEdit) => { + if (!style || isPreset) { + return; + } + setStyle(updateLayer(style, edit)); + setLastEdit(edit); + }; + + if (!name || !user) { + return null; + } + + return ( +

+ + Стили + +

{name}

+ + {isPreset ? "пресет" : "мой стиль"} + +

+ + Источник + + + {!isPreset ? ( + <> + + + + ) : ( + + )} +

+ + {error ? ( +

+ +

+ ) : null} + + {isPreset ? ( +

Пресет только для просмотра. Склонируйте его в «Стили», чтобы править цвета и толщины.

+ ) : null} + +

+ selected && apply({ layerId: selected.id, target: "paint", property, value })} + onLayout={(property, value) => selected && apply({ layerId: selected.id, target: "layout", property, value })} + /> +

+ {style && tilesUrl ? ( + + ) : ( +

+ {token + ? "Нет источника тайлов." + : "Создайте токен в разделе «Токены» — без него превью не загрузит персональные тайлы."} +

+ )} +

+ apply({ layerId: id, target: "layout", property: "visibility", value: visible ? "visible" : "none" })} + /> +

+ ); +} diff --git a/web/src/features/styles/StylePreview.tsx b/web/src/features/styles/StylePreview.tsx new file mode 100644 index 0000000..1beb64b --- /dev/null +++ b/web/src/features/styles/StylePreview.tsx @@ -0,0 +1,32 @@ +import { useEffect, useRef } from "react"; +import maplibregl from "maplibre-gl"; +import "maplibre-gl/dist/maplibre-gl.css"; + +type Props = { + slug: string; + name: string; + source: string; + token: string; + nonce: number; +}; + +export function StylePreview({ slug, name, source, token, nonce }: Props) { + const ref = useRef(null); + + useEffect(() => { + if (!ref.current || !source) { + return; + } + + const map = new maplibregl.Map({ + container: ref.current, + style: `/u/${slug}/styles/${name}?source=${encodeURIComponent(source)}&token=${encodeURIComponent(token)}&n=${nonce}`, + center: [37.6173, 55.7558], + zoom: 10 + }); + + return () => map.remove(); + }, [slug, name, source, token, nonce]); + + return

; +} diff --git a/web/src/features/styles/StylesPage.tsx b/web/src/features/styles/StylesPage.tsx new file mode 100644 index 0000000..79260f1 --- /dev/null +++ b/web/src/features/styles/StylesPage.tsx @@ -0,0 +1,88 @@ +import { useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { api, type StyleItem } from "../../api"; +import { Button, Flash, PageHeader, Section } from "../../components/ui"; +import { AppSelect, AppTextField } from "../../ui"; + +export function StylesPage() { + const navigate = useNavigate(); + const [items, setItems] = useState([]); + const [name, setName] = useState(""); + const [from, setFrom] = useState("osm-bright"); + const [error, setError] = useState(null); + + const reload = () => + api + .styles() + .then(setItems) + .catch((err: unknown) => setError(err instanceof Error ? err.message : "Не удалось загрузить стили")); + + useEffect(() => { + void reload(); + }, []); + + const presets = items.filter((item) => item.isPreset); + const cloneFrom = presets.length > 0 ? from : "osm-bright"; + + return ( + <> + +

+ setName(e.target.value)} placeholder="my-bright" /> + setFrom(e.target.value)} + > + {(presets.length > 0 ? presets : [{ name: "osm-bright" }]).map((item) => ( + + ))} + + +

+ +

+ + + + + + + + + + {items.map((item) => ( + + + + + + ))} + +

Имя	Источник	Тип
+ {item.name} +	{item.createdFrom ?? "—"}	{item.isPreset ? "пресет" : "мой"}

+ + ); +} diff --git a/web/src/features/styles/editor.css b/web/src/features/styles/editor.css new file mode 100644 index 0000000..ebc53aa --- /dev/null +++ b/web/src/features/styles/editor.css @@ -0,0 +1,308 @@ +.app-shell--workspace .app-shell__main { + overflow: hidden; +} + +.style-workspace { + display: grid; + grid-template-rows: auto auto 1fr; + height: calc(100vh - 44px); + min-height: 0; + background: var(--grouped-background); +} + +.style-workspace__bar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + min-height: 52px; + padding: 0 var(--gutter); + border-bottom: var(--hairline) solid var(--separator); + background: var(--grouped-surface); +} + +.style-workspace__title { + display: flex; + align-items: center; + gap: var(--space-3); + min-width: 0; +} + +.style-workspace__title h1 { + margin: 0; + font-size: var(--text-title3); + letter-spacing: -0.02em; +} + +.style-workspace__back { + color: var(--accent); + font-size: var(--text-footnote); +} + +.style-workspace__badge { + font-size: var(--text-caption1); + padding: 2px 8px; + border-radius: var(--radius-capsule); + background: var(--accent-soft); + color: var(--accent); +} + +.style-workspace__badge.is-preset { + background: var(--system-gray5); + color: var(--secondary-label); +} + +.style-workspace__actions { + display: flex; + flex-wrap: wrap; + align-items: end; + gap: var(--space-2); +} + +.style-workspace__source { + display: grid; + gap: 2px; + font-size: var(--text-caption1); + color: var(--secondary-label); +} + +.style-workspace__source select { + min-height: 34px; + min-width: 14rem; + border-radius: var(--radius-md); + border: var(--hairline) solid var(--separator); + background: var(--grouped-background); + color: var(--label); + padding: 0 10px; +} + +.style-workspace__flash, +.style-workspace__note { + margin: 0; + padding: var(--space-2) var(--gutter); + font-size: var(--text-footnote); + color: var(--secondary-label); + background: var(--accent-soft); +} + +.style-workspace__body { + display: grid; + grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(240px, 300px); + min-height: 0; +} + +.style-workspace__map { + min-width: 0; + min-height: 0; + background: #111; +} + +.live-map { + width: 100%; + height: 100%; +} + +.style-workspace__empty { + display: grid; + place-items: center; + height: 100%; + padding: var(--gutter); + color: var(--secondary-label); + text-align: center; +} + +.style-pane { + display: grid; + grid-template-rows: auto 1fr; + min-height: 0; + background: var(--grouped-surface); + border-inline: var(--hairline) solid var(--separator); +} + +.style-pane__head { + padding: var(--space-3) var(--space-4); + border-bottom: var(--hairline) solid var(--separator); +} + +.style-pane__kicker { + margin: 0 0 2px; + font-size: var(--text-caption1); + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--secondary-label); +} + +.style-pane__head strong { + display: block; + word-break: break-word; +} + +.style-pane__meta, +.style-pane__hint { + display: block; + margin-top: var(--space-2); + color: var(--secondary-label); + font-size: var(--text-footnote); +} + +.style-pane__search { + width: 100%; + margin-top: var(--space-2); + min-height: 34px; + border: var(--hairline) solid var(--separator); + border-radius: var(--radius-md); + padding: 0 10px; + background: var(--grouped-background); + color: var(--label); +} + +.layer-list { + list-style: none; + margin: 0; + padding: var(--space-2); + overflow: auto; +} + +.layer-list li { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 4px; +} + +.layer-row { + display: grid; + grid-template-columns: 4.6rem 1fr; + align-items: center; + gap: var(--space-2); + width: 100%; + min-height: 36px; + padding: 4px 8px; + border: 0; + border-radius: var(--radius-md); + background: transparent; + color: inherit; + text-align: left; + cursor: pointer; +} + +.layer-row:hover, +.layer-row.is-active { + background: var(--system-gray5); +} + +.layer-row.is-hidden .layer-row__id { + opacity: 0.45; +} + +.layer-row__type { + font-size: 10px; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--secondary-label); +} + +.layer-row__id { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: var(--text-footnote); +} + +.layer-row__eye { + width: 32px; + height: 32px; + border: 0; + background: transparent; + color: var(--secondary-label); + cursor: pointer; +} + +.prop-list { + overflow: auto; + padding: var(--space-3) var(--space-4) var(--space-5); + display: grid; + gap: var(--space-4); +} + +.prop { + display: grid; + gap: 6px; + font-size: var(--text-footnote); + color: var(--secondary-label); +} + +.prop__color, +.prop__range, +.prop__complex { + display: flex; + align-items: center; + gap: 8px; +} + +.prop__color input[type="color"] { + width: 40px; + height: 34px; + padding: 0; + border: var(--hairline) solid var(--separator); + background: transparent; +} + +.prop input[type="text"], +.prop input[type="number"] { + width: 100%; + min-height: 34px; + border: var(--hairline) solid var(--separator); + border-radius: var(--radius-md); + padding: 0 8px; + background: var(--grouped-background); + color: var(--label); +} + +.prop input[type="range"] { + flex: 1; +} + +.prop__toggle { + min-height: 34px; + border: 0; + border-radius: var(--radius-capsule); + padding: 0 12px; + background: var(--system-gray5); + color: var(--label); +} + +.prop__toggle.is-on { + background: var(--accent-soft); + color: var(--accent); +} + +.prop__complex em { + font-style: normal; + color: var(--system-orange); + font-size: var(--text-caption1); +} + +.prop__complex button { + border: 0; + background: transparent; + color: var(--accent); + cursor: pointer; +} + +@media (max-width: 1100px) { + .style-workspace { + height: auto; + min-height: calc(100vh - 44px); + } + + .style-workspace__body { + grid-template-columns: 1fr; + grid-template-rows: 48vh auto auto; + } + + .style-workspace__map { + min-height: 48vh; + } +} diff --git a/web/src/features/styles/layerFields.ts b/web/src/features/styles/layerFields.ts new file mode 100644 index 0000000..eb90a63 --- /dev/null +++ b/web/src/features/styles/layerFields.ts @@ -0,0 +1,54 @@ +export type LayerField = + | { kind: "color"; property: string; label: string } + | { kind: "number"; property: string; label: string; min: number; max: number; step: number } + | { kind: "visibility" }; + +export function fieldsForLayer(type: string): LayerField[] { + switch (type) { + case "background": + return [ + { kind: "color", property: "background-color", label: "Цвет фона" }, + { kind: "number", property: "background-opacity", label: "Прозрачность", min: 0, max: 1, step: 0.05 } + ]; + case "fill": + return [ + { kind: "color", property: "fill-color", label: "Заливка" }, + { kind: "color", property: "fill-outline-color", label: "Обводка" }, + { kind: "number", property: "fill-opacity", label: "Прозрачность", min: 0, max: 1, step: 0.05 }, + { kind: "visibility" } + ]; + case "line": + return [ + { kind: "color", property: "line-color", label: "Цвет линии" }, + { kind: "number", property: "line-width", label: "Толщина", min: 0, max: 24, step: 0.2 }, + { kind: "number", property: "line-opacity", label: "Прозрачность", min: 0, max: 1, step: 0.05 }, + { kind: "visibility" } + ]; + case "circle": + return [ + { kind: "color", property: "circle-color", label: "Цвет" }, + { kind: "number", property: "circle-radius", label: "Радиус", min: 0, max: 24, step: 0.2 }, + { kind: "number", property: "circle-opacity", label: "Прозрачность", min: 0, max: 1, step: 0.05 }, + { kind: "color", property: "circle-stroke-color", label: "Обводка" }, + { kind: "number", property: "circle-stroke-width", label: "Толщина обводки", min: 0, max: 8, step: 0.2 }, + { kind: "visibility" } + ]; + case "symbol": + return [ + { kind: "color", property: "text-color", label: "Цвет текста" }, + { kind: "color", property: "text-halo-color", label: "Обводка текста" }, + { kind: "number", property: "text-halo-width", label: "Толщина обводки", min: 0, max: 8, step: 0.1 }, + { kind: "number", property: "text-size", label: "Размер текста", min: 8, max: 32, step: 1 }, + { kind: "visibility" } + ]; + case "fill-extrusion": + return [ + { kind: "color", property: "fill-extrusion-color", label: "Цвет" }, + { kind: "number", property: "fill-extrusion-opacity", label: "Прозрачность", min: 0, max: 1, step: 0.05 }, + { kind: "number", property: "fill-extrusion-height", label: "Высота", min: 0, max: 200, step: 1 }, + { kind: "visibility" } + ]; + default: + return [{ kind: "visibility" }]; + } +} diff --git a/web/src/features/styles/styleModel.ts b/web/src/features/styles/styleModel.ts new file mode 100644 index 0000000..3afd37d --- /dev/null +++ b/web/src/features/styles/styleModel.ts @@ -0,0 +1,114 @@ +export type StyleLayer = { + id: string; + type: string; + source?: string; + "source-layer"?: string; + minzoom?: number; + maxzoom?: number; + filter?: unknown; + layout?: Record; + paint?: Record; +}; + +export type MapStyle = { + version: number; + name?: string; + sources?: Record; + glyphs?: string; + sprite?: string; + layers?: StyleLayer[]; + [key: string]: unknown; +}; + +export type StyleEdit = { + layerId: string; + target: "paint" | "layout"; + property: string; + value: unknown; +}; + +export function isMapStyle(value: unknown): value is MapStyle { + return Boolean(value && typeof value === "object" && "version" in value); +} + +export function tilesTemplate(slug: string, source: string, token: string): string { + return `/u/${encodeURIComponent(slug)}/tiles/${encodeURIComponent(source)}/{z}/{x}/{y}.pbf?v=3&token=${encodeURIComponent(token)}`; +} + +export function bindStyleForPreview(style: MapStyle, tilesUrl: string): MapStyle { + const next = structuredClone(style); + const sources = { ...(next.sources ?? {}) }; + for (const key of Object.keys(sources)) { + const source = sources[key]; + if (!source || typeof source !== "object") { + continue; + } + const vector = source as Record; + if (vector.type !== "vector") { + continue; + } + vector.tiles = [tilesUrl]; + vector.scheme = "xyz"; + delete vector.url; + delete vector.bounds; + sources[key] = vector; + } + next.sources = sources; + if (!next.glyphs) { + next.glyphs = "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"; + } + return next; +} + +export function updateLayer(style: MapStyle, edit: StyleEdit): MapStyle { + const next = structuredClone(style); + const layer = next.layers?.find((item) => item.id === edit.layerId); + if (!layer) { + return style; + } + const bag = { ...(layer[edit.target] ?? {}) }; + if (edit.value === undefined) { + delete bag[edit.property]; + } else { + bag[edit.property] = edit.value; + } + layer[edit.target] = bag; + return next; +} + +export function asColor(value: unknown): string | null { + return typeof value === "string" && (/^#([0-9a-f]{3,8})$/i.test(value) || /^(rgb|hsl)a?\(/i.test(value)) + ? value + : null; +} + +export function asNumber(value: unknown): number | null { + return typeof value === "number" && Number.isFinite(value) ? value : null; +} + +export function isExpression(value: unknown): boolean { + return Array.isArray(value) || (Boolean(value) && typeof value === "object" && !Array.isArray(value)); +} + +export function toColorInput(value: string): string { + if (/^#[0-9a-f]{6}$/i.test(value)) { + return value; + } + if (/^#[0-9a-f]{3}$/i.test(value)) { + const [, a, b, c] = value; + return `#${a}${a}${b}${b}${c}${c}`; + } + return "#888888"; +} + +export const LAYER_TYPE_LABEL: Record = { + background: "фон", + fill: "заливка", + line: "линия", + symbol: "подпись", + circle: "точка", + "fill-extrusion": "объём", + heatmap: "тепло", + hillshade: "рельеф", + raster: "растр" +}; diff --git a/web/src/features/tokens/TokensPage.tsx b/web/src/features/tokens/TokensPage.tsx new file mode 100644 index 0000000..902479e --- /dev/null +++ b/web/src/features/tokens/TokensPage.tsx @@ -0,0 +1,94 @@ +import { useEffect, useState } from "react"; +import { api, getPreviewToken, setPreviewToken, type CreatedToken, type TokenItem } from "../../api"; +import { Button, Flash, PageHeader, Section } from "../../components/ui"; +import { AppTextField } from "../../ui"; + +export function TokensPage() { + const [items, setItems] = useState([]); + const [name, setName] = useState("MapLibre"); + const [created, setCreated] = useState(null); + const [error, setError] = useState(null); + const preview = getPreviewToken(); + + const reload = () => + api + .tokens() + .then(setItems) + .catch((err: unknown) => setError(err instanceof Error ? err.message : "Не удалось загрузить токены")); + + useEffect(() => { + void reload(); + }, []); + + return ( + <> + +

+ setName(e.target.value)} /> + +

+ {created ? ( +

{`Новый ключ (показывается один раз):\n${created.token}\n\nОн сохранён как превью-токен этой сессии.`}

+ ) : null} + {preview && !created ?

{`Превью этой сессии: ${preview.slice(0, 11)}…`}

: null} + +

+ + + + + + + + + + + {items.map((item) => ( + + + + + + + ))} + +

Имя	Префикс	Создан
{item.name}	{item.prefix}…	{new Date(item.createdAt).toLocaleString("ru-RU")}	+ {item.revokedAt ? ( + "отозван" + ) : ( + + )} +

+ + ); +} diff --git a/web/src/features/usage/DashboardPage.tsx b/web/src/features/usage/DashboardPage.tsx new file mode 100644 index 0000000..7513f17 --- /dev/null +++ b/web/src/features/usage/DashboardPage.tsx @@ -0,0 +1,96 @@ +import { useEffect, useMemo, useState } from "react"; +import { api, type UsageDay } from "../../api"; +import { Link } from "react-router-dom"; +import { Flash, MetricGrid, PageHeader, Section } from "../../components/ui"; +import { useAuth } from "../auth/AuthContext"; + +function iso(date: Date): string { + return date.toISOString().slice(0, 10); +} + +function formatBytes(value: number): string { + if (value < 1024) { + return `${value} B`; + } + if (value < 1024 * 1024) { + return `${(value / 1024).toFixed(1)} KB`; + } + return `${(value / (1024 * 1024)).toFixed(1)} MB`; +} + +export function DashboardPage() { + const { user } = useAuth(); + const [days, setDays] = useState([]); + const [error, setError] = useState(null); + + useEffect(() => { + const to = new Date(); + const from = new Date(); + from.setUTCDate(from.getUTCDate() - 6); + void api + .usage(iso(from), iso(to)) + .then(setDays) + .catch((err: unknown) => setError(err instanceof Error ? err.message : "Не удалось загрузить данные")); + }, []); + + const today = iso(new Date()); + const todayRow = days.find((d) => d.date === today); + const week = useMemo( + () => + days.reduce( + (acc, day) => ({ + tileRequests: acc.tileRequests + day.tileRequests, + styleRequests: acc.styleRequests + day.styleRequests, + bytes: acc.bytes + day.bytes + }), + { tileRequests: 0, styleRequests: 0, bytes: 0 } + ), + [days] + ); + + return ( + <> + + + +

+ Примеры кода, HTML и живая карта — в разделе Инструкции. +

+ + + + + + + + + + + {days.map((day) => ( + + + + + + + ))} + +

Дата	Тайлы	Стили	Байты
{day.date}	{day.tileRequests}	{day.styleRequests}	{formatBytes(day.bytes)}

+ + ); +} diff --git a/web/src/legal/CookieBanner.tsx b/web/src/legal/CookieBanner.tsx new file mode 100644 index 0000000..5092051 --- /dev/null +++ b/web/src/legal/CookieBanner.tsx @@ -0,0 +1,60 @@ +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { AppButton, AppText } from "../ui"; +import { + readCookieChoice, + resetCookieChoice, + subscribeCookieChoice, + writeCookieChoice, +} from "./cookieConsent"; +import { LEGAL_PATHS } from "./operator"; + +export function CookieBanner() { + const [choice, setChoice] = useState(() => readCookieChoice()); + + useEffect(() => subscribeCookieChoice(() => setChoice(readCookieChoice())), []); + + if (choice) return null; + + return ( + + ); +} + +export function CookieSettings() { + return ( +

+ { + resetCookieChoice(); + }} + > + Изменить выбор cookie + +

+ ); +} diff --git a/web/src/legal/LegalCheckboxes.tsx b/web/src/legal/LegalCheckboxes.tsx new file mode 100644 index 0000000..52c7916 --- /dev/null +++ b/web/src/legal/LegalCheckboxes.tsx @@ -0,0 +1,37 @@ +import { Link } from "react-router-dom"; +import { LEGAL_PATHS } from "./operator"; + +type Props = { + offer: boolean; + consent: boolean; + onOffer: (value: boolean) => void; + onConsent: (value: boolean) => void; +}; + +export function LegalCheckboxes({ offer, consent, onOffer, onConsent }: Props) { + return ( +

+ + onOffer(e.target.checked)} /> + + Я принимаю условия{" "} + + Пользовательского соглашения + {" "} + (публичной оферты). + + + + onConsent(e.target.checked)} /> + + Я даю согласие на обработку моих персональных данных (имя, логин Яндекс ID, стили карт, + токены доступа и статистика запросов), полученных от сервиса Яндекс и введённых мной, в + целях предоставления доступа к Сервису. Согласие действует до его отзыва.{" "} + + Текст согласия + + + +

+ ); +} diff --git a/web/src/legal/LegalPage.tsx b/web/src/legal/LegalPage.tsx new file mode 100644 index 0000000..2f4cfc6 --- /dev/null +++ b/web/src/legal/LegalPage.tsx @@ -0,0 +1,48 @@ +import { Link, Navigate, useParams } from "react-router-dom"; +import { AppText } from "../ui"; +import { CookieSettings } from "./CookieBanner"; +import { legalDocumentBySlug } from "./documents"; +import { SiteFooter } from "./SiteFooter"; + +export function LegalPage() { + const { slug } = useParams(); + const doc = legalDocumentBySlug(slug); + + if (!doc) { + return ; + } + + return ( +

+ + ← Назад + +

+ + {doc.title} + + {doc.lead} +

+ {doc.sections.map((section) => ( +

{section.heading}

+ {section.blocks.map((block, index) => + block.type === "ul" ? ( +

{item}

+ ) : ( +

{block.text}

+ ), + )} +

+ ))} + {doc.slug === "cookies" ? : null} +

+ +

+ ); +} diff --git a/web/src/legal/SiteFooter.tsx b/web/src/legal/SiteFooter.tsx new file mode 100644 index 0000000..82365cf --- /dev/null +++ b/web/src/legal/SiteFooter.tsx @@ -0,0 +1,28 @@ +import { Link } from "react-router-dom"; +import { LEGAL_PATHS, OPERATOR } from "./operator"; + +const LINKS = [ + { to: LEGAL_PATHS.offer, label: "Оферта" }, + { to: LEGAL_PATHS.privacy, label: "Конфиденциальность" }, + { to: LEGAL_PATHS.consent, label: "Согласие" }, + { to: LEGAL_PATHS.cookies, label: "Cookie" }, +] as const; + +export function SiteFooter() { + return ( + + ); +} diff --git a/web/src/legal/cookieConsent.ts b/web/src/legal/cookieConsent.ts new file mode 100644 index 0000000..f600b76 --- /dev/null +++ b/web/src/legal/cookieConsent.ts @@ -0,0 +1,43 @@ +export const COOKIE_CONSENT_KEY = "ts_cookie_consent"; +export type CookieChoice = "necessary" | "all"; + +const EVENT = "ts-cookie-consent"; + +export function readCookieChoice(): CookieChoice | null { + try { + const raw = localStorage.getItem(COOKIE_CONSENT_KEY); + if (raw === "necessary" || raw === "all") { + return raw; + } + } catch { + /* private mode */ + } + return null; +} + +export function writeCookieChoice(choice: CookieChoice): void { + try { + localStorage.setItem(COOKIE_CONSENT_KEY, choice); + } catch { + /* ignore */ + } + window.dispatchEvent(new Event(EVENT)); +} + +export function resetCookieChoice(): void { + try { + localStorage.removeItem(COOKIE_CONSENT_KEY); + } catch { + /* ignore */ + } + window.dispatchEvent(new Event(EVENT)); +} + +export function subscribeCookieChoice(listener: () => void): () => void { + window.addEventListener(EVENT, listener); + window.addEventListener("storage", listener); + return () => { + window.removeEventListener(EVENT, listener); + window.removeEventListener("storage", listener); + }; +} diff --git a/web/src/legal/documents.ts b/web/src/legal/documents.ts new file mode 100644 index 0000000..c49c1de --- /dev/null +++ b/web/src/legal/documents.ts @@ -0,0 +1,261 @@ +import { LEGAL_PATHS, OPERATOR } from "./operator"; + +export type LegalBlock = { type: "p"; text: string } | { type: "ul"; items: string[] }; + +export type LegalSection = { + heading: string; + blocks: LegalBlock[]; +}; + +export type LegalDocument = { + slug: keyof typeof LEGAL_PATHS; + title: string; + lead: string; + sections: LegalSection[]; +}; + +const headerLines = [ + OPERATOR.name, + `ИНН: ${OPERATOR.inn}`, + `ОГРНИП: ${OPERATOR.ogrnip}`, + `Адрес: ${OPERATOR.address}`, + `Email для обращений: ${OPERATOR.email}`, +]; + +export const legalDocuments: LegalDocument[] = [ + { + slug: "offer", + title: "Пользовательское соглашение (публичная оферта)", + lead: `Настоящий документ является официальным предложением (${OPERATOR.shortName}) заключить договор на изложенных ниже условиях. Дата публикации: ${OPERATOR.updated}.`, + sections: [ + { + heading: "Реквизиты исполнителя", + blocks: [{ type: "ul", items: [...headerLines] }], + }, + { + heading: "1. Термины", + blocks: [ + { + type: "ul", + items: [ + "Пользователь — дееспособное физическое лицо, принявшее условия настоящей Оферты и использующее Сервис.", + `Сервис — веб-кабинет и программные интерфейсы «${OPERATOR.serviceName}» по адресу ${OPERATOR.site}, предназначенные для выдачи векторных тайлов OpenStreetMap, стилей MapLibre и учёта запросов.`, + "Оферта — настоящий документ.", + ], + }, + ], + }, + { + heading: "2. Предмет", + blocks: [ + { + type: "p", + text: "Исполнитель предоставляет Пользователю доступ к Сервису: личный кабинет, персональные токены, стили карты и URL выдачи тайлов. Исходные выгрузки OSM являются общими и не создаются Пользователем.", + }, + { + type: "p", + text: "Данные OpenStreetMap предоставляются на условиях ODbL. Исполнитель не является правообладателем картографических данных OSM.", + }, + ], + }, + { + heading: "3. Акцепт", + blocks: [ + { + type: "p", + text: "Вход в Сервис через Яндекс ID и начало использования функционала являются акцептом настоящей Оферты.", + }, + { + type: "p", + text: "Используя Сервис, Пользователь подтверждает, что ознакомился с Политикой конфиденциальности и дал согласие на обработку персональных данных в необходимом объёме.", + }, + ], + }, + { + heading: "4. Ответственность", + blocks: [ + { + type: "ul", + items: [ + "Сервис предоставляется «как есть». Исполнитель не гарантирует бесперебойную работу и полноту покрытия карты.", + "Исполнитель не отвечает за действия третьих лиц, получивших токен Пользователя, и за последствия разглашения токена или доступа к Яндекс ID.", + "Пользователь обязан соблюдать условия OpenStreetMap и не использовать Сервис для противоправных целей.", + ], + }, + ], + }, + { + heading: "5. Прочие условия", + blocks: [ + { + type: "p", + text: "Исполнитель вправе изменять Оферту, публикуя новую редакцию на этой странице. Продолжение использования Сервиса после публикации означает принятие новой редакции, если иное не требуется законом.", + }, + { + type: "p", + text: `Споры решаются путём переговоров, а при недостижении согласия — в порядке, установленном законодательством РФ. Контакт: ${OPERATOR.email}.`, + }, + ], + }, + ], + }, + { + slug: "privacy", + title: "Политика конфиденциальности", + lead: `Настоящая Политика описывает, какие персональные данные обрабатывает ${OPERATOR.shortName} при работе Сервиса «${OPERATOR.serviceName}». Дата публикации: ${OPERATOR.updated}.`, + sections: [ + { + heading: "Реквизиты оператора", + blocks: [{ type: "ul", items: [...headerLines] }], + }, + { + heading: "1. Оператор", + blocks: [ + { + type: "p", + text: `${OPERATOR.name} (ИНН ${OPERATOR.inn}, ОГРНИП ${OPERATOR.ogrnip}), адрес: ${OPERATOR.address}, email: ${OPERATOR.email}, является оператором персональных данных Пользователей Сервиса.`, + }, + ], + }, + { + heading: "2. Какие данные собираются", + blocks: [ + { + type: "ul", + items: [ + "От Яндекса (OAuth / Яндекс ID): идентификатор, логин, отображаемое имя.", + "Введённые Пользователем: названия и JSON стилей карты, имена токенов.", + "Автоматически: cookie сессии, IP-адрес, технические журналы и агрегаты запросов тайлов/стилей (число запросов, объём).", + ], + }, + ], + }, + { + heading: "3. Цели обработки", + blocks: [ + { + type: "ul", + items: [ + "Исполнение договора: вход в кабинет, выдача тайлов и стилей, учёт использования.", + "Связь с Пользователем: ответы на обращения в поддержку.", + "Улучшение работы Сервиса: обезличенная аналитика сбоев (при наличии согласия на аналитические cookie).", + ], + }, + ], + }, + { + heading: "4. Передача третьим лицам", + blocks: [ + { + type: "p", + text: "Яндекс — для авторизации через Яндекс ID; Исполнитель получает от Яндекса указанные выше сведения профиля. Данные банковских карт Исполнитель не получает и не хранит.", + }, + ], + }, + { + heading: "5. Права Пользователя и сроки", + blocks: [ + { + type: "p", + text: `Пользователь вправе запросить доступ к своим данным, их уточнение, ограничение обработки, удаление аккаунта и отзыв согласия, направив письмо на ${OPERATOR.email}.`, + }, + { + type: "p", + text: "После удаления аккаунта персональные данные хранятся не дольше 3 лет — в объёме, необходимом для исполнения требований законодательства, затем уничтожаются либо обезличиваются.", + }, + ], + }, + { + heading: "6. Cookie", + blocks: [ + { + type: "p", + text: "Сервис использует технические cookie для входа и сохранения сессии, а также — только после согласия — аналитические cookie (Яндекс.Метрика). Подробности: Политика использования cookie.", + }, + ], + }, + ], + }, + { + slug: "consent", + title: "Согласие на обработку персональных данных", + lead: "Текст согласия, которое Пользователь даёт, отмечая соответствующий чек-бокс при входе в Сервис.", + sections: [ + { + heading: "Реквизиты оператора", + blocks: [{ type: "ul", items: [...headerLines] }], + }, + { + heading: "Текст согласия", + blocks: [ + { + type: "p", + text: `Я, Пользователь Сервиса «${OPERATOR.serviceName}», даю согласие ${OPERATOR.shortName} (ИНН ${OPERATOR.inn}) на обработку моих персональных данных: логин и отображаемое имя Яндекс ID, стили карт, токены доступа и статистика запросов.`, + }, + { + type: "p", + text: "Цели: предоставление доступа к Сервису, связь со мной, улучшение Сервиса.", + }, + { + type: "p", + text: "Способы обработки: сбор, запись, систематизация, хранение, уточнение, использование, передача (Яндекс — для авторизации), удаление — в том числе автоматизированно.", + }, + { + type: "p", + text: `Согласие действует до его отзыва. Отзыв направляется по email ${OPERATOR.email}. Отзыв не влияет на законность обработки, осуществлённой до его получения, и может сделать невозможным дальнейшее использование Сервиса.`, + }, + ], + }, + ], + }, + { + slug: "cookies", + title: "Политика использования cookie", + lead: `Документ описывает, какие cookie использует Сервис «${OPERATOR.serviceName}» и как отказаться от аналитических. Дата публикации: ${OPERATOR.updated}.`, + sections: [ + { + heading: "Реквизиты оператора", + blocks: [{ type: "ul", items: [...headerLines] }], + }, + { + heading: "1. Что такое cookie", + blocks: [ + { + type: "p", + text: "Cookie — небольшие файлы, которые сайт сохраняет в браузере. Они помогают запомнить вход и понять, как пользуются Сервисом.", + }, + ], + }, + { + heading: "2. Какие cookie мы используем", + blocks: [ + { + type: "ul", + items: [ + "Технические — обязательны для входа и работы кабинета (сессия ts_session, выбор cookie). Без них авторизация невозможна.", + "Аналитические — Яндекс.Метрика: посещения страниц, источник перехода, тип устройства. Ставятся только после согласия «Принять все».", + "Рекламные cookie сейчас не используются.", + ], + }, + ], + }, + { + heading: "3. Как отказаться", + blocks: [ + { + type: "p", + text: "При первом заходе показывается баннер. Можно выбрать «Только необходимые» — аналитические cookie не устанавливаются. Выбор можно изменить кнопкой ниже или очистив данные сайта в браузере.", + }, + { + type: "p", + text: `Вопросы: ${OPERATOR.email}.`, + }, + ], + }, + ], + }, +]; + +export function legalDocumentBySlug(slug: string | undefined): LegalDocument | undefined { + return legalDocuments.find((doc) => doc.slug === slug); +} diff --git a/web/src/legal/legal.css b/web/src/legal/legal.css new file mode 100644 index 0000000..8c02a55 --- /dev/null +++ b/web/src/legal/legal.css @@ -0,0 +1,173 @@ +.legal-page { + min-height: 100vh; + display: flex; + flex-direction: column; + background: var(--grouped-background); +} + +.legal-page__inner { + width: min(720px, 100%); + margin: 0 auto; + padding: var(--space-6) var(--gutter) var(--space-8); + display: grid; + gap: var(--space-5); +} + +.legal-page__back { + color: var(--accent); + font-size: var(--text-subhead); + font-weight: 600; + width: fit-content; +} + +.legal-page__meta { + display: grid; + gap: var(--space-1); +} + +.legal-section { + display: grid; + gap: var(--space-3); +} + +.legal-section h2 { + font-size: var(--text-headline); +} + +.legal-section p, +.legal-section li { + font-size: var(--text-body); + line-height: 1.45; + color: var(--label); +} + +.legal-section ul { + margin: 0; + padding-left: 1.2em; + display: grid; + gap: var(--space-2); +} + +.legal-link { + color: var(--accent); + text-decoration: underline; + text-underline-offset: 2px; +} + +.site-footer { + margin-top: auto; + padding: var(--space-4) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); + border-top: var(--hairline) solid var(--separator); + background: var(--bar-background); +} + +.site-footer__inner { + width: min(720px, 100%); + margin: 0 auto; + display: grid; + gap: var(--space-2); +} + +.site-footer__links { + display: flex; + flex-wrap: wrap; + gap: var(--space-2) var(--space-4); +} + +.site-footer__links a { + color: var(--secondary-label); + font-size: var(--text-footnote); +} + +.site-footer__links a:hover { + color: var(--accent); +} + +.site-footer__copy { + margin: 0; + color: var(--tertiary-label); + font-size: var(--text-caption1); +} + +.app-shell .site-footer { + margin-top: var(--space-4); + border-top: 0; + background: transparent; + padding: var(--space-3) var(--gutter) 0; +} + +.auth-panel__foot .site-footer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.auth-panel__foot .site-footer__inner { + width: 100%; +} + +.app-shell .site-footer__inner { + width: 100%; +} + +.legal-check { + display: grid; + grid-template-columns: 22px 1fr; + gap: var(--space-2); + align-items: start; + margin: 0; + color: var(--secondary-label); + font-size: var(--text-footnote); + line-height: 1.4; + cursor: pointer; +} + +.legal-check input { + margin-top: 2px; + accent-color: var(--accent); +} + +.legal-checks { + display: grid; + gap: var(--space-3); +} + +.cookie-banner { + position: fixed; + left: var(--gutter); + right: var(--gutter); + bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); + z-index: 50; + max-width: 560px; + margin: 0 auto; + padding: var(--space-4); + border-radius: var(--radius-lg); + background: var(--grouped-surface); + box-shadow: 0 12px 40px rgb(0 0 0 / 18%); + display: grid; + gap: var(--space-3); +} + +.cookie-banner__actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); +} + +.btn--yandex.is-disabled, +.btn--yandex[aria-disabled="true"] { + opacity: 0.45; + pointer-events: none; +} + +@media (max-width: 860px) { + .app-shell .site-footer { + padding-inline: 0; + } + + .app-shell .site-footer__links { + flex-wrap: nowrap; + overflow-x: auto; + } +} diff --git a/web/src/legal/operator.ts b/web/src/legal/operator.ts new file mode 100644 index 0000000..39f4875 --- /dev/null +++ b/web/src/legal/operator.ts @@ -0,0 +1,20 @@ +export const OPERATOR = { + name: "Индивидуальный предприниматель Архангельский Владимир Александрович", + shortName: "ИП Архангельский В.А.", + inn: "772270222393", + ogrnip: "323774600438338", + address: "105037, г. Москва, ул. 2-я Парковая, д. 16, кв. 8", + email: "hohnergold@yandex.ru", + serviceName: "Tile Server", + site: "https://tile-server.ru", + updated: "21 сентября 2026 г.", +} as const; + +export const LEGAL_PATHS = { + offer: "/legal/offer", + privacy: "/legal/privacy", + consent: "/legal/consent", + cookies: "/legal/cookies", +} as const; + +export type LegalSlug = keyof typeof LEGAL_PATHS; diff --git a/web/src/main.tsx b/web/src/main.tsx new file mode 100644 index 0000000..3e39596 --- /dev/null +++ b/web/src/main.tsx @@ -0,0 +1,16 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { App } from "./App"; +import { AuthProvider } from "./features/auth/AuthContext"; +import "./styles.css"; + +createRoot(document.getElementById("root")!).render( + + + + + + + +); diff --git a/web/src/styles.css b/web/src/styles.css new file mode 100644 index 0000000..1e4231f --- /dev/null +++ b/web/src/styles.css @@ -0,0 +1,60 @@ +@import "./design/index.css"; + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-subhead); +} + +.data-table th, +.data-table td { + text-align: left; + padding: var(--space-3) var(--space-2); + border-bottom: 1px solid var(--separator, rgba(60, 60, 67, 0.12)); +} + +.data-table th { + color: var(--label-secondary); + font-weight: 500; +} + +.code-block { + overflow: auto; + margin: 0; + padding: var(--space-4); + border-radius: 12px; + background: var(--fill-secondary, rgba(120, 120, 128, 0.12)); + font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; + font-size: 13px; + line-height: 1.45; + white-space: pre-wrap; +} + +.style-json { + width: 100%; + min-height: 22rem; + resize: vertical; + font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; + font-size: 13px; + line-height: 1.45; + padding: var(--space-4); + border-radius: 12px; + border: 1px solid var(--separator, rgba(60, 60, 67, 0.12)); + background: var(--fill-secondary, rgba(120, 120, 128, 0.08)); + color: inherit; +} + +.map-frame { + height: 28rem; + border-radius: 12px; + overflow: hidden; + border: 1px solid var(--separator, rgba(60, 60, 67, 0.12)); +} + +.form-row { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + align-items: end; + margin-bottom: var(--space-4); +} diff --git a/web/src/ui/AppButton.tsx b/web/src/ui/AppButton.tsx new file mode 100644 index 0000000..aef1b77 --- /dev/null +++ b/web/src/ui/AppButton.tsx @@ -0,0 +1,42 @@ +import type { ButtonHTMLAttributes, ReactNode } from "react"; + +export type AppButtonStyle = "filled" | "tinted" | "gray" | "plain" | "destructive"; +export type AppButtonSize = "large" | "medium" | "small"; + +type Props = ButtonHTMLAttributes & { + label?: ReactNode; + children?: ReactNode; + buttonStyle?: AppButtonStyle; + size?: AppButtonSize; + expanded?: boolean; + loading?: boolean; +}; + +export function AppButton({ + label, + children, + buttonStyle = "filled", + size = "large", + expanded = true, + loading = false, + className = "", + disabled, + type = "button", + ...rest +}: Props) { + const classes = [ + "app-btn", + `app-btn--${buttonStyle}`, + `app-btn--${size}`, + expanded ? "app-btn--expanded" : "", + className, + ] + .filter(Boolean) + .join(" "); + + return ( + + ); +} diff --git a/web/src/ui/AppFeedback.tsx b/web/src/ui/AppFeedback.tsx new file mode 100644 index 0000000..95eec41 --- /dev/null +++ b/web/src/ui/AppFeedback.tsx @@ -0,0 +1,96 @@ +import type { ReactNode } from "react"; +import { AppButton } from "./AppButton"; +import { AppText } from "./AppText"; + +export function AppSpinner() { + return ; +} + +export function AppSkeleton({ width = "100%", height = 12 }: { width?: string | number; height?: number }) { + return ; +} + +export function AppProgress({ + spent, + total, + label, +}: { + spent: number; + total: number; + label?: string; +}) { + const pct = total > 0 ? Math.min(100, Math.max(0, (spent / total) * 100)) : 0; + const tone = pct >= 100 ? "is-danger" : pct >= 85 ? "is-warn" : ""; + return ( +

+ +

+ ); +} + +export function AppEmptyView({ + title = "Пусто", + message, + action, +}: { + title?: string; + message?: ReactNode; + action?: ReactNode; +}) { + return ( +

+ {title} + {message ? {message} : null} + {action} +

+ ); +} + +export function AppErrorView({ + message, + onRetry, +}: { + message: string; + onRetry?: () => void; +}) { + return ( +

+ Не удалось загрузить + {message} + {onRetry ? ( + + ) : null} +

+ ); +} + +export function AppChip({ + label, + selected = false, + onClick, + disabled, +}: { + label: string; + selected?: boolean; + onClick?: () => void; + disabled?: boolean; +}) { + return ( + + ); +} + +export function AppAvatar({ initials }: { initials: string }) { + return {initials}; +} diff --git a/web/src/ui/AppList.tsx b/web/src/ui/AppList.tsx new file mode 100644 index 0000000..9f87438 --- /dev/null +++ b/web/src/ui/AppList.tsx @@ -0,0 +1,75 @@ +import type { ReactNode } from "react"; +import { AppSectionHeader } from "./AppText"; + +type SectionProps = { + header?: string; + footer?: ReactNode; + children: ReactNode; + flush?: boolean; +}; + +export function AppListSection({ header, footer, children, flush = false }: SectionProps) { + return ( +

+ {header ? {header} : null} +

{children}

+ {footer ?

{footer}

: null} +

+ ); +} + +type TileProps = { + title: ReactNode; + subtitle?: ReactNode; + value?: ReactNode; + leading?: ReactNode; + trailing?: ReactNode; + chevron?: boolean; + destructive?: boolean; + onClick?: () => void; + href?: string; +}; + +export function AppListTile({ + title, + subtitle, + value, + leading, + trailing, + chevron = false, + destructive = false, + onClick, + href, +}: TileProps) { + const interactive = Boolean(onClick || href); + const className = `app-tile${destructive ? " app-tile--destructive" : ""}`; + const body = ( + <> + {leading} +

{title}

+ {subtitle ?

{subtitle}

: null} +

+ {trailing ?? (value != null ?

{value}

: null)} + {chevron ? : null} + + ); + + if (href) { + return ( + + {body} + + ); + } + + if (interactive) { + return ( + + ); + } + + return

{body}

; +} diff --git a/web/src/ui/AppSegmented.tsx b/web/src/ui/AppSegmented.tsx new file mode 100644 index 0000000..cc59b86 --- /dev/null +++ b/web/src/ui/AppSegmented.tsx @@ -0,0 +1,32 @@ +type Option = { value: T; label: string }; + +type Props = { + value: T; + options: Option[]; + onChange: (value: T) => void; + ariaLabel?: string; +}; + +export function AppSegmented({ + value, + options, + onChange, + ariaLabel, +}: Props) { + return ( +

+ {options.map((option) => ( + + ))} +

+ ); +} diff --git a/web/src/ui/AppText.tsx b/web/src/ui/AppText.tsx new file mode 100644 index 0000000..547062e --- /dev/null +++ b/web/src/ui/AppText.tsx @@ -0,0 +1,59 @@ +import type { ElementType, ReactNode } from "react"; + +export type AppTextVariant = + | "largeTitle" + | "title1" + | "title2" + | "title3" + | "headline" + | "body" + | "callout" + | "subhead" + | "footnote" + | "caption"; + +export type AppTextTone = "label" | "secondary" | "tertiary" | "accent" | "danger"; + +const DEFAULT_TONE: Record = { + largeTitle: "label", + title1: "label", + title2: "label", + title3: "label", + headline: "label", + body: "label", + callout: "secondary", + subhead: "secondary", + footnote: "secondary", + caption: "tertiary", +}; + +type Props = { + children: ReactNode; + variant?: AppTextVariant; + tone?: AppTextTone; + as?: ElementType; + className?: string; +}; + +export function AppText({ + children, + variant = "body", + tone, + as: Tag = "p", + className = "", +}: Props) { + const color = tone ?? DEFAULT_TONE[variant]; + return ( + + {children} + + ); +} + +export function AppSectionHeader({ children }: { children: ReactNode }) { + return ( + + {typeof children === "string" ? children.toUpperCase() : children} + + ); +} diff --git a/web/src/ui/AppTextField.tsx b/web/src/ui/AppTextField.tsx new file mode 100644 index 0000000..c1e0126 --- /dev/null +++ b/web/src/ui/AppTextField.tsx @@ -0,0 +1,54 @@ +import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react"; +import { AppSectionHeader } from "./AppText"; + +type FieldProps = { + label?: string; + hint?: ReactNode; + error?: string; + className?: string; +}; + +export function AppTextField({ + label, + id, + hint, + error, + className = "", + ...rest +}: InputHTMLAttributes & FieldProps & { id: string }) { + return ( +

+ {label ? ( + + {label} + + ) : null} + + {error ?

{error}

: hint} +

+ ); +} + +export function AppSelect({ + label, + id, + hint, + error, + className = "", + children, + ...rest +}: SelectHTMLAttributes & FieldProps & { id: string }) { + return ( +

+ {label ? ( + + {label} + + ) : null} + + {error ?

{error}

: hint} +

+ ); +} diff --git a/web/src/ui/index.ts b/web/src/ui/index.ts new file mode 100644 index 0000000..51807e0 --- /dev/null +++ b/web/src/ui/index.ts @@ -0,0 +1,15 @@ +export { AppText, AppSectionHeader } from "./AppText"; +export { AppButton } from "./AppButton"; +export type { AppButtonSize, AppButtonStyle } from "./AppButton"; +export { AppTextField, AppSelect } from "./AppTextField"; +export { AppListSection, AppListTile } from "./AppList"; +export { AppSegmented } from "./AppSegmented"; +export { + AppSpinner, + AppSkeleton, + AppProgress, + AppEmptyView, + AppErrorView, + AppChip, + AppAvatar, +} from "./AppFeedback"; diff --git a/web/src/ui/kit.css b/web/src/ui/kit.css new file mode 100644 index 0000000..dd627b8 --- /dev/null +++ b/web/src/ui/kit.css @@ -0,0 +1,346 @@ +/* iOS kit — mirrors mobile/lib/ui */ + +.app-text { + margin: 0; + font-family: var(--font-sans); +} + +.app-text--largeTitle { + font-size: var(--text-large-title); + font-weight: 700; + letter-spacing: 0.37px; + line-height: 1.2; +} +.app-text--title1 { + font-size: var(--text-title1); + font-weight: 700; + letter-spacing: 0.36px; + line-height: 1.2; +} +.app-text--title2 { + font-size: var(--text-title2); + font-weight: 700; + letter-spacing: 0.35px; + line-height: 1.25; +} +.app-text--title3 { + font-size: var(--text-title3); + font-weight: 600; + letter-spacing: 0.38px; + line-height: 1.25; +} +.app-text--headline { + font-size: var(--text-headline); + font-weight: 600; + letter-spacing: -0.41px; + line-height: 1.3; +} +.app-text--body { + font-size: var(--text-body); + font-weight: 400; + letter-spacing: -0.41px; + line-height: 1.3; +} +.app-text--callout { + font-size: var(--text-callout); + font-weight: 400; + letter-spacing: -0.32px; + line-height: 1.3; +} +.app-text--subhead { + font-size: var(--text-subhead); + font-weight: 400; + letter-spacing: -0.24px; + line-height: 1.3; +} +.app-text--footnote { + font-size: var(--text-footnote); + font-weight: 400; + letter-spacing: -0.08px; + line-height: 1.3; +} +.app-text--caption { + font-size: var(--text-caption1); + font-weight: 400; + line-height: 1.3; +} + +.app-text--label { color: var(--label); } +.app-text--secondary { color: var(--secondary-label); } +.app-text--tertiary { color: var(--tertiary-label); } +.app-text--accent { color: var(--accent); } +.app-text--danger { color: var(--system-red); } + +.app-section-header { + display: block; + margin: 0; + padding: var(--space-4) var(--gutter) var(--space-2); + font-size: var(--text-footnote); + font-weight: 400; + letter-spacing: 0.4px; + text-transform: uppercase; + color: var(--secondary-label); +} + +.app-section-footer { + margin: 0; + padding: var(--space-2) var(--gutter) 0; + font-size: var(--text-footnote); + color: var(--secondary-label); +} + +.app-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + border: 0; + cursor: pointer; + font-family: var(--font-sans); + font-weight: 600; + letter-spacing: -0.41px; + text-decoration: none; + color: inherit; + transition: filter 140ms ease, opacity 140ms ease; +} + +.app-btn:disabled { + opacity: 0.35; + cursor: not-allowed; +} + +.app-btn--expanded { width: 100%; } +.app-btn--large { + height: var(--control-height); + padding: 0 var(--space-4); + border-radius: var(--radius-lg); + font-size: var(--text-headline); +} +.app-btn--medium { + height: var(--control-height-md); + padding: 0 var(--space-4); + border-radius: var(--radius-lg); + font-size: var(--text-body); +} +.app-btn--small { + height: var(--control-height-sm); + padding: 0 var(--space-3); + border-radius: var(--radius-md); + font-size: var(--text-subhead); +} + +.app-btn--filled { background: var(--accent); color: #fff; } +.app-btn--tinted { background: rgb(18 136 90 / 15%); color: var(--accent); } +.app-btn--gray { background: var(--system-gray5); color: var(--label); } +.app-btn--plain { background: transparent; color: var(--accent); } +.app-btn--destructive { background: rgb(255 59 48 / 15%); color: var(--system-red); } + +.app-btn:hover:not(:disabled) { filter: brightness(1.04); } + +.app-field { display: grid; gap: var(--space-2); } +.app-field .app-section-header { + padding: 0; +} +.app-field__control { + width: 100%; + height: var(--control-height-md); + border: 0; + border-radius: var(--radius-md); + background: var(--grouped-surface); + color: var(--label); + padding: 0 var(--space-3); + font-size: var(--text-body); + letter-spacing: -0.41px; +} +.app-field__control:disabled { + opacity: 0.4; +} +.app-field--error .app-field__control { + box-shadow: inset 0 0 0 1px var(--system-red); +} +.app-field__error { + margin: 0; + font-size: var(--text-footnote); + color: var(--system-red); +} + +.app-list { + margin: 0 var(--gutter); + padding: 0; + list-style: none; + background: var(--grouped-surface); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.app-list--flush { + margin-inline: 0; +} + +.app-tile { + display: flex; + align-items: center; + gap: var(--space-3); + width: 100%; + min-height: var(--row-min-height); + padding: 10px var(--gutter); + border: 0; + background: var(--grouped-surface); + color: inherit; + text-align: left; + font: inherit; + cursor: default; +} +button.app-tile, +a.app-tile { + cursor: pointer; +} +button.app-tile:hover, +a.app-tile:hover { + background: var(--system-gray5); +} +.app-tile + .app-tile { + box-shadow: inset 0 var(--hairline) 0 var(--separator); + background-clip: padding-box; +} +.app-tile__body { flex: 1; min-width: 0; } +.app-tile__title { + margin: 0; + font-size: var(--text-body); + letter-spacing: -0.41px; + color: var(--label); +} +.app-tile--destructive .app-tile__title { color: var(--system-red); } +.app-tile__subtitle { + margin: 2px 0 0; + font-size: var(--text-footnote); + color: var(--secondary-label); +} +.app-tile__value { + margin: 0; + font-size: var(--text-body); + color: var(--secondary-label); + font-variant-numeric: tabular-nums; +} +.app-tile__chevron { + color: var(--tertiary-label); + font-size: 17px; + line-height: 1; +} + +.app-chip { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 28px; + padding: 0 12px; + border: 0; + border-radius: var(--radius-capsule); + background: var(--system-gray5); + color: var(--label); + font-size: var(--text-subhead); + cursor: pointer; +} +.app-chip.is-on { + background: rgb(18 136 90 / 15%); + color: var(--accent); +} + +.app-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--radius-capsule); + background: var(--accent-soft); + color: var(--accent); + font-size: var(--text-subhead); + font-weight: 600; +} + +.app-progress__track { + height: 4px; + border-radius: var(--radius-capsule); + background: var(--system-gray5); + overflow: hidden; +} +.app-progress__bar { + display: block; + height: 100%; + background: var(--accent); + border-radius: inherit; +} +.app-progress__bar.is-warn { background: var(--system-orange); } +.app-progress__bar.is-danger { background: var(--system-red); } + +.app-spinner { + width: 20px; + height: 20px; + border: 2px solid var(--system-gray3); + border-top-color: var(--secondary-label); + border-radius: 50%; + animation: app-spin 700ms linear infinite; +} +@keyframes app-spin { to { transform: rotate(360deg); } } + +.app-skeleton { + display: block; + height: 12px; + border-radius: var(--radius-sm); + background: var(--system-gray5); +} + +.app-empty, +.app-error { + display: grid; + justify-items: center; + gap: var(--space-3); + padding: var(--space-7) var(--gutter); + text-align: center; + color: var(--secondary-label); +} + +.app-segmented { + display: flex; + padding: 2px; + border-radius: 9px; + background: var(--system-gray5); +} +.app-segmented__item { + flex: 1; + min-height: 32px; + border: 0; + border-radius: 7px; + background: transparent; + color: var(--label); + font-size: var(--text-subhead); + font-weight: 500; + cursor: pointer; +} +.app-segmented__item.is-on { + background: var(--grouped-surface); + box-shadow: 0 1px 3px rgb(0 0 0 / 12%); +} + +.app-toast { + position: fixed; + left: 50%; + bottom: 24px; + transform: translateX(-50%); + z-index: var(--z-toast); + display: flex; + align-items: center; + gap: var(--space-2); + min-height: 44px; + padding: 0 16px; + border-radius: var(--radius-capsule); + background: rgb(28 28 30 / 88%); + color: #fff; + font-size: var(--text-subhead); + backdrop-filter: blur(16px); +} + +@media (prefers-color-scheme: dark) { + .app-btn--tinted { background: rgb(60 214 140 / 18%); } +} diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/web/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/web/tsconfig.json b/web/tsconfig.json new file mode 100644 index 0000000..c351008 --- /dev/null +++ b/web/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json new file mode 100644 index 0000000..59e73c8 --- /dev/null +++ b/web/tsconfig.node.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "strict": true + }, + "include": ["vite.config.ts"] +} diff --git a/web/vite.config.ts b/web/vite.config.ts new file mode 100644 index 0000000..89507e3 --- /dev/null +++ b/web/vite.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; + +export default defineConfig({ + plugins: [react()], + server: { + port: 5173, + proxy: { + "/api": { target: "http://127.0.0.1:5088", changeOrigin: true }, + "/u": { target: "http://127.0.0.1:5088", changeOrigin: true } + } + }, + build: { + outDir: "dist", + emptyOutDir: true + } +});

Камера

Камера

Камера

Камера

+ {title} +

HTML

React + MapLibre

Результат

{name}

{section.heading}