layers-select-control 0.1.0

package/README.md

@@ -0,0 +1,107 @@
+# LayersSelectControl
+
+A high-performance React component for selecting layers, inspired by the **Google Maps** layer switcher. It provides a sleek, collapsed preview that expands into a scrollable panel with high-definition thumbnails and descriptions.
+
+## Features
+
+* **Google Maps UI:** Seamlessly transitions between a collapsed thumbnail and an expanded list.
+* **Intelligent Image Loading:** The `ManagedImage` system handles HD transitions and fallbacks without UI flickering.
+* **Interactive Scrolling:** Automatically provides navigation arrows for horizontal scrolling when items exceed `maxVisible`.
+* **Theming & Sizing:** Built-in `dark` and `light` themes with three size presets (`small`, `medium`, `large`).
+* **Adaptive Positioning:** Easily anchor the control to any corner of its parent container.
+* **Mobile Optimized:** Includes touch-start detection and pointer-event handling for mobile maps.
+
+## Installation
+
+```bash
+# Using npm
+npm install layers-select-control
+
+# Using yarn
+yarn add layers-select-control
+
+```
+
+## Props
+
+The component is highly configurable to fit different map layouts and branding requirements.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `LayerItem[]` | **Required** | Array of items to display in the panel. |
+| `onSelect` | `(item: LayerItem) => void` | **Required** | Callback triggered when a layer is selected. |
+| `onDefault` | `(item?: LayerItem) => void` | **Required** | Callback for the "Default" tile click. |
+| `value` | `string` | - | **Controlled mode**: The ID of the currently selected item. |
+| `defaultValue` | `string` | - | **Uncontrolled mode**: The initial ID to be selected. |
+| `defaultItem` | `LayerItem` | - | Optional item that appears as the "Default" tile. |
+| `size` | `"small" | "medium" | "large"` | `"small"` | Adjusts dimensions of the control and tiles. |
+| `theme` | `"dark" | "light"` | `"dark"` | Built-in color scheme. |
+| `maxVisible` | `number` | `4` | Number of items visible before enabling horizontal scroll. |
+| `x`, `y` | `number` | `8`, `32` | Numerical offset from the anchor point. |
+| `xRel` | `"left" | "right"` | `"left"` | Horizontal anchor (relative to parent). |
+| `yRel` | `"top" | "bottom"` | `"bottom"` | Vertical anchor (relative to parent). |
+| `onMore` | `() => void` | - | If provided, a "More..." tile is appended to the list. |
+| `hoverCloseDelayMs` | `number` | `160` | Delay before closing the panel on `mouseleave`. |
+| `panelGap` | `number` | `8` | Space between the collapsed thumb and the panel. |
+| `parentGap` | `number` | `8` | Margin maintained between the panel and the parent edge. |
+
+## Data Interfaces
+
+### LayerItem
+
+```ts
+export interface LayerItem {
+    id: string;
+    title: string;
+    description?: string;
+    thumbnail?: string;     // Standard thumbnail
+    thumbnailHd?: string;   // High-quality version loaded when expanded
+}
+
+```
+
+## Usage Example
+
+```tsx
+import React from "react";
+import { LayersSelectControl, LayerItem } from "layers-select-control";
+
+const LAYERS: LayerItem[] = [
+  { 
+    id: "satellite", 
+    title: "Satellite", 
+    description: "Global imagery",
+    thumbnail: "/thumbs/sat.jpg", 
+    thumbnailHd: "/thumbs/sat-hd.jpg" 
+  },
+  { id: "terrain", title: "Terrain", description: "Topographic maps", thumbnail: "/thumbs/terrain.jpg" },
+  { id: "streets", title: "Streets", description: "Urban navigation", thumbnail: "/thumbs/streets.jpg" },
+];
+
+export const App = () => {
+  return (
+    <div style={{ position: "relative", width: "100%", height: "500px", background: "#eee" }}>
+      <LayersSelectControl
+        items={LAYERS}
+        size="medium"
+        theme="light"
+        onSelect={(item) => console.log("Selected:", item.title)}
+        onDefault={() => console.log("Reset to default")}
+        onMore={() => alert("Open full catalog")}
+      />
+    </div>
+  );
+};
+
+```
+
+## Styling & Theme
+
+The component uses scoped CSS injected via a `<style>` tag, ensuring no styles leak out to the rest of your application. It supports:
+
+* **Automatic Overflow:** Handles parent container width constraints using `ResizeObserver`.
+* **Responsive Scaling:** Sizes automatically adjust based on the `size` prop.
+
+## License
+
+MIT © [Felipe Carrillo](https://github.com/felipecarrillo100)

package/dist/LayersSelectControl.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export interface LayerItem {
+    id: string;
+    title: string;
+    description?: string;
+    thumbnail?: string;
+    thumbnailHd?: string;
+}
+interface Props {
+    value?: string;
+    defaultValue?: string;
+    defaultItem?: LayerItem;
+    items: LayerItem[];
+    x?: number;
+    y?: number;
+    xRel?: "left" | "right";
+    yRel?: "top" | "bottom";
+    onDefault: (item?: LayerItem) => void;
+    onSelect: (item: LayerItem) => void;
+    onMore?: () => void;
+    maxVisible?: number;
+    hoverCloseDelayMs?: number;
+    theme?: "dark" | "light";
+    defaultThumb?: string;
+    noImageThumb?: string;
+    moreThumb?: string;
+    size?: "small" | "medium" | "large";
+    panelGap?: number;
+    parentGap?: number;
+}
+export declare const LayersSelectControl: React.FC<Props>;
+export {};
+//# sourceMappingURL=LayersSelectControl.d.ts.map

package/dist/LayersSelectControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayersSelectControl.d.ts","sourceRoot":"","sources":["../src/LayersSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,SAAS,EAAE,CAAC;IAEnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAExB,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAiED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuP/C,CAAC"}

package/dist/LayersSelectControl.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayersSelectControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DEFAULT_RESET_IMAGE_URL = "./firstplace.svg";
+const DEFAULT_NO_IMAGE_URL = "./noimage.png";
+const DEFAULT_IMAGE_MORE = "./more-images.png";
+const DEFAULT_MAX_VISIBLE = 4;
+const SIZE_CONFIG = {
+    small: { collapsed: 64, thumb: 56, tileWidth: 84, tileThumb: 72 },
+    medium: { collapsed: 88, thumb: 76, tileWidth: 108, tileThumb: 96 },
+    large: { collapsed: 112, thumb: 96, tileWidth: 140, tileThumb: 120 },
+};
+// ------------------------------------------------------
+// ManagedImage (UNCHANGED)
+// ------------------------------------------------------
+function ManagedImage({ candidates, initial, alt, className, expanded, noImageThumb, }) {
+    const [finalSrc, setFinalSrc] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setFinalSrc(null);
+        const urls = expanded ? candidates : [(_a = initial !== null && initial !== void 0 ? initial : candidates[0]) !== null && _a !== void 0 ? _a : noImageThumb];
+        let cancelled = false;
+        const loadNext = (idx) => {
+            if (idx >= urls.length) {
+                if (!cancelled)
+                    setFinalSrc(noImageThumb);
+                return;
+            }
+            const img = new Image();
+            img.onload = () => !cancelled && setFinalSrc(urls[idx]);
+            img.onerror = () => !cancelled && loadNext(idx + 1);
+            img.src = urls[idx];
+        };
+        loadNext(0);
+        return () => {
+            cancelled = true;
+        };
+    }, [expanded, initial, candidates, noImageThumb]);
+    if (!finalSrc) {
+        return (0, jsx_runtime_1.jsx)("div", { className: className });
+    }
+    return (0, jsx_runtime_1.jsx)("img", { src: finalSrc, alt: alt, className: className, draggable: false });
+}
+// ------------------------------------------------------
+// COMPONENT (LOGIC 100% PRESERVED)
+// ------------------------------------------------------
+const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel = "left", yRel = "bottom", defaultItem, onSelect, onMore, onDefault, maxVisible = DEFAULT_MAX_VISIBLE, hoverCloseDelayMs = 160, theme = "dark", defaultThumb = DEFAULT_RESET_IMAGE_URL, noImageThumb = DEFAULT_NO_IMAGE_URL, moreThumb = DEFAULT_IMAGE_MORE, size = "small", panelGap = 8, parentGap = 8, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const selectedId = isControlled ? value : internalValue;
+    const setSelectedId = (id) => {
+        if (!isControlled)
+            setInternalValue(id);
+    };
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const [isTouch, setIsTouch] = (0, react_1.useState)(false);
+    const [parentWidth, setParentWidth] = (0, react_1.useState)(null);
+    const [canScrollLeft, setCanScrollLeft] = (0, react_1.useState)(false);
+    const [canScrollRight, setCanScrollRight] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const scrollRef = (0, react_1.useRef)(null);
+    const hoverTimer = (0, react_1.useRef)(null);
+    const cfg = SIZE_CONFIG[size];
+    (0, react_1.useEffect)(() => {
+        setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!expanded)
+            return;
+        const onPointer = (ev) => {
+            if (rootRef.current && ev.target instanceof Node && !rootRef.current.contains(ev.target)) {
+                setExpanded(false);
+            }
+        };
+        document.addEventListener("pointerdown", onPointer, { capture: true });
+        return () => document.removeEventListener("pointerdown", onPointer, { capture: true });
+    }, [expanded]);
+    (0, react_1.useEffect)(() => {
+        if (!rootRef.current)
+            return;
+        const parent = rootRef.current.parentElement;
+        if (!parent)
+            return;
+        const updateWidth = () => setParentWidth(parent.clientWidth);
+        updateWidth();
+        const ro = new ResizeObserver(updateWidth);
+        ro.observe(parent);
+        return () => ro.disconnect();
+    }, []);
+    const expandToRight = xRel === "left";
+    const collapsedThumb = (0, react_1.useCallback)((it) => { var _a; return (_a = it === null || it === void 0 ? void 0 : it.thumbnail) !== null && _a !== void 0 ? _a : noImageThumb; }, [noImageThumb]);
+    const expandedCandidates = (0, react_1.useCallback)((it) => [
+        ...((it === null || it === void 0 ? void 0 : it.thumbnailHd) ? [it.thumbnailHd] : []),
+        ...((it === null || it === void 0 ? void 0 : it.thumbnail) ? [it.thumbnail] : []),
+        noImageThumb,
+    ], [noImageThumb]);
+    const selectedItem = (0, react_1.useMemo)(() => {
+        if (defaultItem && selectedId === defaultItem.id)
+            return defaultItem;
+        return items.find((x) => x.id === selectedId);
+    }, [items, selectedId, defaultItem]);
+    const updateArrows = (0, react_1.useCallback)(() => {
+        if (!scrollRef.current)
+            return;
+        const s = scrollRef.current;
+        setCanScrollLeft(s.scrollLeft > 0);
+        setCanScrollRight(s.scrollLeft + s.clientWidth < s.scrollWidth - 1);
+    }, []);
+    const scrollBy = (dir) => {
+        var _a;
+        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: dir * 120, behavior: "smooth" });
+    };
+    (0, react_1.useEffect)(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        updateArrows();
+        el.addEventListener("scroll", updateArrows);
+        const ro = new ResizeObserver(updateArrows);
+        ro.observe(el);
+        window.addEventListener("resize", updateArrows);
+        return () => {
+            el.removeEventListener("scroll", updateArrows);
+            ro.disconnect();
+            window.removeEventListener("resize", updateArrows);
+        };
+    }, [updateArrows]);
+    const visibleItems = (0, react_1.useMemo)(() => {
+        if (!maxVisible || items.length <= maxVisible)
+            return items;
+        return items.slice(0, maxVisible);
+    }, [items, maxVisible]);
+    const showMore = Boolean(onMore && items.length > (maxVisible || 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: `lsc-root ${theme === "light" ? "lsc-light" : ""}`, style: {
+            position: "absolute",
+            [xRel]: `${x}px`,
+            [yRel]: `${y}px`,
+            "--lsc-collapsed": `${cfg.collapsed}px`,
+            "--lsc-thumb": `${cfg.thumb}px`,
+            "--lsc-tile-width": `${cfg.tileWidth}px`,
+            "--lsc-tile-thumb": `${cfg.tileThumb}px`,
+            "--lsc-panel-gap": `${panelGap}px`,
+            "--lsc-parent-gap": `${parentGap}px`,
+        }, onMouseEnter: () => {
+            if (isTouch)
+                return;
+            if (hoverTimer.current)
+                clearTimeout(hoverTimer.current);
+            setExpanded(true);
+        }, onMouseLeave: () => {
+            if (isTouch)
+                return;
+            if (hoverTimer.current)
+                clearTimeout(hoverTimer.current);
+            hoverTimer.current = window.setTimeout(() => setExpanded(false), hoverCloseDelayMs);
+        }, children: [(0, jsx_runtime_1.jsx)("div", { className: "lsc-collapsed", onClick: () => setExpanded((s) => !s), children: (0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [collapsedThumb(selectedItem)], initial: collapsedThumb(selectedItem), expanded: false, className: "lsc-thumb", noImageThumb: noImageThumb }) }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-panel-wrap", style: {
+                    left: expandToRight ? `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))` : undefined,
+                    right: expandToRight ? undefined : `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))`,
+                    maxWidth: parentWidth
+                        ? `${parentWidth - (x + cfg.collapsed) - panelGap - parentGap}px`
+                        : undefined,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: `lsc-panel ${expanded ? "is-open" : ""}`, children: [defaultItem && ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
+                                setSelectedId(defaultItem.id);
+                                onDefault(defaultItem);
+                                setExpanded(false);
+                            }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [defaultThumb], initial: defaultThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: "Default" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: "Initial Content" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "lsc-scroll-wrap", children: [canScrollLeft && ((0, jsx_runtime_1.jsx)("div", { className: "lsc-arrow lsc-arrow-left", onClick: () => scrollBy(-1), children: "\u276E" })), (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles-wrap", ref: scrollRef, children: (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles", children: visibleItems.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
+                                                setSelectedId(item.id);
+                                                onSelect(item);
+                                                setTimeout(() => setExpanded(false), 10);
+                                            }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: expandedCandidates(item), initial: collapsedThumb(item), expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: item.title }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: item.description })] }, item.id))) }) }), canScrollRight && ((0, jsx_runtime_1.jsx)("div", { className: "lsc-arrow lsc-arrow-right", onClick: () => scrollBy(1), children: "\u276F" }))] }), showMore && ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
+                                onMore === null || onMore === void 0 ? void 0 : onMore();
+                                setExpanded(false);
+                            }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [moreThumb], initial: moreThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: "More\u2026" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: "Show all" })] }))] }) })] }));
+};
+exports.LayersSelectControl = LayersSelectControl;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LayersSelectControl } from "./LayersSelectControl";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayersSelectControl = void 0;
+// React Component
+var LayersSelectControl_1 = require("./LayersSelectControl");
+Object.defineProperty(exports, "LayersSelectControl", { enumerable: true, get: function () { return LayersSelectControl_1.LayersSelectControl; } });

package/dist/styles.css

@@ -0,0 +1,167 @@
+@charset "UTF-8";
+.lsc-root {
+  font-family: Inter, system-ui;
+  font-size: 13px;
+  z-index: 99999;
+  --bg: linear-gradient(180deg, #1b1f23, #111418);
+  --panel-bg: linear-gradient(180deg, #1e242a, #161b20);
+  --text: #9ca3af;
+  --subtext: #9ca3af;
+  --border: rgba(255, 255, 255, 0.08);
+  --hover: rgba(255, 255, 255, 0.08);
+}
+.lsc-root.lsc-light {
+  --bg: linear-gradient(180deg, #ffffff, #f7f9fb);
+  --panel-bg: linear-gradient(180deg, #ffffff, #fbfdff);
+  --text: #0f1720;
+  --subtext: #556070;
+  --border: rgba(9, 30, 66, 0.06);
+  --hover: rgba(9, 30, 66, 0.06);
+}
+.lsc-root .lsc-collapsed {
+  width: var(--lsc-collapsed);
+  height: var(--lsc-collapsed);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  overflow: hidden;
+}
+.lsc-root .lsc-thumb {
+  width: var(--lsc-thumb);
+  height: calc(var(--lsc-thumb) * 0.714);
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(0, 0, 0, 0.3333333333);
+}
+.lsc-root .lsc-panel-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+.lsc-root .lsc-panel {
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+  border-radius: 12px;
+  background: var(--panel-bg);
+  border: 1px solid var(--border);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
+  display: none;
+  transform: scale(0.97);
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 200ms ease;
+  overflow: hidden;
+}
+.lsc-root .lsc-panel.is-open {
+  display: flex;
+  transform: scale(1);
+  pointer-events: auto;
+}
+.lsc-root .lsc-scroll-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  flex: 1;
+}
+.lsc-root .lsc-tiles-wrap {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
+}
+.lsc-root .lsc-tiles-wrap::-webkit-scrollbar {
+  display: none;
+}
+.lsc-root .lsc-tiles {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+.lsc-root .lsc-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  width: var(--lsc-tile-width);
+  padding: 4px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+.lsc-root .lsc-tile:hover {
+  background: var(--hover);
+}
+.lsc-root .lsc-t-thumb {
+  width: var(--lsc-tile-thumb);
+  height: calc(var(--lsc-tile-thumb) * 0.667);
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(0, 0, 0, 0.3333333333);
+}
+.lsc-root .lsc-title {
+  font-weight: 600;
+  color: var(--text);
+  max-width: var(--lsc-tile-thumb);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.lsc-root .lsc-desc {
+  font-size: 11px;
+  color: var(--subtext);
+  max-width: var(--lsc-tile-thumb);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.lsc-root {
+  /* ---------------------------------
+     SCROLL ARROWS — RESTORED 1:1
+  ---------------------------------- */
+}
+.lsc-root .lsc-arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+  user-select: none;
+  background: rgba(243, 237, 237, 0.12);
+  color: #fff;
+  border-radius: 8px;
+  z-index: 10;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+.lsc-root .lsc-arrow:hover {
+  background: rgba(0, 0, 0, 0.25);
+  transform: scale(1.05);
+}
+.lsc-root .lsc-arrow:active {
+  background: rgba(0, 0, 0, 0.35);
+  transform: scale(0.98);
+}
+.lsc-root.lsc-light .lsc-arrow {
+  background: rgba(0, 0, 0, 0.12);
+}
+.lsc-root.lsc-light .lsc-arrow:hover {
+  background: rgba(131, 119, 119, 0.12);
+  color: #393131;
+}
+.lsc-root .lsc-arrow-left {
+  left: 0;
+}
+.lsc-root .lsc-arrow-right {
+  right: 0;
+}

package/dist/styles.scss

@@ -0,0 +1,196 @@
+.lsc-root {
+  font-family: Inter, system-ui;
+  font-size: 13px;
+  z-index: 99999;
+
+  --bg: linear-gradient(180deg, #1b1f23, #111418);
+  --panel-bg: linear-gradient(180deg, #1e242a, #161b20);
+  --text: #9ca3af;
+  --subtext: #9ca3af;
+  --border: rgba(255, 255, 255, 0.08);
+  --hover: rgba(255, 255, 255, 0.08);
+
+  &.lsc-light {
+    --bg: linear-gradient(180deg, #ffffff, #f7f9fb);
+    --panel-bg: linear-gradient(180deg, #ffffff, #fbfdff);
+    --text: #0f1720;
+    --subtext: #556070;
+    --border: rgba(9, 30, 66, 0.06);
+    --hover: rgba(9, 30, 66, 0.06);
+  }
+
+
+  .lsc-collapsed {
+    width: var(--lsc-collapsed);
+    height: var(--lsc-collapsed);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .lsc-thumb {
+    width: var(--lsc-thumb);
+    height: calc(var(--lsc-thumb) * 0.714);
+    border-radius: 8px;
+    object-fit: cover;
+    background: #0005;
+  }
+
+  .lsc-panel-wrap {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  .lsc-panel {
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+    border-radius: 12px;
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
+    display: none;
+    transform: scale(0.97);
+    pointer-events: none;
+    transition: opacity 150ms ease, transform 200ms ease;
+    overflow: hidden;
+
+    &.is-open {
+      display: flex;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+  }
+
+  .lsc-scroll-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .lsc-tiles-wrap {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    flex: 1;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .lsc-tiles {
+    display: flex;
+    gap: 8px;
+    flex-wrap: nowrap;
+  }
+
+  .lsc-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    cursor: pointer;
+    width: var(--lsc-tile-width);
+    padding: 4px;
+    border-radius: 8px;
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--hover);
+    }
+  }
+
+  .lsc-t-thumb {
+    width: var(--lsc-tile-thumb);
+    height: calc(var(--lsc-tile-thumb) * 0.667);
+    border-radius: 8px;
+    object-fit: cover;
+    background: #0005;
+  }
+
+  .lsc-title {
+    font-weight: 600;
+    color: var(--text);
+    max-width: var(--lsc-tile-thumb);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .lsc-desc {
+    font-size: 11px;
+    color: var(--subtext);
+    max-width: var(--lsc-tile-thumb);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /* ---------------------------------
+     SCROLL ARROWS — RESTORED 1:1
+  ---------------------------------- */
+
+  .lsc-arrow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 36px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 20px;
+    cursor: pointer;
+    user-select: none;
+
+    background: rgba(243, 237, 237, 0.12);
+    color: #fff;
+    border-radius: 8px;
+
+    z-index: 10;
+
+    transition: background 0.2s ease, transform 0.1s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+      transform: scale(1.05);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.35);
+      transform: scale(0.98);
+    }
+  }
+
+  &.lsc-light {
+    .lsc-arrow {
+      background: rgba(0, 0, 0, 0.12);
+      &:hover {
+        background: rgba(131, 119, 119, 0.12);
+        color: #393131;
+      }
+    }
+  }
+
+  .lsc-arrow-left {
+    left: 0;
+  }
+
+  .lsc-arrow-right {
+    right: 0;
+  }
+
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "layers-select-control",
+  "description": "Mimics Google layer select layers.",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build:ts": "tsc -p tsconfig.json",
+    "build:scss": "sass src:dist --no-source-map",
+    "copy:scss": "cpx \"src/**/*.scss\" dist/",
+    "build": "npm run build:ts && npm run build:scss && npm run copy:scss"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.16",
+    "cpx": "^1.5.0",
+    "sass": "^1.93.2",
+    "typescript": "^5.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "repository": {
+    "url": "https://github.com/felipecarrillo100/layers-select-control"
+  }
+}