blixify-ui-web-mcp 0.1.1

package/lib/components/display/kanban/README.md

@@ -0,0 +1,78 @@
+# Kanban
+
+<!-- STORY -->
+
+<hr>
+
+Kanban for tasks assignment
+
+##### Import
+
+```js
+import { Kanban } from "blixify-ui-web/components/display/kanban";
+```
+
+##### Usage
+
+```jsx
+const [data, setData] = useState<GridClass[]>(initialData);
+
+<Kanban
+  data={data}
+  loading={false}
+  groupBy={groupColumns}
+  groupId="groupBy"
+  draggable={true}
+  droppable={true}
+  nullColumn={true}
+  onUpdateData={(data, updatedData) => {
+    setData(updatedData);
+  }}
+/>
+```
+
+##### Usage with Group Clusters
+
+```jsx
+const groupColumns = ["Pending", "In Progress", "Done", "Canceled"];
+const groupClusters = [
+  {
+    "Active Tasks": ["Pending", "In Progress"],
+    "Completed Tasks": ["Done", "Canceled"],
+  },
+];
+
+<Kanban
+  data={data}
+  loading={false}
+  groupBy={groupColumns}
+  groupCluster={groupClusters}
+  groupId="groupBy"
+  nullColumn={true}
+/>;
+```
+
+##### Required props
+
+| Name      | Type         | Description             |
+| --------- | ------------ | ----------------------- |
+| `data`    | `Grid Class` | Kanban data             |
+| `loading` | `boolean`    | Loading                 |
+| `groupBy` | `string[]`   | Group By values         |
+| `groupId` | `string`     | Group Column Id of data |
+
+##### Optional props
+
+| Name           | Type                                                                                   | Default | Description                                                                                                                           |
+| -------------- | -------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `groupLabel`   | `string[]`                                                                             | ``      | Group label                                                                                                                           |
+| `groupCluster` | `{ [key: string]: string[] }[]`                                                        | ``      | Clusters of `groupBy` values. `draggable`, `droppable`, and `onUpdateData` props are automatically disabled to maintain data integrity. |
+| `alertMessage` | `string`                                                                               | ``      | Loading message                                                                                                                       |
+| `className`    | `string`                                                                               | ``      | Additional classname                                                                                                                  |
+| `draggable`    | `boolean`                                                                              | ``      | Allow draggable                                                                                                                       |
+| `droppable`    | `boolean`                                                                              | ``      | Allow droppable                                                                                                                       |
+| `nullColumn`   | `boolean`                                                                              | ``      | Null column                                                                                                                           |
+| `columnWidth`  | `string`                                                                               | ``      | Column Width (min-w-[])                                                                                                               |
+| `imgContain`   | `boolean`                                                                              | ``      | Image contain for data                                                                                                                |
+| `onClickData`  | `(id : string) => void`                                                                | ``      |                                                                                                                                       |
+| `onUpdateData` | `(selectedData: { id: string; [key: string]: any },updatedData: GridClass[]) => void)` | ``      |                                                                                                                                       |

package/lib/components/display/kanban/kanban.stories.tsx

@@ -0,0 +1,133 @@
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useState } from "react";
+import { Kanban } from ".";
+import { GridClass } from "../grid";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const initialData = [
+  {
+    id: "1",
+    title: "DC-1",
+    description: "Desc",
+    groupBy: "Open",
+    tags: ["Sports", "Promotions"],
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "2",
+    title: "DC-2",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
+    groupBy: "In progress",
+    tags: ["Sports", "Promotions"],
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "3",
+    title: "DC-3",
+    description: "test",
+    groupBy: "To be tested",
+    tags: ["Sports", "Promotions"],
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "4",
+    title: "DC-4",
+    description: "test",
+    groupBy: "Reopen",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "5",
+    title: "DC-5",
+    description: "test",
+    groupBy: "Reopen",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "6",
+    title: "DC-6",
+    description: "test",
+    groupBy: "Open",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "7",
+    title: "DC-7",
+    description: "test",
+    groupBy: "Open",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "8",
+    title: "DC-8",
+    description: "test",
+    groupBy: "Open",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+  {
+    id: "9",
+    title: "DC-9",
+    description: "test",
+    createdAt: moment("12/24/2020").toDate(),
+  },
+];
+
+const groupColumns = ["Open", "In progress", "To be tested", "Reopen"];
+const groupClusters = [
+  {
+    "Active Tasks": ["Open", "In progress"],
+    "Review Tasks": ["To be tested", "Reopen"],
+  },
+];
+
+stories.add("Kanban", () => {
+  const [data, setData] = useState<GridClass[]>(initialData);
+
+  return (
+    <div className="flex flex-col">
+      <div>
+        <h1 className="mb-4 text-xl font-semibold">Group by Data Column</h1>
+        <Kanban
+          data={data}
+          loading={false}
+          groupBy={groupColumns}
+          groupId="groupBy"
+          draggable={true}
+          droppable={true}
+          alertMessage="Data limit exceeded"
+          nullColumn={true}
+          onUpdateData={(data, updatedData) => {
+            setData(updatedData);
+          }}
+        />
+      </div>
+      <div className="h-[1px] my-10 bg-gray-200 w-full" />
+      <div>
+        <h1 className="mb-4 text-xl font-semibold">Group by Cluster</h1>
+        <Kanban
+          data={data}
+          loading={false}
+          groupBy={groupColumns}
+          groupCluster={groupClusters}
+          groupId="groupBy"
+          draggable={true}
+          droppable={true}
+          // alertMessage="Data grouped by clusters"
+          onUpdateData={(data, updatedData) => {
+            setData(updatedData);
+          }}
+        />
+      </div>
+    </div>
+  );
+});

package/lib/components/display/list/README.md

@@ -0,0 +1,109 @@
+# List
+
+<!-- STORY -->
+
+<hr>
+
+A paginated list component with support for cursor and page pagination, group tab filtering, multi-select checkboxes, and dark mode.
+
+### Import
+
+```js
+import { List } from "blixify-ui-web/display/list";
+```
+
+### Usage
+
+```jsx
+const [pageIndex, setPageIndex] = useState(0);
+const [limit] = useState(10);
+
+const lists = [
+  {
+    id: "1",
+    title: "Back End Developer",
+    description: "Engineering",
+    tag: "Full time",
+    date: new Date(),
+  },
+  {
+    id: "2",
+    title: "Front End Developer",
+    description: "Engineering",
+    tag: "Full time",
+    date: new Date(),
+  },
+];
+
+const handlePagination = (value) => {
+  if (typeof value === "number") setPageIndex(value);
+  else if (value === "next") setPageIndex((p) => p + 1);
+  else setPageIndex((p) => p - 1);
+};
+
+<List
+  list={lists}
+  loading={false}
+  paginationType="page"
+  size={lists.length}
+  limit={limit}
+  pageIndex={pageIndex}
+  handleUpdatePageIndex={handlePagination}
+/>;
+```
+
+### Required props
+
+| Name      | Type          | Description                         |
+| --------- | ------------- | ----------------------------------- |
+| `list`    | `ListClass[]` | Array of items to display           |
+| `loading` | `boolean`     | Shows a loading spinner when `true` |
+
+### Optional props
+
+| Name                    | Type                                   | Default         | Description                                                                                                                    |
+| ----------------------- | -------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `paginationType`        | `"cursor"` \| `"page"`                 | —               | Enables pagination controls                                                                                                    |
+| `limit`                 | `number`                               | `10`            | Items per page — required when `paginationType` is set                                                                         |
+| `pageIndex`             | `number`                               | `0`             | Current page index — required when `paginationType` is set                                                                     |
+| `cursor`                | `any`                                  | —               | Last fetched cursor value (string or Date). Required for `paginationType="cursor"` to enable the next button beyond local data |
+| `size`                  | `number`                               | —               | Total record count. Required for `paginationType="page"` to calculate page numbers                                             |
+| `hidePagination`        | `boolean`                              | `false`         | Hides the pagination row entirely                                                                                              |
+| `groupId`               | `string`                               | —               | Key on `ListClass` items to group by. Renders a Tabs bar to filter the list by unique values                                   |
+| `imgContain`            | `boolean`                              | `false`         | Uses `object-contain` instead of `object-cover` for item images                                                                |
+| `actionMobile`          | `boolean`                              | `false`         | Moves the `action` element to a new line on mobile                                                                             |
+| `noTruncate`            | `boolean`                              | `false`         | Removes CSS truncation from item titles                                                                                        |
+| `showId`                | `boolean`                              | `false`         | Includes the `id` field in the rendered key/value pairs                                                                        |
+| `newTabUrl`             | `string`                               | —               | Base URL for row links e.g. `"https://example.com/items?id="`                                                                  |
+| `addNewTabUrl`          | `string`                               | —               | Suffix appended after the id in the link URL e.g. `"?type=view"`                                                               |
+| `darkMode`              | `boolean`                              | `false`         | Applies dark colour scheme                                                                                                     |
+| `darkModeBg`            | `tailwind class`                       | `"bg-gray-900"` | Background class used in dark mode                                                                                             |
+| `checkbox`              | `boolean`                              | `false`         | Adds a checkbox to each row for multi-select                                                                                   |
+| `selectedIds`           | `string[]`                             | —               | Array of selected item ids — required when `checkbox` is `true`                                                                |
+| `selectAll`             | `boolean`                              | `false`         | When `true`, treats all items across all pages as selected                                                                     |
+| `selectAllText`         | `string`                               | —               | Text appended to "All" in the selected count label                                                                             |
+| `disableSelectFullData` | `boolean`                              | `false`         | Hides the "Select All in List / Unselect All in List" popup                                                                    |
+| `multiActionButton`     | `ReactElement`                         | —               | Action buttons shown in the selection header when items are selected                                                           |
+| `className`             | `tailwind class`                       | —               | Class applied to the outer container                                                                                           |
+| `onClickRow`            | `(id: string, index?: number) => void` | —               | Called when a row is clicked                                                                                                   |
+| `handleUpdatePageIndex` | `(value: string \| number) => void`    | —               | Called on pagination. Receives `"prev"`, `"next"`, or a page number                                                            |
+| `handleSelectedIds`     | `(value: string[]) => void`            | —               | Called when the selected ids change                                                                                            |
+| `handleSelectAll`       | `(value: boolean) => void`             | —               | Called when select-all state changes                                                                                           |
+| `linkProps`             | `LinkProps`                            | —               | Refer to Link component documentation                                                                                          |
+
+### ListClass
+
+Any extra fields beyond the reserved ones are automatically rendered as key/value rows below the title.
+
+| Name          | Type           | Description                                                   |
+| ------------- | -------------- | ------------------------------------------------------------- |
+| `id`          | `string`       | Unique identifier                                             |
+| `title`       | `string`       | Primary text shown in bold                                    |
+| `img`         | `string`       | Avatar/thumbnail image URL                                    |
+| `icon`        | `ReactElement` | Icon shown instead of `img`                                   |
+| `action`      | `ReactElement` | Element rendered on the right side of the row                 |
+| `groupId`     | `string`       | Value used for group tab filtering when `groupId` prop is set |
+| `description` | `string`       | Example extra field — rendered as a key/value row             |
+| `tag`         | `string`       | Example extra field — rendered as a key/value row             |
+| `date`        | `Date`         | Example extra field — rendered as a formatted date            |
+| `[key]`       | `any`          | Any additional fields are rendered automatically              |

package/lib/components/display/list/list.stories.tsx

@@ -0,0 +1,188 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { List, ListClass } from ".";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const baseLists: ListClass[] = [
+  {
+    id: "1",
+    title: "Back End Developer",
+    img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    description: "Engineering",
+    tag: "Full time",
+    date: new Date(),
+    action: (
+      <div className="ml-2 whitespace-nowrap">
+        <p className="rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">
+          Active
+        </p>
+      </div>
+    ),
+  },
+  {
+    id: "2",
+    title: "Front End Developer",
+    img: "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    description: "Engineering",
+    tag: "Full time",
+    date: new Date(),
+  },
+  {
+    id: "3",
+    title: "Product Designer",
+    img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    description: "Design",
+    tag: "Part time",
+    date: new Date(),
+  },
+  {
+    id: "4",
+    title: "DevOps Engineer",
+    img: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    description: "Infrastructure",
+    tag: "Full time",
+    date: new Date(),
+  },
+];
+
+const groupedLists: ListClass[] = baseLists.map((item) => ({
+  ...item,
+  groupId: item.tag,
+}));
+
+stories.add("List", () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [limit] = useState(2);
+  const [cursor] = useState("");
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+
+  const handlePagination = (value: string | number) => {
+    if (typeof value === "number") {
+      setPageIndex(value);
+    } else if (value === "next") {
+      setPageIndex((p) => p + 1);
+    } else {
+      setPageIndex((p) => p - 1);
+    }
+  };
+
+  return (
+    <>
+      <StorySection
+        title="Cursor Pagination"
+        description="paginationType='cursor' shows prev/next controls. Pass cursor (a string or Date from your last fetched record) to enable the next button beyond local data."
+      >
+        <div className="w-full">
+          <List
+            cursor={cursor}
+            limit={limit}
+            list={baseLists}
+            loading={false}
+            paginationType="cursor"
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Page Pagination"
+        description="paginationType='page' shows numbered page buttons. size is the total record count used to calculate page numbers."
+      >
+        <div className="w-full">
+          <List
+            limit={limit}
+            list={baseLists}
+            loading={false}
+            paginationType="page"
+            size={baseLists.length}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="darkMode=true switches to a dark colour scheme. darkModeBg overrides the default bg-gray-900 background."
+        dark
+      >
+        <div className="w-full">
+          <List
+            darkMode={true}
+            darkModeBg="bg-gray-800"
+            limit={limit}
+            list={baseLists}
+            loading={false}
+            paginationType="page"
+            size={baseLists.length}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Group Tabs"
+        description="groupId='tag' extracts unique values from that field and renders a Tabs bar to filter the list. Items without the field are excluded from the filtered view."
+      >
+        <div className="w-full">
+          <List
+            limit={limit}
+            list={groupedLists}
+            loading={false}
+            paginationType="cursor"
+            cursor={cursor}
+            pageIndex={pageIndex}
+            groupId="groupId"
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Checkbox + Multi-select"
+        description="checkbox=true adds a checkbox to each row. selectedIds tracks checked items. selectAll and handleSelectAll support selecting across all pages."
+      >
+        <div className="w-full">
+          <List
+            limit={limit}
+            list={baseLists}
+            loading={false}
+            paginationType="page"
+            size={baseLists.length}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            checkbox={true}
+            selectedIds={selectedIds}
+            selectAll={selectAll}
+            handleSelectedIds={(value) => setSelectedIds(value)}
+            handleSelectAll={(value) => setSelectAll(value)}
+          />
+          <p className="mt-2 text-sm text-gray-500">
+            Selected: {selectAll ? "All" : selectedIds.join(", ") || "none"}
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Loading state"
+        description="loading=true shows a spinner and hides the list content."
+      >
+        <div className="w-full">
+          <List list={[]} loading={true} />
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/display/loading/README.md

@@ -0,0 +1,25 @@
+# Loading
+
+<!-- STORY -->
+
+<hr>
+
+Loading spinner
+
+##### Import
+
+```js
+import { Loading } from "blixify-ui-web/components/display/loading";
+```
+
+##### Usage
+
+```jsx
+<Loading />
+```
+
+##### Optional props
+
+| Name            | Type             | Default | Description |
+| --------------- | ---------------- | ------- | ----------- |
+| `sizeClassName` | `tailwind class` | ""      |             |

package/lib/components/display/loading/loading.stories.tsx

@@ -0,0 +1,15 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Loading } from ".";
+import README from "./README.md";
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Loading", () => {
+  return <Loading />;
+});

package/lib/components/display/mapView/README.md

@@ -0,0 +1,99 @@
+# MapView
+
+<!-- STORY -->
+
+<hr>
+
+A Google Maps component for rendering markers, polygons, and circles. Supports info windows, color-coded group legends, polygon selection, marker clustering, and KML file overlays.
+
+> Requires the Google Maps JavaScript API script to be loaded before the component mounts. Include the `places`, `drawing`, and `geometry` libraries.
+
+##### Import
+
+```js
+import { MapView, MapMarker } from "blixify-ui-web/display/mapView";
+```
+
+##### Usage
+
+Basic map with markers:
+
+```jsx
+<div className="h-[700px] w-full">
+  <MapView
+    markerList={[
+      {
+        id: "1",
+        coord: { lat: 3.14, lng: 101.69 },
+        data: { name: "HQ", description: "Main office", group: "Office" },
+        color: "blue",
+      },
+    ]}
+    enableMapControl={true}
+    autoFitToMarkers
+    infoWindowHeaderComponent={(id, data) => (
+      <h1 className="text-primary-500 font-semibold">{data.name}</h1>
+    )}
+    infoWindowComponent={(id, data) => <p>{data.description}</p>}
+    handleUpdateOnClick={(ids) => console.log("update", ids)}
+    handleDeleteOnClick={(ids) => console.log("delete", ids)}
+  />
+</div>
+```
+
+With polygon select:
+
+```jsx
+<MapView
+  markerList={markers}
+  enableMapControl={true}
+  enablePolygonSelect
+  handleSelectPolygon={(ids) => console.log("selected", ids)}
+  handleUpdateOnClick={(ids) => {}}
+  handleDeleteOnClick={(ids) => {}}
+/>
+```
+
+##### Optional props
+
+| Name                        | Type                                                | Default       | Description                                                                                                         |
+| --------------------------- | --------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `markerList`                | `MapMarker[]`                                       | —             | List of markers to render                                                                                           |
+| `polygonList`               | `MapPolygon[]`                                      | —             | List of static circles or polygons to overlay on the map                                                            |
+| `mapType`                   | `"roadmap" \| "satellite" \| "hybrid" \| "terrain"` | `"satellite"` | Google Maps view type                                                                                               |
+| `enableMapControl`          | `boolean`                                           | —             | Show the Google Maps control UI (zoom, street view, etc.)                                                           |
+| `enablePolygonSelect`       | `boolean`                                           | —             | Show the drawing manager toolbar. Drawn polygons select markers within their bounds                                 |
+| `defaultPolygonDraw`        | `boolean`                                           | `false`       | Start in polygon draw mode on load                                                                                  |
+| `enableCluster`             | `boolean`                                           | —             | Cluster nearby markers into a single pin                                                                            |
+| `autoFitToMarkers`          | `boolean`                                           | `true`        | Automatically fit the map viewport to show all markers. Pass `false` to disable                                     |
+| `hideColorLegend`           | `boolean`                                           | —             | Hide the color legend panel. The legend only appears when markers have a `data.group` value                         |
+| `infoWindowComponent`       | `(id: string, data: any) => ReactElement`           | —             | Custom body content for the marker info window                                                                      |
+| `infoWindowHeaderComponent` | `(id: string, data: any) => ReactElement`           | —             | Custom header content for the marker info window                                                                    |
+| `polygonFileUrl`            | `string`                                            | —             | URL to a KML file. Coordinates are parsed and rendered as a polygon overlay                                         |
+| `isPolygonAreaReturn`       | `boolean`                                           | —             | When `true`, enables polygon area calculation. Drawn polygons report their area in m² via `handlePolygonAreaChange` |
+| `handleSelectPolygon`       | `(ids: string[]) => void`                           | —             | Called with the ids of markers inside a drawn polygon                                                               |
+| `handlePolygonAreaChange`   | `(areas: number[]) => void`                         | —             | Called with an array of polygon areas in m² when `isPolygonAreaReturn` is true                                      |
+| `handleUpdateOnClick`       | `(ids: string[]) => void`                           | —             | Called when the update (pencil) button in the polygon selection panel is clicked                                    |
+| `handleDeleteOnClick`       | `(ids: string[]) => void`                           | —             | Called when the delete (trash) button in the polygon selection panel is clicked                                     |
+
+##### MapMarker
+
+| Name    | Type                           | Required | Description                                                                                                                     |
+| ------- | ------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `id`    | `string`                       | yes      | Unique marker id                                                                                                                |
+| `coord` | `{ lat: number; lng: number }` | yes      | Marker position                                                                                                                 |
+| `color` | `MapMarkerColor`               | no       | Pin color: `"red" \| "blue" \| "green" \| "yellow" \| "orange" \| "purple" \| "white" \| "black" \| "none"`. Default: `"white"` |
+| `data`  | `any`                          | no       | Arbitrary data passed to `infoWindowComponent` and `infoWindowHeaderComponent`. Add `data.group` to enable the color legend     |
+| `icon`  | `string`                       | no       | Image URL to override the default colored pin icon                                                                              |
+
+##### MapPolygon
+
+| Name     | Type                             | Required | Description                                    |
+| -------- | -------------------------------- | -------- | ---------------------------------------------- |
+| `id`     | `string`                         | yes      | Unique polygon id                              |
+| `type`   | `"circle" \| "polygon"`          | yes      | Shape type                                     |
+| `coord`  | `{ lat: number; lng: number }`   | no       | Center point — required for `type: "circle"`   |
+| `radius` | `number`                         | no       | Radius in km — used with `type: "circle"`      |
+| `path`   | `{ lat: number; lng: number }[]` | no       | Path vertices — required for `type: "polygon"` |
+| `color`  | `MapMarkerColor`                 | no       | Fill and stroke color. Default: yellow         |
+| `label`  | `string`                         | no       | Text label rendered at the polygon centroid    |