@dereekb/dbx-form 13.16.0 → 13.18.0

package/types/dereekb-dbx-form-mapbox.d.ts

@@ -1,161 +1,16 @@
-import { LabeledBaseFieldConfig, DescriptionFieldConfig, FieldConfig } from '@dereekb/dbx-form';
-import * as i2 from '@ngx-formly/core';
-import { FormlyFieldProps, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
-import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, Injector, InputSignal, Signal } from '@angular/core';
-import { AbstractControl, FormGroup, FormControl } from '@angular/forms';
+import { DynamicText, FieldMeta, ValidationMessages, BaseValueField } from '@ng-forge/dynamic-forms';
+import { Milliseconds, LatLngPointFunctionConfig, Maybe, LatLngPointFunction, LatLngStringFunction, LatLngPoint, ZoomLevel } from '@dereekb/util';
 import { CompactContextStore } from '@dereekb/dbx-web';
-import { FieldType } from '@ngx-formly/material';
-import { Observable, BehaviorSubject } from 'rxjs';
+import * as i0 from '@angular/core';
+import { InputSignal, Signal, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
 import { ObservableFactoryWithRequiredInput } from '@dereekb/rxjs';
-import { Milliseconds, LatLngPointFunctionConfig, Maybe, LatLngPoint, LatLngPointFunction, LatLngStringFunction, ZoomLevel } from '@dereekb/util';
 import { Marker } from 'mapbox-gl';
-import { DbxMapboxMarkerDisplayConfig, MapboxZoomLevel, DbxMapboxInjectionStore, DbxMapboxMapStore, DbxMapboxMarker, DbxMapboxService } from '@dereekb/dbx-web/mapbox';
-import { DynamicText, FieldMeta, ValidationMessages, BaseValueField } from '@ng-forge/dynamic-forms';
+import { DbxMapboxMarkerDisplayConfig, DbxMapboxInjectionStore, DbxMapboxMapStore, MapboxZoomLevel, DbxMapboxMarker, DbxMapboxService } from '@dereekb/dbx-web/mapbox';
 import { FieldTree } from '@angular/forms/signals';
+import { FormControl } from '@angular/forms';
 import { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
 
-declare const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY = "DbxFormMapboxLatLngFieldComponent";
-declare const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG: DbxMapboxMarkerDisplayConfig;
-interface DbxFormMapboxLatLngComponentFieldProps extends FormlyFieldProps {
-    /**
-     * (Optional) Whether or not the show the map. If the map is not shown, relies on the center of the parent map to determine position.
-     *
-     * Defaults to true.
-     *
-     * Cases where this would be set false is if another map is being used.
-     */
-    readonly showMap?: boolean;
-    /**
-     * Whether or not to display the center button. Is set to false if selectLocationOnMapDrag is true.
-     */
-    readonly showCenterButton?: boolean;
-    /**
-     * Whether or not to set the center of the map on the location when set. Defaults to true.
-     */
-    readonly setCenterOnLocationSet?: boolean;
-    /**
-     * Whether or not to enable dragging the map to select the location. Defaults to true.
-     *
-     * Only applicable when showMap is false.
-     */
-    readonly selectLocationOnMapDrag?: boolean;
-    /**
-     * Whether or not to enable clicking the map to select the location. Defaults to false.
-     *
-     * Only applicable when showMap is false.
-     */
-    readonly selectLocationOnMapClick?: boolean;
-    /**
-     * (Optional) Zoom to start the map at. Ignored if the showMap is false.
-     */
-    readonly zoom?: MapboxZoomLevel;
-    /**
-     * Time until recentering on the marker. If the time is 0 then the recentering is disabled.
-     */
-    readonly recenterTime?: Milliseconds;
-    readonly latLngConfig?: LatLngPointFunctionConfig;
-    /**
-     * Unique injection key.
-     *
-     * If not defined, the default key will be used.
-     *
-     * If false is passed, the marker will not be configured in the injection store.
-     */
-    readonly mapInjectionKey?: Maybe<string | false>;
-    /**
-     * Marker configuration or factory. If false is passed, the marker will not be displayed.
-     */
-    readonly markerConfig?: false | ObservableFactoryWithRequiredInput<DbxMapboxMarkerDisplayConfig | false, DbxFormMapboxLatLngFieldComponent>;
-}
-/**
- * @deprecated Use DbxForgeMapboxLatLngFieldComponent instead.
- */
-declare class DbxFormMapboxLatLngFieldComponent<T extends DbxFormMapboxLatLngComponentFieldProps = DbxFormMapboxLatLngComponentFieldProps> extends FieldType<FieldTypeConfig<T>> implements OnInit, OnDestroy {
-    private readonly _geolocationService;
-    readonly compact: CompactContextStore | null;
-    readonly dbxMapboxInjectionStore: DbxMapboxInjectionStore | null;
-    readonly dbxMapboxMapStore: DbxMapboxMapStore;
-    readonly injector: Injector;
-    private readonly _sub;
-    private readonly _geoSub;
-    private readonly _centerSub;
-    private readonly _flyToCenterSub;
-    private readonly _clickSub;
-    private readonly _zoom;
-    private readonly _markerConfig;
-    private _latLngStringFunction;
-    private _latLngPointFunction;
-    readonly compactClass$: Observable<string>;
-    private readonly _useCurrentLocationDisabled;
-    readonly useCurrentLocationDisabled$: Observable<boolean>;
-    private readonly _formControlObs;
-    readonly formControl$: Observable<AbstractControl<any, any, any>>;
-    readonly value$: Observable<any>;
-    readonly latLng$: Observable<LatLngPoint>;
-    readonly nonZeroLatLng$: Observable<LatLngPoint>;
-    readonly zoom$: Observable<number>;
-    readonly markerConfig$: Observable<false | DbxMapboxMarkerDisplayConfig>;
-    readonly useCurrentLocationDisabledSignal: i0.Signal<boolean>;
-    readonly compactClassSignal: i0.Signal<string>;
-    readonly latLngSignal: i0.Signal<LatLngPoint>;
-    get zoom(): MapboxZoomLevel;
-    get formGroupName(): string;
-    get formGroup(): FormGroup;
-    get label(): Maybe<string>;
-    get description(): Maybe<string>;
-    get isReadonlyOrDisabled(): boolean;
-    get showMap(): boolean;
-    get selectLocationOnMapDrag(): boolean;
-    get selectLocationOnMapClick(): boolean;
-    get setCenterOnLocationSet(): boolean;
-    get showCenterButton(): boolean;
-    get recenterTime(): Milliseconds;
-    get useCurrentLocationDisabled(): BehaviorSubject<boolean>;
-    get mapInjectionKey(): Maybe<string | false>;
-    get markerConfig(): false | ObservableFactoryWithRequiredInput<false | DbxMapboxMarkerDisplayConfig, DbxFormMapboxLatLngFieldComponent<DbxFormMapboxLatLngComponentFieldProps>> | undefined;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    flyToMarker(): void;
-    useCurrentLocation(): void;
-    onMarkerDragEnd(marker: Marker): void;
-    setValue(latLng?: Maybe<LatLngPoint>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxLatLngFieldComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormMapboxLatLngFieldComponent<any>, "ng-component", never, {}, {}, never, never, true, never>;
-}
-
-/**
- * @deprecated Use DbxForgeMapboxLatLngFieldConfig instead.
- */
-interface MapboxLatLngFieldConfig extends Omit<LabeledBaseFieldConfig, 'key'>, DescriptionFieldConfig, Partial<FieldConfig>, Pick<DbxFormMapboxLatLngComponentFieldProps, 'showMap' | 'zoom' | 'latLngConfig' | 'recenterTime' | 'setCenterOnLocationSet' | 'showCenterButton' | 'selectLocationOnMapDrag' | 'selectLocationOnMapClick' | 'markerConfig'> {
-}
-/**
- * Creates a Formly field configuration for a Mapbox-powered latitude/longitude picker with optional map display.
- *
- * @param config - Optional field configuration overrides.
- * @returns A validated Formly field configuration for the Mapbox lat/lng picker.
- *
- * @deprecated Use dbxForgeMapboxLatLngField() from the forge API instead.
- */
-declare function mapboxLatLngField(config?: MapboxLatLngFieldConfig): FormlyFieldConfig;
-
-declare class DbxFormMapboxLatLngFieldMarkerComponent {
-    readonly fieldComponent: DbxFormMapboxLatLngFieldComponent<any>;
-    readonly marker$: Observable<Maybe<DbxMapboxMarker>>;
-    readonly markerSignal: i0.Signal<Maybe<DbxMapboxMarker>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxLatLngFieldMarkerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormMapboxLatLngFieldMarkerComponent, "ng-component", never, {}, {}, never, never, true, never>;
-}
-
-/**
- * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
- */
-declare class DbxFormMapboxLatLngModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxLatLngModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormMapboxLatLngModule, never, [typeof DbxFormMapboxLatLngFieldComponent, typeof i2.FormlyModule], [typeof DbxFormMapboxLatLngFieldComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormMapboxLatLngModule>;
-}
-
 declare const DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY = "DbxForgeMapboxLatLngFieldComponent";
 declare const DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG: DbxMapboxMarkerDisplayConfig;
 /**
@@ -302,93 +157,6 @@ declare class DbxForgeMapboxLatLngFieldMarkerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxForgeMapboxLatLngFieldMarkerComponent, "ng-component", never, {}, {}, never, never, true, never>;
 }
 
-interface DbxFormMapboxZoomComponentFieldProps extends Omit<FormlyFieldProps, 'min' | 'max'> {
-    /**
-     * (Optional) Whether or not the show the map. Cases where this would be set false is if another map is being used.
-     *
-     * Defaults to true.
-     */
-    readonly showMap?: boolean;
-    /**
-     * Default center
-     */
-    readonly center?: LatLngPoint;
-    /**
-     * Whether or not to lock the map itself to the min and max zoom levels.
-     */
-    readonly lockMapToZoomLevels?: boolean;
-    /**
-     * Min zoom level allowed
-     */
-    readonly minZoom?: MapboxZoomLevel;
-    /**
-     * Max zoom level allowed.
-     */
-    readonly maxZoom?: MapboxZoomLevel;
-    /**
-     * Step size when using arrow keys.
-     */
-    readonly zoomStep?: number;
-}
-/**
- * @deprecated Use DbxForgeMapboxZoomFieldComponent instead.
- */
-declare class DbxFormMapboxZoomFieldComponent<T extends DbxFormMapboxZoomComponentFieldProps = DbxFormMapboxZoomComponentFieldProps> extends FieldType<FieldTypeConfig<T>> implements OnInit, OnDestroy {
-    readonly compact: CompactContextStore | null;
-    readonly dbxMapboxService: DbxMapboxService;
-    readonly dbxMapboxMapStore: DbxMapboxMapStore;
-    private _undoZoomLimit;
-    readonly compactClass$: Observable<string>;
-    readonly compactClassSignal: i0.Signal<string>;
-    private readonly _sub;
-    private readonly _center;
-    private readonly _formControlObs;
-    readonly formControl$: Observable<AbstractControl<any, any, any>>;
-    readonly value$: Observable<any>;
-    readonly zoom$: Observable<MapboxZoomLevel>;
-    readonly center$: Observable<LatLngPoint>;
-    get center(): LatLngPoint;
-    get formGroupName(): string;
-    get formGroup(): FormGroup;
-    get label(): Maybe<string>;
-    get description(): Maybe<string>;
-    get isReadonlyOrDisabled(): boolean;
-    get showMap(): boolean;
-    get lockMapToZoomLevels(): boolean;
-    get minZoom(): MapboxZoomLevel;
-    get maxZoom(): MapboxZoomLevel;
-    get zoomStep(): number;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    setValue(zoom?: Maybe<ZoomLevel>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxZoomFieldComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormMapboxZoomFieldComponent<any>, "ng-component", never, {}, {}, never, never, true, never>;
-}
-
-/**
- * @deprecated Use DbxForgeMapboxZoomFieldConfig instead.
- */
-interface MapboxZoomFieldConfig extends Omit<LabeledBaseFieldConfig, 'key'>, DescriptionFieldConfig, Partial<FieldConfig>, Pick<DbxFormMapboxZoomComponentFieldProps, 'showMap' | 'center' | 'minZoom' | 'maxZoom' | 'zoomStep'> {
-}
-/**
- * Creates a Formly field configuration for a Mapbox-powered zoom level picker with optional map preview.
- *
- * @param config - Optional field configuration overrides.
- * @returns A validated Formly field configuration for the Mapbox zoom picker.
- *
- * @deprecated Use dbxForgeMapboxZoomField() from the forge API instead.
- */
-declare function mapboxZoomField(config?: MapboxZoomFieldConfig): FormlyFieldConfig;
-
-/**
- * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
- */
-declare class DbxFormMapboxZoomModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxZoomModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormMapboxZoomModule, never, [typeof DbxFormMapboxZoomFieldComponent, typeof i2.FormlyModule], [typeof DbxFormMapboxZoomFieldComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormMapboxZoomModule>;
-}
-
 /**
  * Custom props for the forge mapbox zoom field.
  */
@@ -497,15 +265,6 @@ interface DbxForgeMapboxZoomFieldConfig {
  */
 declare function dbxForgeMapboxZoomField(config?: DbxForgeMapboxZoomFieldConfig): DbxForgeMapboxZoomFieldDef;
 
-/**
- * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
- */
-declare class DbxFormMapboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormMapboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormMapboxModule, never, never, [typeof DbxFormMapboxLatLngModule, typeof DbxFormMapboxZoomModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormMapboxModule>;
-}
-
 /**
  * All custom dbx-form/mapbox forge field type definitions.
  */
@@ -522,5 +281,5 @@ declare function provideDbxForgeMapboxFieldDeclarations(): i0.EnvironmentProvide
     __formValue?: unknown;
 };
 
-export { DBX_FORGE_MAPBOX_FIELD_TYPES, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG, DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG, DbxForgeMapboxLatLngFieldComponent, DbxForgeMapboxLatLngFieldMarkerComponent, DbxForgeMapboxZoomFieldComponent, DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent, DbxFormMapboxLatLngModule, DbxFormMapboxModule, DbxFormMapboxZoomFieldComponent, DbxFormMapboxZoomModule, FORGE_MAPBOX_LATLNG_FIELD_TYPE, FORGE_MAPBOX_ZOOM_FIELD_TYPE, dbxForgeMapboxLatLngField, dbxForgeMapboxZoomField, mapboxLatLngField, mapboxLatLngFieldMapper, mapboxZoomField, mapboxZoomFieldMapper, provideDbxForgeMapboxFieldDeclarations };
-export type { DbxForgeMapboxLatLngFieldComponentProps, DbxForgeMapboxLatLngFieldConfig, DbxForgeMapboxLatLngFieldDef, DbxForgeMapboxZoomFieldComponentProps, DbxForgeMapboxZoomFieldConfig, DbxForgeMapboxZoomFieldDef, DbxFormMapboxLatLngComponentFieldProps, DbxFormMapboxZoomComponentFieldProps, MapboxLatLngFieldConfig, MapboxZoomFieldConfig };
+export { DBX_FORGE_MAPBOX_FIELD_TYPES, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG, DbxForgeMapboxLatLngFieldComponent, DbxForgeMapboxLatLngFieldMarkerComponent, DbxForgeMapboxZoomFieldComponent, FORGE_MAPBOX_LATLNG_FIELD_TYPE, FORGE_MAPBOX_ZOOM_FIELD_TYPE, dbxForgeMapboxLatLngField, dbxForgeMapboxZoomField, mapboxLatLngFieldMapper, mapboxZoomFieldMapper, provideDbxForgeMapboxFieldDeclarations };
+export type { DbxForgeMapboxLatLngFieldComponentProps, DbxForgeMapboxLatLngFieldConfig, DbxForgeMapboxLatLngFieldDef, DbxForgeMapboxZoomFieldComponentProps, DbxForgeMapboxZoomFieldConfig, DbxForgeMapboxZoomFieldDef };

package/types/dereekb-dbx-form-style-demo.d.ts

@@ -0,0 +1,195 @@
+import * as _dereekb_rxjs from '@dereekb/rxjs';
+import * as rxjs from 'rxjs';
+import * as i0 from '@angular/core';
+import { EnvironmentProviders } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { AbstractSyncForgeFormDirective } from '@dereekb/dbx-form';
+import { DbxStyleDemoControls, DbxStyleDemoStyleTemplateKey, DbxStyleDemoSectionId, DbxStyleDemoControlsService, DbxStyleDemoSectionGroup } from '@dereekb/dbx-web/style-demo';
+import { FormConfig } from '@ng-forge/dynamic-forms';
+import { AbstractPopoverDirective } from '@dereekb/dbx-web';
+
+/**
+ * Abstract base for the slim style-demo controls form components ({@link DbxFormStyleDemoPresetsComponent},
+ * {@link DbxFormStyleDemoSectionsComponent}).
+ *
+ * Keeps a single `pickablechipfield` form in two-way sync with the playground's {@link DbxStyleDemoControls} (read from
+ * the `controls` input). The controls UI lives in dbx-form because the pickable chip field is a `@dereekb/dbx-form`
+ * field, which `@dereekb/dbx-web` cannot import.
+ *
+ * Both sync directions are driven off the form's state stream so they survive the component being recreated each time
+ * the panel/popover reopens:
+ *
+ * - **Controls → form (seed):** {@link dbxFormSourceObservableFromStream} in `'reset'` mode re-pushes the controls
+ *   state into the form every time the form enters its RESET state. This covers the initial ready transition — which
+ *   only fires once the forge field delegate has registered — so the chips seed from the live service state even though the
+ *   delegate's `init` ignores the context's pending initial value. The `isSettingValue` guard filters the synchronous
+ *   reset feedback `setValue` produces, exactly as `DbxFormSourceDirective` documents.
+ * - **Form → controls (write-back):** only genuine user edits are applied. `setValue` marks the form pristine and
+ *   untouched, so every seed / reset / initialization emission is `pristine: true`; the pickable chip field marks its
+ *   control dirty on toggle, so a user edit is the only `pristine: false` emission. Filtering on that keeps init/reset
+ *   noise from ever wiping the live service state.
+ *
+ * This directive is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ *
+ * @typeParam V - The form value type (a subset of the controls state: enabled sections or active presets).
+ */
+declare abstract class AbstractDbxFormStyleDemoControlsFormDirective<V extends object> extends AbstractSyncForgeFormDirective<V> {
+    /**
+     * The playground control surface to keep the chip field in sync with.
+     */
+    readonly controls: i0.InputSignal<Maybe<DbxStyleDemoControls>>;
+    /**
+     * Guards the controls→form seed against the `setValue` → `resetForm` feedback loop: set before `setValue` and cleared
+     * on the next microtask, so the synchronous reset emission `setValue` triggers on the stream is filtered out.
+     */
+    private _isSettingValue;
+    /**
+     * Builds the form value from the controls service signals.
+     */
+    protected abstract readControlsValue(controls: DbxStyleDemoControls): V;
+    /**
+     * Diff-applies the form value to the controls service via its setters, writing only the deltas.
+     */
+    protected abstract applyValueToControls(controls: DbxStyleDemoControls, value: V): void;
+    /**
+     * The controls state as a form value, recomputed whenever the controls signals change.
+     */
+    private readonly _controlsValue$;
+    /**
+     * Controls → form: seed the form with the controls state on every RESET (see class docs).
+     */
+    protected readonly _seedFormSub: _dereekb_rxjs.SubscriptionObject<rxjs.Subscription>;
+    /**
+     * Form → controls: write back only genuine user edits (`pristine: false`), diff-applied as deltas (see class docs).
+     */
+    protected readonly _writeBackSub: _dereekb_rxjs.SubscriptionObject<rxjs.Subscription>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxFormStyleDemoControlsFormDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxFormStyleDemoControlsFormDirective<any>, never, never, { "controls": { "alias": "controls"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Form value for the {@link DbxFormStyleDemoPresetsComponent}: the keys of the active style-lever presets.
+ */
+interface DbxFormStyleDemoPresetsFormValue {
+    readonly presets: DbxStyleDemoStyleTemplateKey[];
+}
+/**
+ * Slim chip-field controls UI picking which style-lever presets are active, kept in two-way sync with the playground's
+ * {@link DbxStyleDemoControls}. Presets restyle the whole app, so this is what the global "Style Controls" detach panel
+ * renders.
+ *
+ * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo
+ * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+declare class DbxFormStyleDemoPresetsComponent extends AbstractDbxFormStyleDemoControlsFormDirective<DbxFormStyleDemoPresetsFormValue> {
+    readonly formConfig: FormConfig;
+    protected readControlsValue(controls: DbxStyleDemoControls): DbxFormStyleDemoPresetsFormValue;
+    protected applyValueToControls(controls: DbxStyleDemoControls, value: DbxFormStyleDemoPresetsFormValue): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleDemoPresetsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleDemoPresetsComponent, "dbx-form-style-demo-presets", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Form value for the {@link DbxFormStyleDemoSectionsComponent}: the ids of the enabled (visible) sections.
+ */
+interface DbxFormStyleDemoSectionsFormValue {
+    readonly sections: DbxStyleDemoSectionId[];
+}
+/**
+ * Slim chip-field controls UI picking which showcase sections are visible, kept in two-way sync with the playground's
+ * {@link DbxStyleDemoControls}. Sections only affect the `<dbx-style-demo>` playground page, so this renders inside a
+ * popover opened from the playground header rather than the global controls panel.
+ *
+ * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo
+ * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+declare class DbxFormStyleDemoSectionsComponent extends AbstractDbxFormStyleDemoControlsFormDirective<DbxFormStyleDemoSectionsFormValue> {
+    readonly formConfig: FormConfig;
+    protected readControlsValue(controls: DbxStyleDemoControls): DbxFormStyleDemoSectionsFormValue;
+    protected applyValueToControls(controls: DbxStyleDemoControls, value: DbxFormStyleDemoSectionsFormValue): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleDemoSectionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleDemoSectionsComponent, "dbx-form-style-demo-sections", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Popover that renders {@link DbxFormStyleDemoSectionsComponent} inside the shared popover chrome, registered as the
+ * style-demo sections component via `DBX_STYLE_DEMO_SECTIONS_COMPONENT` (see `provideDbxFormStyleDemo()`).
+ *
+ * `DbxStyleDemoControlsService` opens this through `DbxPopoverService`, anchored to the playground header's "Sections"
+ * button, because sections only affect the `<dbx-style-demo>` playground page (unlike presets, which restyle the whole
+ * app). `dbx-popover-scroll-content` gives the long sections list correct scrolling. The component reads the same
+ * {@link DbxStyleDemoControlsService} instance and forwards it to the sections component, which owns the chip field and
+ * the controls↔form sync.
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+declare class DbxFormStyleDemoSectionsPopoverComponent extends AbstractPopoverDirective {
+    readonly controlsService: DbxStyleDemoControlsService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleDemoSectionsPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleDemoSectionsPopoverComponent, "dbx-form-style-demo-sections-popover", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Detach panel that renders {@link DbxFormStyleDemoPresetsComponent} inside the shared detach chrome, registered as the
+ * style-demo controls component via `DBX_STYLE_DEMO_CONTROLS_COMPONENT` (see `provideDbxFormStyleDemo()`).
+ *
+ * `DbxStyleDemoControlsService` opens this through `DbxDetachService`, so the panel survives navigation and is available
+ * app-wide. It renders the presets chips (which restyle the whole app); sections (which only affect the playground page)
+ * live in their own popover opened from the playground header. The component reads the same
+ * {@link DbxStyleDemoControlsService} instance and forwards it to the presets component, which owns the chip field and
+ * the controls↔form sync. Scrolling within the fixed-height pane comes from `.dbx-detach-content-container`.
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+declare class DbxFormStyleDemoControlsDetachComponent {
+    readonly controlsService: DbxStyleDemoControlsService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleDemoControlsDetachComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleDemoControlsDetachComponent, "dbx-form-style-demo-controls-detach", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Style-demo section rendering a representative `<dbx-forge>` form (name, email, select, textarea, checkbox, toggle)
+ * so the form-field surfaces are visible in the playground. Fields paint from the `--mat-form-field-*` and surface
+ * tokens, so they respond live to the Shape and Surface levers and flip with light/dark.
+ *
+ * Requires the host app to register its forge field declarations (the demo app does so via
+ * `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-form-fields
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary A representative dbx-forge form (name, email, select, textarea, checkbox, toggle).
+ * @dbxDocsUiExampleRelated text, value-selection, checkbox
+ */
+declare class DbxFormStyleDemoFieldsSectionComponent extends AbstractSyncForgeFormDirective<object> {
+    readonly formConfig: FormConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleDemoFieldsSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleDemoFieldsSectionComponent, "dbx-form-style-demo-fields-section", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The `@dereekb/dbx-form/style-demo` section group.
+ */
+declare const DBX_FORM_STYLE_DEMO_SECTION_GROUP: DbxStyleDemoSectionGroup;
+/**
+ * Registers the `@dereekb/dbx-form/style-demo` sections with the `<dbx-style-demo>` playground, registers
+ * {@link DbxFormStyleDemoControlsDetachComponent} as the global style-demo controls (presets) detach panel, and registers
+ * {@link DbxFormStyleDemoSectionsPopoverComponent} as the style-demo sections popover opened from the playground header.
+ *
+ * The Form Fields section, the controls panel, and the sections popover all render `<dbx-forge>` forms, so the host app
+ * must register its forge field declarations (e.g. `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`) for them to render.
+ *
+ * Pair with `provideDbxStyleDemo()` (the shell from `@dereekb/dbx-web/style-demo`).
+ *
+ * @returns EnvironmentProviders contributing the form sections, the controls detach component, and the sections popover component.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+declare function provideDbxFormStyleDemo(): EnvironmentProviders;
+
+export { AbstractDbxFormStyleDemoControlsFormDirective, DBX_FORM_STYLE_DEMO_SECTION_GROUP, DbxFormStyleDemoControlsDetachComponent, DbxFormStyleDemoFieldsSectionComponent, DbxFormStyleDemoPresetsComponent, DbxFormStyleDemoSectionsComponent, DbxFormStyleDemoSectionsPopoverComponent, provideDbxFormStyleDemo };
+export type { DbxFormStyleDemoPresetsFormValue, DbxFormStyleDemoSectionsFormValue };