@phila/layerboard 3.0.0-beta.22 → 3.0.0-beta.24

package/README.md

@@ -23,10 +23,7 @@ pnpm add vue pinia maplibre-gl @fortawesome/fontawesome-svg-core @fortawesome/fr
 
 ```vue
 <template>
-  <Layerboard
-    title="My Map App"
-    web-map-id="1596df70df0349e293ceec46a06ccc50"
-  />
+  <Layerboard title="My Map App" web-map-id="1596df70df0349e293ceec46a06ccc50" />
 </template>
 
 <script setup>
@@ -48,11 +45,7 @@ All layers in a searchable list. Set `show-default-sidebar` to `true` (default)
 Group layers into collapsible accordions using the sidebar slot:
 
 ```vue
-<Layerboard
-  title="StreetSmartPHL"
-  :web-map-id="webMapId"
-  :show-default-sidebar="false"
->
+<Layerboard title="StreetSmartPHL" :web-map-id="webMapId" :show-default-sidebar="false">
   <template #sidebar="{ layers, visibleLayers, toggleLayer, setOpacity }">
     <TopicAccordion title="Paving" :expanded="true">
       <LayerCheckboxSet
@@ -68,56 +61,56 @@ Group layers into collapsible accordions using the sidebar slot:
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | *required* | App title in header |
-| `webMapId` | `string` | *required* | ArcGIS Online WebMap ID |
-| `subtitle` | `string` | — | Subtitle in header |
-| `themeColor` | `string` | `"#0f4d90"` | Header/footer background color |
-| `showDefaultSidebar` | `boolean` | `true` | Show built-in LayerPanel (false for custom sidebar) |
-| `sidebarWidth` | `string` | `"30%"` | Sidebar width (CSS units) |
-| `sidebarLabel` | `string` | `"Layers"` | Mobile toggle label for sidebar view |
-| `mapLabel` | `string` | `"Map"` | Mobile toggle label for map view |
-| `fetchMetadata` | `boolean` | `false` | Fetch layer metadata from Carto |
-| `tiledLayers` | `TiledLayerConfig[]` | `[]` | ESRI MapServer tiled layers |
-| `dataSources` | `DataSourceConfig[]` | `[]` | External API data sources |
-| `layerStyleOverrides` | `Record<string, LayerStyleOverride>` | `{}` | Override paint/legend per layer |
-| `popupOverrides` | `Record<string, PopupOverride>` | `{}` | Override popup behavior per layer |
-| `initialZoom` | `number` | — | Initial map zoom level |
-| `initialCenter` | `[number, number]` | — | Initial map center `[lng, lat]` |
-| `cyclomediaConfig` | `CyclomediaConfig` | — | Cyclomedia street-level imagery config |
-| `pictometryCredentials` | `PictometryCredentials` | — | Pictometry oblique imagery credentials |
+| Prop                    | Type                                 | Default     | Description                                         |
+| ----------------------- | ------------------------------------ | ----------- | --------------------------------------------------- |
+| `title`                 | `string`                             | _required_  | App title in header                                 |
+| `webMapId`              | `string`                             | _required_  | ArcGIS Online WebMap ID                             |
+| `subtitle`              | `string`                             | —           | Subtitle in header                                  |
+| `themeColor`            | `string`                             | `"#0f4d90"` | Header/footer background color                      |
+| `showDefaultSidebar`    | `boolean`                            | `true`      | Show built-in LayerPanel (false for custom sidebar) |
+| `sidebarWidth`          | `string`                             | `"30%"`     | Sidebar width (CSS units)                           |
+| `sidebarLabel`          | `string`                             | `"Layers"`  | Mobile toggle label for sidebar view                |
+| `mapLabel`              | `string`                             | `"Map"`     | Mobile toggle label for map view                    |
+| `fetchMetadata`         | `boolean`                            | `false`     | Fetch layer metadata from Carto                     |
+| `tiledLayers`           | `TiledLayerConfig[]`                 | `[]`        | ESRI MapServer tiled layers                         |
+| `dataSources`           | `DataSourceConfig[]`                 | `[]`        | External API data sources                           |
+| `layerStyleOverrides`   | `Record<string, LayerStyleOverride>` | `{}`        | Override paint/legend per layer                     |
+| `popupOverrides`        | `Record<string, PopupOverride>`      | `{}`        | Override popup behavior per layer                   |
+| `initialZoom`           | `number`                             | —           | Initial map zoom level                              |
+| `initialCenter`         | `[number, number]`                   | —           | Initial map center `[lng, lat]`                     |
+| `cyclomediaConfig`      | `CyclomediaConfig`                   | —           | Cyclomedia street-level imagery config              |
+| `pictometryCredentials` | `PictometryCredentials`              | —           | Pictometry oblique imagery credentials              |
 
 ### Control Positions
 
 All default to sensible positions. Each accepts `"top-left" | "top-right" | "bottom-left" | "bottom-right"`.
 
-| Prop | Default |
-|------|---------|
-| `basemapControlPosition` | `"top-right"` |
-| `navigationControlPosition` | `"bottom-right"` |
-| `geolocationControlPosition` | `"bottom-right"` |
-| `searchControlPosition` | `"top-left"` |
-| `drawControlPosition` | `"bottom-left"` (or `null` to remove) |
-| `cyclomediaButtonPosition` | `"top-right"` |
-| `pictometryButtonPosition` | `"top-right"` |
+| Prop                         | Default                               |
+| ---------------------------- | ------------------------------------- |
+| `basemapControlPosition`     | `"top-right"`                         |
+| `navigationControlPosition`  | `"bottom-right"`                      |
+| `geolocationControlPosition` | `"bottom-right"`                      |
+| `searchControlPosition`      | `"top-left"`                          |
+| `drawControlPosition`        | `"bottom-left"` (or `null` to remove) |
+| `cyclomediaButtonPosition`   | `"top-right"`                         |
+| `pictometryButtonPosition`   | `"top-right"`                         |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event            | Payload         | Description                      |
+| ---------------- | --------------- | -------------------------------- |
 | `configs-loaded` | `LayerConfig[]` | Layer configs loaded from WebMap |
-| `load-error` | `string` | Error message on load failure |
-| `zoom` | `number` | Zoom level changed |
+| `load-error`     | `string`        | Error message on load failure    |
+| `zoom`           | `number`        | Zoom level changed               |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `header` | — | Replace default header |
-| `sidebar` | layer state + methods (see below) | Replace default LayerPanel |
-| `footer` | `{ openModal, closeModal, isModalOpen }` | Custom footer content |
-| `modal` | `{ closeModal }` | Modal content |
+| Slot      | Scope                                    | Description                |
+| --------- | ---------------------------------------- | -------------------------- |
+| `header`  | —                                        | Replace default header     |
+| `sidebar` | layer state + methods (see below)        | Replace default LayerPanel |
+| `footer`  | `{ openModal, closeModal, isModalOpen }` | Custom footer content      |
+| `modal`   | `{ closeModal }`                         | Modal content              |
 
 ### Sidebar Slot Scope
 
@@ -156,11 +149,11 @@ All components are exported for building custom layouts:
 
 ```typescript
 import {
-  Layerboard,          // Main framework component
-  LayerPanel,          // Flat layer list with search/legends/opacity
-  MapPanel,            // MapLibre map with layer rendering
-  TopicAccordion,      // Collapsible accordion for topic grouping
-  LayerCheckboxSet,    // Checkbox controls for layer toggling
+  Layerboard, // Main framework component
+  LayerPanel, // Flat layer list with search/legends/opacity
+  MapPanel, // MapLibre map with layer rendering
+  TopicAccordion, // Collapsible accordion for topic grouping
+  LayerCheckboxSet, // Checkbox controls for layer toggling
   LayerRadioButtonSet, // Radio buttons for mutually exclusive layers
 } from "@phila/layerboard";
 ```
@@ -184,8 +177,8 @@ import type {
   LayerboardConfig,
   TopicConfig,
   FeatureFlags,
-  CyclomediaConfig,      // re-exported from @phila/phila-ui-map-core
-  PictometryCredentials,  // re-exported from @phila/phila-ui-map-core
+  CyclomediaConfig, // re-exported from @phila/phila-ui-map-core
+  PictometryCredentials, // re-exported from @phila/phila-ui-map-core
 } from "@phila/layerboard";
 ```
 

package/dist/components/LayerCheckboxSet.vue.d.ts

@@ -32,5 +32,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     showOpacity: boolean;
     showLegend: boolean;
     loadingLayerIds: Set<string>;
+    groupLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
 export default _default;

package/dist/components/LayerLegend.vue.d.ts

@@ -0,0 +1,7 @@
+import { LegendItem } from '../types/layer';
+type __VLS_Props = {
+    items: LegendItem[];
+    label: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLUListElement>;
+export default _default;

package/dist/components/LayerOpacitySlider.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    layerId: string;
+    layerName: string;
+    opacity: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:opacity": (opacity: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:opacity"?: ((opacity: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/LayerRadioButtonSet.vue.d.ts

@@ -34,6 +34,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     showOpacity: boolean;
     showLegend: boolean;
     loadingLayerIds: Set<string>;
+    groupLabel: string;
     groupName: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/LayerStatusIndicators.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    loading: boolean;
+    error: string | null;
+    unavailable: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/Layerboard.vue.d.ts

@@ -298,6 +298,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     "onLoad-error"?: ((error: string) => any) | undefined;
 }>, {
     tiledLayers: TiledLayerConfig[];
+    cyclomediaConfig: CyclomediaConfig;
+    pictometryCredentials: PictometryCredentials;
     basemapControlPosition: ControlPosition;
     navigationControlPosition: ControlPosition;
     geolocationControlPosition: ControlPosition;
@@ -305,6 +307,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     drawControlPosition: ControlPosition | null;
     cyclomediaButtonPosition: ControlPosition;
     pictometryButtonPosition: ControlPosition;
+    initialZoom: number;
+    initialCenter: [number, number];
+    subtitle: string;
     themeColor: string;
     showDefaultSidebar: boolean;
     sidebarWidth: string;

package/dist/components/MapPanel.vue.d.ts

@@ -32,6 +32,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     onLayerLoading?: ((layerId: string, loading: boolean) => any) | undefined;
     onLayerError?: ((layerId: string, error: string | null) => any) | undefined;
 }>, {
+    tiledLayers: TiledLayerConfig[];
+    visibleTiledLayers: Set<string>;
+    tiledLayerOpacities: Record<string, number>;
+    cyclomediaConfig: CyclomediaConfig;
+    pictometryCredentials: PictometryCredentials;
     basemapControlPosition: ControlPosition;
     navigationControlPosition: ControlPosition;
     geolocationControlPosition: ControlPosition;
@@ -39,6 +44,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     drawControlPosition: ControlPosition | null;
     cyclomediaButtonPosition: ControlPosition;
     pictometryButtonPosition: ControlPosition;
+    initialZoom: number;
+    initialCenter: [number, number];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     mapRef: any;
 }, HTMLDivElement>;

package/dist/components/TopicAccordion.vue.d.ts

@@ -27,8 +27,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onToggle?: ((expanded: boolean) => any) | undefined;
     onLayerChange?: ((layerId: string, visible: boolean) => any) | undefined;
 }>, {
+    icon: string;
     expanded: boolean;
     layerIds: string[];
+    headerClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/composables/useLayerState.d.ts

@@ -0,0 +1,16 @@
+import { LayerConfig } from '../types/layer';
+interface LayerStateProps {
+    visibleLayerIds: Set<string>;
+    layerOpacities: Record<string, number>;
+    loadingLayerIds: Set<string>;
+    layerErrors: Record<string, string>;
+    currentZoom: number;
+}
+export declare function useLayerState(getProps: () => LayerStateProps): {
+    isVisible: (layerId: string) => boolean;
+    getLayerOpacity: (layerId: string) => number;
+    isLayerLoading: (layerId: string) => boolean;
+    getLayerError: (layerId: string) => string | null;
+    isLayerAvailableAtZoom: (config: LayerConfig) => boolean;
+};
+export {};