@krak-stack/registry 0.1.40 → 0.1.42

package/README.md

@@ -6,41 +6,19 @@ Tree-shakable runtime components and Effect services from the KrakStack shadcn r
 bun add @krak-stack/registry
 ```
 
-## Temporary Effect form patches
+## Effect forms
 
-This interim release supports stable Effect 4, but the published form betas still
-use removed Effect import paths. Applications using Effect forms must apply both
-compatibility patches at their package-manager root; installing Registry alone
-does not apply them automatically.
-
-After installing Registry, copy its bundled patches into your application:
+Applications using Effect forms need `@lucas-barake/effect-form@1.1.0` and
+`@lucas-barake/effect-form-react@1.1.0`, which support stable Effect 4 without
+compatibility patches:
 
 ```sh
-mkdir -p patches
-cp node_modules/@krak-stack/registry/patches/*.patch patches/
+bun add @lucas-barake/effect-form@1.1.0 @lucas-barake/effect-form-react@1.1.0
 ```
 
-Merge these fields into the application's root `package.json`, preserving any
-existing overrides and patches:
-
-```json
-{
-  "overrides": {
-    "@lucas-barake/effect-form": "0.25.0-beta.6",
-    "@lucas-barake/effect-form-react": "0.26.0-beta.5"
-  },
-  "patchedDependencies": {
-    "@lucas-barake/effect-form@0.25.0-beta.6": "patches/@lucas-barake%2Feffect-form@0.25.0-beta.6.patch",
-    "@lucas-barake/effect-form-react@0.26.0-beta.5": "patches/@lucas-barake%2Feffect-form-react@0.26.0-beta.5.patch"
-  }
-}
-```
-
-Run `bun install` and commit the patches, manifest, and lockfile. Other package
-managers require equivalent patch configuration. See the bundled
-`patches/README.md` for provenance and removal instructions after
-[upstream release PR #111](https://github.com/lucas-barake/effect-form/pull/111)
-is published.
+When upgrading from the patched betas, remove their `patchedDependencies`
+entries and patch files, update any form version overrides to `1.1.0`, and run
+`bun install`. Preserve unrelated dependency patches.
 
 ## Usage
 
@@ -79,25 +57,192 @@ import {
 import { NotificationService } from "@krak-stack/registry/service-notification";
 ```
 
-Inject API telemetry and browser proxy routes into the application HTTP layer:
+## OpenTelemetry
+
+| Export                                                    | Purpose                                                                                 |
+| --------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `HttpApiOtlp.layer` from `opentelemetry/api`              | Server exporters and same-origin browser ingestion routes. Includes `ServerOtlp.layer`. |
+| `ServerOtlp.layer` from `opentelemetry/server`            | Exporters for workers, workflows, and CLIs without an HTTP server.                      |
+| `BrowserOtlp.layer(options)` from `opentelemetry/browser` | Browser tracing and optional events, logs, and metrics.                                 |
+
+### Setup
+
+Provide the HTTP layer once at the application composition root:
 
 ```ts
+import { Layer } from "effect";
+import { HttpApiOtlp } from "@krak-stack/registry/opentelemetry/api";
+
 const appLayer = appRoutes.pipe(Layer.provideMerge(HttpApiOtlp.layer));
 ```
 
-Install browser telemetry globally on the Atom runtime used by the API client:
+Configure an OTLP/HTTP collector on the server:
+
+```dotenv
+OTEL_SERVICE_NAME=my-app-api
+OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
+OTEL_TRACES_EXPORTER=otlp
+OTEL_METRICS_EXPORTER=otlp
+OTEL_LOGS_EXPORTER=otlp
+```
+
+Browser events require the logs signal. The proxy forwards enabled signals from
+`/api/otel/v1/{traces,metrics,logs}` to the collector. Keep collector credentials
+server-side. Server log endpoint/header overrides use
+`OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` / `OTEL_EXPORTER_OTLP_LOGS_HEADERS`, falling
+back to the shared endpoint/headers; these overrides do not change proxy routing.
+`OTEL_SDK_DISABLED=true` disables server export, not browser collection.
+
+Install one browser layer on the Atom context passed to `AtomHttpApi.Service`:
 
 ```ts
 import { Atom } from "effect/reactivity";
 import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";
 
 const apiRuntime = Atom.context();
-
 if (!import.meta.env.SSR) {
-  apiRuntime.addGlobalLayer(BrowserOtlp.layer({ serviceName: "my-app-web" }));
+  apiRuntime.addGlobalLayer(
+    BrowserOtlp.layer({ serviceName: "my-app-web", events: {} }),
+  );
 }
 ```
 
+Mount/read `ApiClient.runtime` in the root layout to start it. Browser methods
+target the active layer even when run from another Effect runtime. Calls before
+startup or after disposal are no-ops, not buffered. Dispose long-lived server and
+browser runtimes on shutdown to flush pending data.
+
+### Browser API
+
+All methods return Effects. Use `yield*` inside Effect code or
+`Effect.runPromise(...)` / `Effect.runFork(...)` from application callbacks.
+
+| Method                                   | Behavior                                                                                                                   |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `identify({ userId?, organizationId? })` | Replace identity for future events; omitted fields clear old values. Emits no event.                                       |
+| `identify(null)`                         | Clear identity, for example on logout.                                                                                     |
+| `track(name, properties?, options?)`     | Record a named event.                                                                                                      |
+| `page(options?)`                         | Record `browser.page_view`. Accepts `path`, `name`, `category`, `properties`, and event `options`. `pageView` is an alias. |
+
+`identify` has no typed failure: invalid input warns without including supplied
+values and leaves identity unchanged. `track` and `page` fail with an Effect
+schema error on invalid input. Identity is in memory only, applies to events
+rather than automatic traces/logs, and never rewrites queued events.
+
+### Auth example
+
+Mount this once under the application's Atom registry. `ApiClient` and
+`authSessionAtom` are application-owned; the telemetry package has no auth
+dependency. The session atom in this example exposes KrakStack Auth session data.
+
+```tsx
+import { useAtomSubscribe, useAtomValue } from "@effect/atom-react";
+import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";
+import { Effect } from "effect";
+import { AsyncResult } from "effect/reactivity";
+import { ApiClient } from "@/lib/api-client";
+import { authSessionAtom } from "@/services/auth/client";
+
+export const AuthTelemetry = () => {
+  const runtime = useAtomValue(ApiClient.runtime);
+
+  useAtomSubscribe(
+    authSessionAtom,
+    (session) => {
+      if (!AsyncResult.isSuccess(runtime)) return;
+
+      Effect.runFork(
+        BrowserOtlp.identify(
+          AsyncResult.isSuccess(session) && !session.waiting && session.value
+            ? {
+                userId: session.value.user.id,
+                organizationId:
+                  session.value.session.activeOrganizationId ?? undefined,
+              }
+            : null,
+        ),
+      );
+    },
+    { immediate: true },
+  );
+
+  return null;
+};
+```
+
+This identifies after startup and clears identity during auth loading, failure,
+and logout. The first page view may be anonymous. For other auth libraries, pass
+the same two IDs or `null` when auth state changes. Apply your own consent policy;
+do not send names, emails, or session tokens as identity.
+
+### Page views and browser options
+
+`events: {}` enables custom events and one page view on startup, then on pathname
+changes through `pushState`, `replaceState`, and back/forward navigation.
+Same-path and query/hash-only changes are ignored. Tracking follows URL changes,
+not loader completion. Paths exclude query strings/fragments but may still
+contain personal IDs.
+
+For sanitized route templates or custom timing, use
+`events: { pageViews: false }` and call `page({ path: "/orders/:id" })` manually.
+Do not combine automatic and manual tracking for the same view.
+
+| Layer option                              | Default                                                         |
+| ----------------------------------------- | --------------------------------------------------------------- |
+| `serviceName`                             | Required                                                        |
+| `traces`                                  | `{}`; includes global exception capture. `false` disables both. |
+| `events`, `logs`, `metrics`               | `false`; enable each independently with `{}`.                   |
+| `baseUrl`                                 | `/api/otel`                                                     |
+| `serviceVersion`, `attributes`, `headers` | Optional resource/transport metadata.                           |
+
+Browser events batch every 30 seconds, up to 100 records by default. Override
+`exportInterval`, `maxBatchSize`, and `shutdownTimeout` under `events`.
+
+### Server events and shared options
+
+Define server events as Effects and run them inside the runtime with
+`ServerOtlp.layer` (or the HTTP layer):
+
+```ts
+import { Effect } from "effect";
+import { ServerOtlp } from "@krak-stack/registry/opentelemetry/server";
+
+const orderCompleted = Effect.gen(function* () {
+  yield* ServerOtlp.track("app.order.completed", { "order.total": 49 });
+});
+```
+
+Authenticated handlers inherit `user.id` and `organization.id` from
+`AuthMiddleware` log annotations. Server identity is fiber-scoped; there is no
+server `identify` method. Background jobs can supply identity per event.
+
+Both `track` methods accept `options`:
+
+| Option                                            | OTLP attribute / meaning                                            |
+| ------------------------------------------------- | ------------------------------------------------------------------- |
+| `userId`, `anonymousId`, `sessionId`, `messageId` | `user.id`, `analytics.anonymous_id`, `session.id`, `log.record.uid` |
+| `context`                                         | Additional flat attributes                                          |
+| `timestamp`                                       | Effect `DateTime.Utc` occurrence time; otherwise recorded now       |
+
+Attribute precedence, lowest to highest: context, properties, explicit identity
+options, browser identified identity, scoped log annotations. Values support
+strings, finite numbers, booleans, and homogeneous arrays, not nested objects.
+Use stable event names and put dynamic values in attributes. Message IDs support
+correlation, not guaranteed deduplication.
+
+Events are OTLP log records with `eventName`, INFO severity, and active trace/span
+IDs when available; they do not create spans. `browser.page_view`, `url.path`,
+`analytics.page.name`, and `analytics.page.category` describe page events; the
+analytics names are project conventions, not standardized OTel semantics.
+
+Configure collector/storage separately. Browser identity is untrusted analytics
+metadata, not authorization or an audit trail. No visitor/session IDs or cookies
+are generated. Browser flushing on hidden/pagehide is best-effort. Apply payload
+and rate limits at ingestion, and keep sensitive data out of events and
+high-cardinality fields out of Loki labels.
+
+## Other services
+
 `@krak-stack/registry/service-notification` is the source-compatible direct
 dispatcher. Use the separate `@krak-stack/notifications` package for a durable
 inbox, package-owned migrations, persisted delivery jobs, retries, workers, and

package/dist/components/ui/data-table.d.ts

@@ -32,10 +32,10 @@ export interface DataTableListItemContext<TData> {
 }
 export interface DataTableListOptions {
     emptyLabel: ReactNode;
-    display?: "list" | "icon";
-    locale?: string;
-    messages?: DataTableMessageTranslations;
-    visibleCount?: number;
+    display?: "list" | "icon" | undefined;
+    locale?: string | undefined;
+    messages?: DataTableMessageTranslations | undefined;
+    visibleCount?: number | undefined;
 }
 export type DataTableListColumn<TData> = DataTableListOptions & {
     /** Includes items not loaded in the preview; the dropdown only shows supplied items. */
@@ -76,8 +76,8 @@ interface EditableDataTableListCellProps extends DataTableListOptions {
     totalCount?: number | undefined;
 }
 interface DataTableListCellActionsProps {
-    actionsLabel?: string;
-    itemActions?: readonly DataTableItemAction<DataTableListItem>[];
+    actionsLabel?: string | undefined;
+    itemActions?: readonly DataTableItemAction<DataTableListItem>[] | undefined;
 }
 export type DataTableListCellProps = DataTableListCellActionsProps & (EditableDataTableListCellProps | (DataTableListSummaryProps & {
     options?: never;
@@ -206,6 +206,23 @@ export type DataTablePaginationFeature = false | {
     rowCount: number;
     pageSizes?: readonly number[];
 };
+export interface DataTableExportAction {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** The app owns fetching, authorization, field selection, and downloading. */
+    onExport: () => void | Promise<void>;
+}
+export interface DataTableExportFeature {
+    baseName: string;
+    /** Both scopes operate only on rows already supplied to the table. */
+    scope?: "currentPage" | "filteredRows";
+    /** Set false to offer only app-provided actions. Defaults to true. */
+    builtIn?: boolean;
+    actions?: readonly DataTableExportAction[];
+    onError?: (error: unknown, action: DataTableExportAction) => void;
+}
 export interface DataTableFeatures<TData> {
     toolbar?: false | {
         /** Additional `MenubarMenu` controls rendered at the start of the toolbar. */
@@ -228,10 +245,7 @@ export interface DataTableFeatures<TData> {
         label?: string;
         items: readonly DataTableRowAction<TData>[];
     };
-    export?: false | {
-        baseName: string;
-        scope?: "currentPage" | "filteredRows";
-    };
+    export?: false | DataTableExportFeature;
     gallery?: false | {
         name: string;
         description?: string;
@@ -255,6 +269,7 @@ export type DataTableMessages = PaginationMessages & {
     export: string;
     exportCsv: string;
     exportJson: string;
+    exportFailed?: string;
     refresh: string;
     view: string;
     tableView: string;
@@ -295,6 +310,7 @@ export declare const dataTableMessages: (locale?: string, translations?: DataTab
     export: string;
     exportCsv: string;
     exportJson: string;
+    exportFailed: string;
     refresh: string;
     view: string;
     tableView: string;
@@ -332,6 +348,7 @@ export declare const dataTableMessages: (locale?: string, translations?: DataTab
     export: string;
     exportCsv: string;
     exportJson: string;
+    exportFailed: string;
     refresh: string;
     view: string;
     tableView: string;

package/dist/components/ui/data-table.js

@@ -993,6 +993,7 @@ var messages2 = {
     export: "Export",
     exportCsv: "CSV",
     exportJson: "JSON",
+    exportFailed: "Export failed. Please try again.",
     refresh: "Refresh",
     view: "View",
     tableView: "Table",
@@ -1024,6 +1025,7 @@ var messages2 = {
     export: "Exporter",
     exportCsv: "CSV",
     exportJson: "JSON",
+    exportFailed: "L’exportation a échoué. Veuillez réessayer.",
     refresh: "Rafraîchir",
     view: "Affichage",
     tableView: "Tableau",
@@ -1586,7 +1588,7 @@ var DataTableRowActions = ({
                 event.stopPropagation();
                 action.onClick(row);
               },
-              variant: action.variant,
+              variant: action.variant ?? "default",
               children: [
                 action.icon,
                 action.name
@@ -1641,6 +1643,9 @@ var DataTableToolbar = ({
   tableAtom
 }) => {
   const [store, setStore] = useTableAtom(tableAtom);
+  const exportPending = useRef(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportFailed, setExportFailed] = useState(false);
   const { features, labels } = store.config;
   const model = deriveModel(store);
   const selectedRows = getSelectedRows(store, model);
@@ -1653,6 +1658,27 @@ var DataTableToolbar = ({
   const update = (next) => changeState(setStore, next);
   const visibleBulkActions = bulkActions ? bulkActions.items.filter((action) => !action.visible || action.visible(selectedRows)) : [];
   const exportRows = features.export && features.export.scope === "filteredRows" ? model.filteredRows : model.pageRows;
+  const exportFeature = features.export;
+  const exportActions = exportFeature ? exportFeature.actions ?? [] : [];
+  const builtInExport = exportFeature && exportFeature.builtIn !== false;
+  const canExport = builtInExport && exportRows.length > 0 || exportActions.some((action) => !action.disabled);
+  const runExport = async (action) => {
+    if (exportPending.current || action.disabled)
+      return;
+    exportPending.current = true;
+    setExporting(true);
+    setExportFailed(false);
+    try {
+      await action.onExport();
+    } catch (error) {
+      setExportFailed(true);
+      if (exportFeature)
+        exportFeature.onError?.(error, action);
+    } finally {
+      exportPending.current = false;
+      setExporting(false);
+    }
+  };
   return /* @__PURE__ */ jsxs8("div", {
     className: "flex flex-col gap-2 pb-4",
     children: [
@@ -1716,7 +1742,7 @@ var DataTableToolbar = ({
                       /* @__PURE__ */ jsx14(MenubarSeparator, {}),
                       visibleBulkActions.map((action) => /* @__PURE__ */ jsxs8(MenubarItem, {
                         onClick: () => action.onClick(selectedRows),
-                        variant: action.variant,
+                        variant: action.variant ?? "default",
                         children: [
                           action.icon,
                           action.name
@@ -1786,12 +1812,15 @@ var DataTableToolbar = ({
               children: [
                 /* @__PURE__ */ jsxs8(MenubarTrigger, {
                   "aria-label": labels.export,
-                  disabled: !exportRows.length,
+                  "aria-busy": exporting,
+                  disabled: exporting || !canExport,
                   children: [
-                    /* @__PURE__ */ jsx14(Download, {}),
+                    exporting ? /* @__PURE__ */ jsx14(RefreshCw, {
+                      className: "animate-spin"
+                    }) : /* @__PURE__ */ jsx14(Download, {}),
                     /* @__PURE__ */ jsx14("span", {
                       className: "hidden sm:inline",
-                      children: labels.export
+                      children: exporting ? labels.loading : labels.export
                     })
                   ]
                 }),
@@ -1803,23 +1832,38 @@ var DataTableToolbar = ({
                         children: labels.export
                       }),
                       /* @__PURE__ */ jsx14(MenubarSeparator, {}),
-                      /* @__PURE__ */ jsxs8(MenubarItem, {
-                        onClick: () => downloadCsv(model.visibleColumns.map(columnLabel), exportRows.map((row) => model.visibleColumns.map((column) => String(getDataTableExportValue(row, column, store.config.locale) ?? ""))), features.export ? features.export.baseName : "table"),
+                      builtInExport ? /* @__PURE__ */ jsxs8(Fragment, {
                         children: [
-                          /* @__PURE__ */ jsx14(FileText, {}),
-                          labels.exportCsv
+                          /* @__PURE__ */ jsxs8(MenubarItem, {
+                            disabled: exporting || !exportRows.length,
+                            onClick: () => downloadCsv(model.visibleColumns.map(columnLabel), exportRows.map((row) => model.visibleColumns.map((column) => String(getDataTableExportValue(row, column, store.config.locale) ?? ""))), features.export ? features.export.baseName : "table"),
+                            children: [
+                              /* @__PURE__ */ jsx14(FileText, {}),
+                              labels.exportCsv
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxs8(MenubarItem, {
+                            disabled: exporting || !exportRows.length,
+                            onClick: () => downloadJson(exportRows.map((row) => Object.fromEntries(model.visibleColumns.map((column) => [
+                              column.id,
+                              getDataTableExportValue(row, column, store.config.locale)
+                            ]))), features.export ? features.export.baseName : "table"),
+                            children: [
+                              /* @__PURE__ */ jsx14(FileJson, {}),
+                              labels.exportJson
+                            ]
+                          })
                         ]
-                      }),
-                      /* @__PURE__ */ jsxs8(MenubarItem, {
-                        onClick: () => downloadJson(exportRows.map((row) => Object.fromEntries(model.visibleColumns.map((column) => [
-                          column.id,
-                          getDataTableExportValue(row, column, store.config.locale)
-                        ]))), features.export ? features.export.baseName : "table"),
+                      }) : null,
+                      builtInExport && exportActions.length ? /* @__PURE__ */ jsx14(MenubarSeparator, {}) : null,
+                      exportActions.map((action) => /* @__PURE__ */ jsxs8(MenubarItem, {
+                        disabled: exporting || action.disabled,
+                        onClick: () => void runExport(action),
                         children: [
-                          /* @__PURE__ */ jsx14(FileJson, {}),
-                          labels.exportJson
+                          action.icon,
+                          action.label
                         ]
-                      })
+                      }, action.id))
                     ]
                   })
                 })
@@ -1827,7 +1871,12 @@ var DataTableToolbar = ({
             }) : null
           ]
         })
-      })
+      }),
+      exportFeature && exportFailed ? /* @__PURE__ */ jsx14("p", {
+        role: "alert",
+        className: "text-destructive text-sm",
+        children: labels.exportFailed ?? dataTableMessages(store.config.locale).exportFailed
+      }) : null
     ]
   });
 };
@@ -2293,7 +2342,7 @@ var GroupActions = ({
         children: /* @__PURE__ */ jsx14(DropdownMenuGroup, {
           children: visible.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
             onClick: () => action.onClick(groupId),
-            variant: action.variant,
+            variant: action.variant ?? "default",
             children: [
               action.icon,
               " ",
@@ -2796,23 +2845,21 @@ var HydratedDataTable = ({
   setPersistedUiState,
   ...props
 }) => {
-  const transientUiAtomRef = useRef(null);
-  if (!transientUiAtomRef.current) {
+  const [transientUiAtom] = useState(() => {
     const grouping = props.features?.grouping;
-    transientUiAtomRef.current = Atom.make({
+    return Atom.make({
       ...transientUiFromState(DEFAULT_UI_STATE),
       grouping: grouping && grouping.initial ? grouping.initial : []
     });
-  }
-  const [transientUiState, setTransientUiState] = useAtom(transientUiAtomRef.current);
+  });
+  const [transientUiState, setTransientUiState] = useAtom(transientUiAtom);
   const uiState = useMemo(() => ({ ...persistedUiState, ...transientUiState }), [persistedUiState, transientUiState]);
   const setUiState = useCallback((state) => {
     setPersistedUiState(persistedUiFromState(state));
     setTransientUiState(transientUiFromState(state));
   }, [setPersistedUiState, setTransientUiState]);
   const validatedConfig = resolveConfig(props, (state) => setUiState(state));
-  const atomRef = useRef(null);
-  if (!atomRef.current) {
+  const [tableAtom] = useState(() => {
     const initial = {
       rowData: props.rowData,
       columnDefs: props.columnDefs,
@@ -2820,12 +2867,11 @@ var HydratedDataTable = ({
       state: initialPublicState(props, uiState),
       controlledState: props.state
     };
-    atomRef.current = Atom.make({
+    return Atom.make({
       ...initial,
       model: buildDataTableModel(initial)
     });
-  }
-  const tableAtom = atomRef.current;
+  });
   const setStore = useAtomSet(tableAtom);
   useLayoutEffect(() => {
     setStore((store) => {
@@ -2886,20 +2932,19 @@ var HydratedDataTable = ({
 };
 var DataTable = (props) => {
   const locale = useKrakstackLocale3(props.locale);
-  const persistedUiAtomRef = useRef(null);
-  if (!persistedUiAtomRef.current) {
+  const [persistedUiAtom] = useState(() => {
     const pathname = globalThis.window?.location.pathname ?? "/";
     const columnIds = normalizeDataTableColumns(props.columnDefs).map(({ id }) => id).join(",");
     const viewCapability = props.features?.gallery ? "gallery" : "table";
-    persistedUiAtomRef.current = Atom.kvs({
+    return Atom.kvs({
       mode: "async",
       runtime: dataTableStorageRuntime,
       key: `data-table:${pathname}:${columnIds}:${viewCapability}:ui`,
       schema: DataTablePersistedUiStateSchema,
       defaultValue: () => persistedUiFromState(DEFAULT_UI_STATE)
     });
-  }
-  const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtomRef.current);
+  });
+  const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtom);
   if (!AsyncResult.isSuccess(persistedUiResult) || AsyncResult.isWaiting(persistedUiResult)) {
     return /* @__PURE__ */ jsx14("div", {
       "aria-busy": "true",
@@ -3139,7 +3184,7 @@ var DataTableListMenu = ({
                       event.stopPropagation();
                       action.onClick(item);
                     },
-                    variant: action.variant,
+                    variant: action.variant ?? "default",
                     children: [
                       action.icon,
                       action.name

package/dist/components/ui/google-map.d.ts

@@ -22,6 +22,7 @@ export type GoogleMapMessages = {
     errorBody: string;
     zoomIn: string;
     zoomOut: string;
+    showArea: string;
 };
 export type GoogleMapMessageTranslations = Partial<Record<string, Partial<GoogleMapMessages>>>;
 export type GoogleMapProps = {
@@ -32,6 +33,8 @@ export type GoogleMapProps = {
     radius?: GoogleMapRadiusOptions | undefined;
     interactive?: boolean | undefined;
     zoomControls?: boolean | undefined;
+    fitRadius?: boolean | undefined;
+    fitPadding?: number | undefined;
     minZoom?: number | undefined;
     maxZoom?: number | undefined;
     className?: string | undefined;
@@ -55,11 +58,18 @@ type GoogleMapOptions = {
     zoomControl: boolean;
 };
 type GoogleMapInstance = {
+    fitBounds: (bounds: GoogleMapBounds, padding: number) => void;
     getZoom: () => number | undefined;
     setCenter: (center: GoogleMapPoint) => void;
     setOptions: (options: Partial<GoogleMapOptions>) => void;
     setZoom: (zoom: number) => void;
 };
+type GoogleMapBounds = {
+    north: number;
+    south: number;
+    east: number;
+    west: number;
+};
 type GoogleMarkerInstance = {
     setIcon: (icon?: string) => void;
     setMap: (map: GoogleMapInstance | null) => void;
@@ -67,6 +77,9 @@ type GoogleMarkerInstance = {
 };
 type GoogleCircleStyleOptions = Omit<GoogleMapRadiusOptions, "radiusMeters">;
 type GoogleCircleInstance = {
+    getBounds: () => {
+        toJSON: () => GoogleMapBounds;
+    } | undefined;
     setCenter: (center: GoogleMapPoint) => void;
     setMap: (map: GoogleMapInstance | null) => void;
     setOptions: (options: GoogleCircleStyleOptions) => void;
@@ -96,5 +109,5 @@ export type GoogleMapsApi = {
         };
     };
 };
-export declare function GoogleMap({ apiKey, center, zoom, marker, radius, interactive, zoomControls, minZoom, maxZoom, className, messages: messageOverrides, locale: localeOverride, }: GoogleMapProps): import("react").JSX.Element;
+export declare function GoogleMap({ apiKey, center, zoom, marker, radius, interactive, zoomControls, fitRadius, fitPadding, minZoom, maxZoom, className, messages: messageOverrides, locale: localeOverride, }: GoogleMapProps): import("react").JSX.Element;
 export {};