@lad-sapienza/scms-core 0.1.0-alpha.2 → 0.1.0-alpha.4

package/README.md

@@ -29,9 +29,9 @@ export default defineConfig({
   integrations: [
     ...scms({
       // all optional, default to the paths below
-      contentDir: 'usr/content',
-      pagesDir: 'usr/pages',
-      galleriesDir: 'usr/galleries',
+      contentDir: 'src/content',
+      pagesDir: 'src/pages',
+      galleriesDir: 'src/galleries',
     }),
   ],
 });
@@ -65,16 +65,26 @@ import { directusLoader } from '@lad-sapienza/scms-core/integrations/directusLoa
 
 See each component folder's own `README.md` (`components/DataTb`, `components/Gallery`, `components/ZoteroGeoViewer`, `components/`) for detailed API docs and examples.
 
+## Creating a new site
+
+```bash
+npx --package=@lad-sapienza/scms-core scms-create my-site
+cd my-site
+npm run dev
+```
+
+Prompts for a title, description, author, and site URL, then scaffolds a minimal, ready-to-run Astro + s:CMS project (`src/content.config.ts`, `src/pages/index.astro`, `astro.config.mjs`, etc.) and runs `npm install`.
+
 ## Scaffolding CLI
 
-This package also ships the interactive scaffolding tools sCMS sites use to add content, as `bin` commands — run from the consuming site's project root:
+This package also ships the interactive scaffolding tools s:CMS sites use to add content, as `bin` commands — run from the consuming site's project root:
 
 ```bash
-npx scms-add-collection   # scaffold a new Astro content collection under usr/
+npx scms-add-collection   # scaffold a new Astro content collection under src/
 npx scms-add-content      # add a new content file to an existing collection
 ```
 
-A consuming site typically wires these up as `npm run add-collection` / `npm run add-content` in its own `package.json`.
+A consuming site typically wires these up as `npm run add-collection` / `npm run add-content` in its own `package.json` (this is what `scms-create` sets up automatically).
 
 ## Development
 

package/components/BSNavbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Menu, X, ChevronRight } from "lucide-react";
+import { useTranslation } from "./i18n";
 
 /**
  * A single navigation link entry.
@@ -100,7 +101,10 @@ interface BSNavbarProps {
 function isItemActive(item: MenuItem, currentPath: string): boolean {
   const target = item.match ?? item.href;
   if (target) {
-    const active = target === "/" ? currentPath === "/" : currentPath.startsWith(target);
+    // A target ending in "/" is an index page (e.g. "/" itself, or a
+    // locale-prefixed home like "/it/") — match it exactly, otherwise
+    // startsWith would make it "active" for every page beneath it too.
+    const active = target.endsWith("/") ? currentPath === target : currentPath.startsWith(target);
     if (active) return true;
   }
   return item.children?.some(child => isItemActive(child, currentPath)) ?? false;
@@ -159,11 +163,7 @@ const DropdownItem: React.FC<{ item: MenuItem; currentPath: string }> = ({ item,
       </button>
       {isOpen && (
         <ul
-          className="dropdown-menu show"
-          style={openLeft
-            ? { position: "absolute", right: "100%", left: "auto", top: 0, minWidth: "12rem" }
-            : { position: "absolute", left: "100%", top: 0, minWidth: "12rem" }
-          }
+          className={`dropdown-menu show scms-nested-dropdown${openLeft ? " scms-nested-dropdown--left" : ""}`}
         >
           {item.children!.map((child, i) => (
             <DropdownItem key={child.href ?? i} item={child} currentPath={currentPath} />
@@ -229,10 +229,44 @@ const NavItem: React.FC<{ item: MenuItem; currentPath: string; liClass?: string
 // BSNavbar — root component
 // ---------------------------------------------------------------------------
 const BSNavbar: React.FC<BSNavbarProps> = ({ menuItems, currentPath = "/", cssClasses = {}, brand }) => {
+  const t = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <nav className={`navbar navbar-expand-md ${cssClasses.nav ?? ""}`}>
+      {/*
+        Third-level (and deeper) dropdowns cascade sideways on desktop
+        (position: absolute; left/right: 100% — see DropdownItem below).
+        Below Bootstrap's md breakpoint the navbar collapses into a
+        single narrow column (navbar-expand-md), and a sideways flyout
+        has nowhere to go but off the edge of the screen — unreachable,
+        not just visually broken. Below md, this flips the same markup
+        to flow inline instead, indented to show the hierarchy.
+      */}
+      <style>{`
+        @media (max-width: 767.98px) {
+          .scms-nested-dropdown {
+            position: static !important;
+            width: 100% !important;
+            min-width: 0 !important;
+            box-shadow: none !important;
+            border: none !important;
+            padding-left: 1rem;
+          }
+        }
+        @media (min-width: 768px) {
+          .scms-nested-dropdown {
+            position: absolute;
+            left: 100%;
+            top: 0;
+            min-width: 12rem;
+          }
+          .scms-nested-dropdown.scms-nested-dropdown--left {
+            left: auto;
+            right: 100%;
+          }
+        }
+      `}</style>
       <div className="container">
         {brand && (
           <a className={`navbar-brand ${brand.cssClasses ?? ""}`} href={brand.link}>
@@ -245,9 +279,9 @@ const BSNavbar: React.FC<BSNavbarProps> = ({ menuItems, currentPath = "/", cssCl
           onClick={() => setIsOpen(prev => !prev)}
           aria-controls="navbarCollapse"
           aria-expanded={isOpen}
-          aria-label="Toggle navigation"
+          aria-label={t('navbar.toggleNavigation')}
         >
-          {isOpen ? <X size={24} className="text-dark" /> : <Menu size={24} className="text-dark" />}
+          {isOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
         <div className={`collapse navbar-collapse${isOpen ? " show" : ""}`} id="navbarCollapse">
           <ul className={`navbar-nav ${cssClasses.ul ?? ""}`}>

package/components/DataTb/DataTb.astro

@@ -17,7 +17,7 @@
  * headless data-loaders (they render nothing; they call onDataLoad/onLoadingChange/
  * onError) for building a fully custom table UI — they are not children of
  * <DataTb>, which has no children/composition API. See the "Headless Source
- * Components" section of usr/content/docs/components/datatb.mdx.
+ * Components" section of DataTb/README.md.
  */
 
 // Re-export for convenience. `DataTb` itself is deliberately not re-exported

package/components/DataTb/DataTb.tsx

@@ -17,6 +17,7 @@ import {
   type ColumnFiltersState,
 } from '@tanstack/react-table';
 import { fetchData } from '../../utils/data-fetcher';
+import { useTranslation } from '../i18n';
 import type { DataRow, DataTbProps } from './types';
 import {
   autoDetectColumns,
@@ -33,13 +34,18 @@ export function DataTb({
   initialSort,
   className = '',
   source,
-  loadingMessage = 'Loading data...',
-  emptyMessage = 'No data available',
-  errorMessage = 'Error loading data',
+  loadingMessage,
+  emptyMessage,
+  errorMessage,
   truncateContent = true,
   truncateMaxWidth = '20rem',
   contentSize = 'sm',
 }: DataTbProps) {
+  const t = useTranslation();
+  const resolvedLoadingMessage = loadingMessage ?? t('dataTb.loading');
+  const resolvedEmptyMessage = emptyMessage ?? t('dataTb.empty');
+  const resolvedErrorMessage = errorMessage ?? t('dataTb.error');
+
   const [data, setData] = useState<DataRow[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
@@ -148,7 +154,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-loading p-4 text-center text-secondary">
-          {loadingMessage}
+          {resolvedLoadingMessage}
         </div>
       </div>
     );
@@ -159,7 +165,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-error p-4 text-center text-danger">
-          {errorMessage}: {error.message}
+          {resolvedErrorMessage}: {error.message}
         </div>
       </div>
     );
@@ -170,7 +176,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-empty p-4 text-center text-secondary">
-          {emptyMessage}
+          {resolvedEmptyMessage}
         </div>
       </div>
     );
@@ -178,6 +184,12 @@ export function DataTb({
 
   return (
     <div className={`datatb-container ${className}`}>
+      <style>{`
+        .datatb-thead {
+          --bs-table-bg: var(--bs-tertiary-bg);
+          --bs-table-color: var(--bs-emphasis-color);
+        }
+      `}</style>
 
       {/* Search input */}
       {searchable && (
@@ -186,7 +198,7 @@ export function DataTb({
             type="text"
             value={globalFilter ?? ''}
             onChange={(e) => setGlobalFilter(e.target.value)}
-            placeholder="Search..."
+            placeholder={t('dataTb.searchPlaceholder')}
             className="form-control form-control-sm"
             style={{ maxWidth: '24rem' }}
           />
@@ -196,7 +208,7 @@ export function DataTb({
       {/* Table */}
       <div className="datatb-table-wrapper table-responsive border rounded shadow-sm">
         <table className="datatb-table table table-sm table-hover mb-0">
-          <thead className="table-light">
+          <thead className="datatb-thead">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header, index) => (
@@ -309,7 +321,10 @@ export function DataTb({
 
           <div className="d-flex align-items-center gap-2 flex-nowrap">
             <span className="small text-secondary text-nowrap">
-              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+              {t('dataTb.paginationSummary', {
+                page: table.getState().pagination.pageIndex + 1,
+                totalPages: table.getPageCount(),
+              })}
             </span>
 
             {paginationConfig.showPageSize !== false && (
@@ -330,7 +345,7 @@ export function DataTb({
             )}
 
             <span className="small text-secondary text-nowrap">
-              ({data.length} total)
+              {t('dataTb.rowsTotal', { count: data.length })}
             </span>
           </div>
         </div>

package/components/DataTb/README.md

@@ -11,7 +11,7 @@ A powerful, flexible data table component for Astro with support for multiple da
 - 🎨 **Auto-detection**: Automatically detects columns from data
 - ⚙️ **Customizable**: Override columns, formatting, and rendering
 - 🎯 **TypeScript**: Full type safety
-- 💅 **Bootstrap Styled**: Uses the same Bootstrap 5 classes as the rest of s:CMS, themeable via `usr/styles/global.css`
+- 💅 **Bootstrap Styled**: Uses the same Bootstrap 5 classes as the rest of s:CMS, themeable via your site's `src/styles/global.css`
 
 ## Basic Usage
 
@@ -272,4 +272,4 @@ Data fetching is handled internally based on the `source`/`csv`/`json`/`api`/`di
 
 ## Examples
 
-See the [DataTb docs page](../../../usr/content/docs/components/datatb.mdx) (rendered at `/docs/components/datatb` on a running site) for live, interactive examples of every prop and source type.
+See the [DataTb docs page](https://scms.lad-sapienza.it/docs/components/datatb) on the s:CMS demo site for live, interactive examples of every prop and source type.

package/components/Gallery/Gallery.astro

@@ -7,7 +7,7 @@
  * for how auto-loading works without each caller needing its own glob).
  *
  * <Gallery />                     colocated: ./gallery/ next to this page/content file
- * <Gallery name="scavi-2024" />   shared: usr/galleries/scavi-2024/
+ * <Gallery name="scavi-2024" />   shared: src/galleries/scavi-2024/
  * <Gallery images={[...]} />      explicit: pass images directly (remote, custom order, ...)
  */
 import { Gallery as GalleryClient } from './Gallery';

package/components/Gallery/Gallery.tsx

@@ -7,6 +7,7 @@
 
 import { Gallery as PhotoSwipeGallery, Item } from 'react-photoswipe-gallery';
 import type { GalleryImage } from './types';
+import { useTranslation } from '../i18n';
 import 'photoswipe/dist/photoswipe.css';
 
 interface Props {
@@ -43,6 +44,8 @@ export function Gallery({
   columns = { min: 200, max: 1 },
   className = '',
 }: Props) {
+  const t = useTranslation();
+
   if (images.length === 0) {
     return null;
   }
@@ -112,7 +115,7 @@ export function Gallery({
                   tabIndex={0}
                   style={{ cursor: 'pointer', overflow: 'hidden', borderRadius: '4px' }}
                   data-caption={image.caption || image.alt}
-                  aria-label={`Open image: ${image.alt}`}
+                  aria-label={t('gallery.openImage', { alt: image.alt })}
                 >
                   <img
                     src={image.thumb}

package/components/Gallery/README.md

@@ -7,7 +7,7 @@ A responsive image gallery component with PhotoSwipe lightbox integration. One c
 - 📸 **PhotoSwipe Lightbox**: Full-screen image viewing with zoom and navigation
 - 🎨 **Responsive Grid**: Auto-adjusting columns based on screen size
 - 🔄 **Auto-loading**: automatically discovers images in a `gallery/` folder colocated with the current page/content file
-- 🔗 **Shared galleries**: reference one set of images by name from `usr/galleries/<name>/`
+- 🔗 **Shared galleries**: reference one set of images by name from `src/galleries/<name>/`
 - 🔍 **Custom Captions**: via `captions.json`, or auto-generated from filenames
 - ⌨️ **Keyboard Navigation**: Arrow keys and ESC support
 - ♿ **Accessible**: Proper ARIA labels and keyboard support
@@ -30,7 +30,7 @@ details, and `core/components/Gallery/galleryUtils.ts` for the matching logic.
 ### Colocated (default) — auto-loads from a sibling `gallery/` folder
 
 ```
-usr/content/blog/my-post/
+src/content/blog/my-post/
   index.mdx
   gallery/
     photo1.jpg
@@ -53,7 +53,7 @@ nothing. Use `name` (below) or `images` as a workaround in that case.
 ### Shared — referenced by name from any page
 
 ```
-usr/galleries/
+src/galleries/
   scavi-2024/
     photo1.jpg
     photo2.jpg
@@ -98,7 +98,7 @@ the build.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `name` | `string` | — | Load a shared gallery from `usr/galleries/<name>/` |
+| `name` | `string` | — | Load a shared gallery from `src/galleries/<name>/` |
 | `images` | `GalleryImage[]` | — | Explicit images — takes precedence over `name` and auto-loading |
 | `reverseSorting` | `boolean` | `false` | Reverse the default alphabetical sort |
 | `columns` | `{ min?: number, max?: number }` | `{ min: 200, max: 1 }` | `min` = minimum item width in px; `max` = maximum column count |

package/components/Gallery/__tests__/galleryUtils.test.ts

@@ -7,6 +7,7 @@ const manifest = {
   contentImages: {
     '/src/content/blog/my-article/gallery/photo2.jpg': { default: { src: '/_astro/photo2.def456.jpg', width: 1000, height: 600 } },
     '/src/content/blog/other-article/gallery/photo3.jpg': { default: { src: '/_astro/photo3.ghi789.jpg', width: 900, height: 500 } },
+    '/src/content/blog/en/localized-article/gallery/photo4.jpg': { default: { src: '/_astro/photo4.stu333.jpg', width: 700, height: 400 } },
   },
   sharedImages: {
     '/src/galleries/scavi-2024/site-a.jpg': { default: { src: '/_astro/site-a.jkl000.jpg', width: 800, height: 600 } },
@@ -56,6 +57,26 @@ describe('getColocatedGalleryImages', () => {
     expect(images[0].src).toBe('/_astro/photo2.def456.jpg');
   });
 
+  it('matches a locale-prefixed URL against a content tree with locale nested inside the collection folder', () => {
+    // On disk: /content/blog/en/localized-article/gallery/... (locale nested
+    // inside the collection). URL for a [locale] dynamic route puts the
+    // locale first instead: /en/blog/localized-article. Same segments,
+    // different order — see `matchesColocatedPath` in galleryUtils.ts.
+    const images = getColocatedGalleryImages('/en/blog/localized-article');
+    expect(images).toHaveLength(1);
+    expect(images[0].src).toBe('/_astro/photo4.stu333.jpg');
+  });
+
+  it('matches even when the URL locale differs from the content locale (missing-translation fallback)', () => {
+    // A site falling back to default-locale content for a missing
+    // translation renders the "en" entry under another locale's URL, e.g.
+    // "/it/blog/localized-article" — the locale segment differs in value,
+    // not just position, between the URL and the on-disk content path.
+    const images = getColocatedGalleryImages('/it/blog/localized-article');
+    expect(images).toHaveLength(1);
+    expect(images[0].src).toBe('/_astro/photo4.stu333.jpg');
+  });
+
   it('handles a trailing slash the same as without one', () => {
     const withSlash = getColocatedGalleryImages('/blog/my-article/');
     const withoutSlash = getColocatedGalleryImages('/blog/my-article');

package/components/Gallery/galleryUtils.ts

@@ -127,12 +127,48 @@ const normalizePath = (pathname: string): string => pathname.replace(/\/$/, '');
 const COLOCATED_GALLERY_PATTERN = /\/(pages|content)(.+)\/gallery\//;
 const SHARED_GALLERY_PATTERN = /\/galleries\/([^/]+)\//;
 
+/**
+ * Matches a URL path against a colocated asset's captured content path,
+ * tolerating locale-prefixed routing (`src/pages/[locale]/...`) on top of
+ * the exact match every non-i18n site already relies on.
+ *
+ * Tried only when the exact match fails, so plain (non-i18n) sites are
+ * completely unaffected. Two things can differ once a `[locale]` layer is
+ * involved:
+ *
+ * 1. Position — the URL puts the locale first ("/it/blog/foo"), but a
+ *    locale-per-directory content tree nests it one level inside the
+ *    collection folder instead ("/blog/it/foo", from
+ *    `src/content/blog/it/foo/gallery/*`).
+ * 2. Value — when a translation is missing and the site falls back to
+ *    rendering the default-locale entry under another locale's URL (e.g.
+ *    "/it/blog/foo" rendering the "en" content, whose images physically
+ *    live under ".../blog/en/foo/gallery/"), the locale segment itself
+ *    differs between the two paths, not just its position.
+ *
+ * Both are handled by dropping the assumed locale segment from each side —
+ * position 0 on the URL, position 1 on the content path (right after the
+ * collection name) — and comparing what's left: the actual content-identifying
+ * segments, locale-independent.
+ */
+function matchesColocatedPath(urlPath: string, contentCapturedPath: string): boolean {
+  if (urlPath === contentCapturedPath) return true;
+
+  const urlSegments = urlPath.split('/').filter(Boolean);
+  const contentSegments = contentCapturedPath.split('/').filter(Boolean);
+  if (urlSegments.length < 1 || contentSegments.length < 2) return false;
+
+  const urlRest = urlSegments.slice(1).join('/');
+  const contentRest = [contentSegments[0], ...contentSegments.slice(2)].join('/');
+  return urlRest === contentRest;
+}
+
 export function getColocatedCaptions(pathname: string): Record<string, string> | undefined {
   const normalized = normalizePath(pathname);
   const allCaptions = { ...manifest.pagesCaptions, ...manifest.contentCaptions };
   const entry = Object.entries(allCaptions).find(([filepath]) => {
     const match = filepath.match(COLOCATED_GALLERY_PATTERN);
-    return !!match && normalized === match[2];
+    return !!match && matchesColocatedPath(normalized, match[2]);
   });
   if (!entry) return undefined;
   const [filepath, mod] = entry;
@@ -158,7 +194,8 @@ export function getSharedCaptions(name: string): Record<string, string> | undefi
  * Known limitation (unchanged from before this redesign): if a content
  * collection entry overrides its slug, or the site has a non-root `base`,
  * the URL path diverges from the on-disk folder path and matching silently
- * finds nothing.
+ * finds nothing. Locale-prefixed routing (`/it/blog/foo` vs. an on-disk
+ * `blog/it/foo`) is handled — see `matchesColocatedPath` above.
  */
 export function getColocatedGalleryImages(pathname: string): GalleryImage[] {
   const normalized = normalizePath(pathname);
@@ -168,7 +205,7 @@ export function getColocatedGalleryImages(pathname: string): GalleryImage[] {
   return Object.entries(allImages)
     .filter(([filepath]) => {
       const match = filepath.match(COLOCATED_GALLERY_PATTERN);
-      return !!match && normalized === match[2];
+      return !!match && matchesColocatedPath(normalized, match[2]);
     })
     .map(([filepath, mod]) => moduleToGalleryImage(filepath, mod, captionLookup));
 }

package/components/LocaleSwitcher.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Globe } from "lucide-react";
+
+/** Optional CSS class override for the switcher button. */
+interface LocaleSwitcherProps {
+  /** Every locale code the site routes (e.g. `["en", "it"]`). */
+  locales: string[];
+  /** The locale code for the page this component is rendered on. */
+  currentLocale: string;
+  /** Display name per locale code (e.g. `{ en: "English", it: "Italiano" }`). Falls back to the raw code when omitted. */
+  labels?: Record<string, string>;
+  /** Additional CSS classes applied to the trigger button. */
+  className?: string;
+}
+
+/**
+ * Floating language switcher for sites using a `src/pages/[locale]/...`
+ * routing layer. Navigates to the same path with only the leading locale
+ * segment swapped — relies on every locale having a page at that path (a
+ * missing translation still resolves, rendered with default-locale content,
+ * rather than 404ing — see the site's own content-fallback logic), so no
+ * per-page URL mapping is needed here.
+ *
+ * Purely a navigation mechanism: it does not know or care how translations
+ * are organized, only that swapping the URL's first path segment is enough.
+ *
+ * Must be hydrated with `client:load`.
+ *
+ * @example
+ * ```astro
+ * <LocaleSwitcher
+ *   client:load
+ *   locales={["en", "it"]}
+ *   currentLocale={locale}
+ *   labels={{ en: "English", it: "Italiano" }}
+ * />
+ * ```
+ */
+const LocaleSwitcher: React.FC<LocaleSwitcherProps> = ({ locales, currentLocale, labels = {}, className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [isOpen]);
+
+  const go = (locale: string) => {
+    if (locale === currentLocale) {
+      setIsOpen(false);
+      return;
+    }
+    const { pathname, search, hash } = window.location;
+    const rest = pathname.replace(new RegExp(`^/${currentLocale}(/|$)`), "/");
+    window.location.href = `/${locale}${rest}${search}${hash}`;
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{ position: "fixed", bottom: "1.25rem", left: "1.25rem", zIndex: 1040 }}
+    >
+      <button
+        type="button"
+        onClick={() => setIsOpen(p => !p)}
+        aria-label={`Language: ${labels[currentLocale] ?? currentLocale}. Click to change.`}
+        aria-expanded={isOpen}
+        style={{
+          width: "2.75rem",
+          height: "2.75rem",
+          borderRadius: "50%",
+          border: "1px solid var(--bs-border-color)",
+          background: "var(--bs-body-bg)",
+          color: "var(--bs-body-color)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+          cursor: "pointer",
+        }}
+      >
+        <Globe size={18} />
+      </button>
+      {isOpen && (
+        <ul
+          style={{
+            position: "absolute",
+            bottom: "calc(100% + 0.5rem)",
+            left: 0,
+            margin: 0,
+            padding: "0.35rem",
+            listStyle: "none",
+            minWidth: "8rem",
+            borderRadius: "0.5rem",
+            border: "1px solid var(--bs-border-color)",
+            background: "var(--bs-body-bg)",
+            boxShadow: "0 4px 16px rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          {locales.map(locale => (
+            <li key={locale}>
+              <button
+                type="button"
+                onClick={() => go(locale)}
+                style={{
+                  width: "100%",
+                  textAlign: "left",
+                  background: locale === currentLocale ? "var(--bs-tertiary-bg)" : "transparent",
+                  color: "var(--bs-body-color)",
+                  border: "none",
+                  borderRadius: "0.375rem",
+                  padding: "0.5rem 0.75rem",
+                  fontWeight: locale === currentLocale ? 600 : 400,
+                  cursor: "pointer",
+                }}
+              >
+                {labels[locale] ?? locale}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default LocaleSwitcher;

package/components/Map/LayerControl.tsx

@@ -5,6 +5,7 @@ import { Layers, Search, X } from 'lucide-react';
 import type { IControl } from 'maplibre-gl';
 import type { BaseLayerConfig, VectorLayerConfig, ControlPosition, SearchInFields, SearchQuery } from './types';
 import { SearchUI } from './Search';
+import { useTranslation } from '../i18n';
 
 export interface LayerControlProps {
   baseLayers?: BaseLayerConfig[];
@@ -29,6 +30,7 @@ function LayerControlUI({
   onLayerSearch,
   layerSearchQueries = {},
 }: Omit<LayerControlProps, 'position'>) {
+  const t = useTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
   const [searchModal, setSearchModal] = useState<{isOpen: boolean, layerId: string, layerName: string, fieldList: SearchInFields, currentQuery?: SearchQuery} | null>(null);
   const radioGroupId = React.useId();
@@ -173,7 +175,7 @@ function LayerControlUI({
                       className={`btn btn-sm p-1 lh-1 border-0 ${
                         layerSearchQueries[layer.id]?.filters?.length ? 'btn-primary' : 'btn-light'
                       }`}
-                      title={`Search ${layer.name}${layerSearchQueries[layer.id]?.filters?.length ? ' (Active)' : ''}`}
+                      title={`${t('map.searchLayer', { name: layer.name })}${layerSearchQueries[layer.id]?.filters?.length ? ` ${t('map.active')}` : ''}`}
                     >
                       <Search size={14} />
                     </button>
@@ -188,7 +190,7 @@ function LayerControlUI({
           {baseLayers.length > 0 && (
             <div>
               <div style={{ fontSize: '11px', color: '#666', fontWeight: 600, marginBottom: 4, textTransform: 'uppercase' }}>
-                Base Maps
+                {t('map.baseMaps')}
               </div>
               {baseLayers.map((layer, index) => {
                 const isChecked = index === activeBaseLayer;
@@ -242,19 +244,19 @@ function LayerControlUI({
           onClick={handleSearchClose}
         >
           <div
-            className="bg-white rounded shadow"
-            style={{ maxHeight: 'calc(100vh - 4rem)', width: '500px', maxWidth: '90vw', margin: '2rem 1rem' }}
+            className="rounded shadow"
+            style={{ backgroundColor: 'var(--bs-tertiary-bg)', maxHeight: 'calc(100vh - 4rem)', width: '500px', maxWidth: '90vw', margin: '2rem 1rem' }}
             onClick={(e) => e.stopPropagation()}
           >
             <div className="d-flex justify-content-between align-items-center p-3 border-bottom">
               <h3 className="h5 fw-semibold mb-0 d-flex align-items-center gap-2 flex-grow-1 pe-2">
                 <Search size={18} />
-                Search {searchModal.layerName}
+                {t('map.searchLayer', { name: searchModal.layerName })}
               </h3>
               <button
                 onClick={handleSearchClose}
                 className="btn btn-sm btn-light flex-shrink-0"
-                aria-label="Close modal"
+                aria-label={t('map.closeModal')}
               >
                 <X size={18} />
               </button>

package/components/Map/Map.tsx

@@ -18,6 +18,7 @@ import type { BaseLayerConfig } from './types';
 import { defaultBasemaps, getBasemap } from './defaultBasemaps';
 import { fetchData } from '../../utils/data-fetcher';
 import { dataToGeoJson, parseStringTemplate, filterObjectToPredicate, searchQueryToMapLibreFilter, searchQueryToPredicate } from './utils';
+import { useTranslation } from '../i18n';
 import type { FeatureCollection } from 'geojson';
 import type { CircleLayerSpecification } from 'maplibre-gl';
 import type { SearchQuery } from './types';
@@ -42,6 +43,7 @@ export function Map({
   json,
   directus,
 }: MapProps) {
+  const t = useTranslation();
   const [lng, lat, zoom] = center.split(',').map(Number);
   const [activeBaseLayer, setActiveBaseLayer] = useState<number>(0);
   const [layersData, setLayersData] = useState<Record<string, FeatureCollection>>({});
@@ -242,7 +244,7 @@ export function Map({
     }
     
     if (implicitSource) {
-      let layerName = 'Default Layer';
+      let layerName = t('map.defaultLayerName');
       const layerConfig: any = {
         name: layerName,
         source: implicitSource,