@wordpress/widget-dashboard 0.1.1 → 0.3.1-next.v.202607070741.0

package/build-types/components/layout-settings/index.d.ts.map

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

package/build-types/components/layout-settings/layout-model-edit-field/index.d.ts

@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import type { DataFormControlProps } from '@wordpress/dataviews';
-/**
- * Internal dependencies
- */
-import type { WidgetGridSettings } from '../../../types';
-/**
- * Card-style picker for the layout model: each option (`grid`, `masonry`)
- * renders as a thumbnail card in a radio group. Wired as the `Edit` control
- * for the `model` field of the layout settings DataForm.
- *
- * @param {DataFormControlProps< WidgetGridSettings >} props DataForm control props.
- */
-export declare function LayoutModelEditField({ data, field, onChange }: DataFormControlProps<WidgetGridSettings>): React.ReactNode;
-//# sourceMappingURL=index.d.ts.map

package/build-types/components/layout-settings/layout-model-edit-field/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout-settings/layout-model-edit-field/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAMjE;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAqBzD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAE,EACrC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,EAAE,oBAAoB,CAAE,kBAAkB,CAAE,GAAI,KAAK,CAAC,SAAS,CAgD/D"}

package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-grid.d.ts

@@ -1,6 +0,0 @@
-interface GridThumbnailProps {
-    className?: string;
-}
-export declare function GridThumbnail({ className }: GridThumbnailProps): React.ReactNode;
-export {};
-//# sourceMappingURL=thumbnail-grid.d.ts.map

package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-grid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"thumbnail-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/layout-settings/layout-model-edit-field/thumbnail-grid.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAE,EAC9B,SAAS,EACT,EAAE,kBAAkB,GAAI,KAAK,CAAC,SAAS,CAgBvC"}

package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-masonry.d.ts

@@ -1,6 +0,0 @@
-interface MasonryThumbnailProps {
-    className?: string;
-}
-export declare function MasonryThumbnail({ className }: MasonryThumbnailProps): React.ReactNode;
-export {};
-//# sourceMappingURL=thumbnail-masonry.d.ts.map

package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-masonry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"thumbnail-masonry.d.ts","sourceRoot":"","sources":["../../../../src/components/layout-settings/layout-model-edit-field/thumbnail-masonry.tsx"],"names":[],"mappings":"AAKA,UAAU,qBAAqB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,SAAS,EACT,EAAE,qBAAqB,GAAI,KAAK,CAAC,SAAS,CAgB1C"}

package/build-types/components/layout-settings/layout-settings.d.ts

@@ -1,14 +0,0 @@
-/**
- * Modal side drawer for grid-level settings (layout model and row height),
- * mounted by the engine and shown while `layoutSettingsOpen` is set in the
- * shared UI context. Renders nothing when grid settings are not editable.
- *
- * Edits, including Reset, apply to the staging copy and preview live behind
- * the drawer. Save commits them; Cancel and any other dismissal (X, Escape)
- * revert them. Either way only grid settings change, so in-progress widget
- * layout edits survive and customize mode stays active.
- *
- * Tile gap is deliberately not exposed; spacing stays a design-system concern.
- */
-export declare function LayoutSettings(): React.ReactNode;
-//# sourceMappingURL=layout-settings.d.ts.map

package/build-types/components/layout-settings/layout-settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-settings.d.ts","sourceRoot":"","sources":["../../../src/components/layout-settings/layout-settings.tsx"],"names":[],"mappings":"AAiFA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,IAAI,KAAK,CAAC,SAAS,CA2HhD"}

package/build-types/components/widget-settings/utils/get-admin-menu-inset.d.ts

@@ -1,17 +0,0 @@
-/**
- * Width, in pixels, taken up by the WordPress admin menu
- * (`#adminmenuback`) on the inline-start edge of the viewport.
- *
- * The settings drawer portals to the document body and anchors to a
- * viewport edge, so a left-anchored drawer would slide over the fixed
- * admin menu. Offsetting the drawer by this value keeps the menu
- * uncovered (and reachable) instead of raising the drawer's z-index over
- * it.
- *
- * Defensive: returns `0` when the element is absent (outside wp-admin, or
- * in tests/Storybook), so the drawer just anchors to the viewport edge.
- *
- * @return {number} The admin menu's right edge in px, or `0`.
- */
-export declare function getAdminMenuInset(): number;
-//# sourceMappingURL=get-admin-menu-inset.d.ts.map

package/build-types/components/widget-settings/utils/get-admin-menu-inset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-admin-menu-inset.d.ts","sourceRoot":"","sources":["../../../../src/components/widget-settings/utils/get-admin-menu-inset.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C"}

package/build-types/components/widget-settings/widget-settings-toolbar.d.ts

@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import type { WidgetType } from '@wordpress/widget-primitives';
-import type { DashboardWidget } from '../../types';
-export interface WidgetSettingsToolbarProps {
-    /** The instance whose settings this toolbar configures. */
-    widget: DashboardWidget<unknown>;
-    /** The instance's widget type, for the trigger label and guard. */
-    widgetType: WidgetType;
-}
-/**
- * Normal-mode per-tile toolbar: the gear that opens the settings drawer. Lives
- * in the grid's `actionableArea` slot, so it shows for every `presentation`.
- * Returns `null` when the type has no attributes.
- *
- * @param {WidgetSettingsToolbarProps} props Component props.
- */
-export declare function WidgetSettingsToolbar({ widget, widgetType }: WidgetSettingsToolbarProps): React.ReactNode;
-//# sourceMappingURL=widget-settings-toolbar.d.ts.map

package/build-types/components/widget-settings/widget-settings-toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-settings-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/widget-settings/widget-settings-toolbar.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,WAAW,0BAA0B;IAC1C,2DAA2D;IAC3D,MAAM,EAAE,eAAe,CAAE,OAAO,CAAE,CAAC;IAEnC,mEAAmE;IACnE,UAAU,EAAE,UAAU,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAE,EACtC,MAAM,EACN,UAAU,EACV,EAAE,0BAA0B,GAAI,KAAK,CAAC,SAAS,CAa/C"}

package/build-types/components/widgets/widget-layout-toolbar.d.ts

@@ -1,14 +0,0 @@
-import type { DashboardWidget } from '../../types';
-export interface WidgetLayoutToolbarProps {
-    /** The instance this toolbar manages within the layout. */
-    widget: DashboardWidget<unknown>;
-}
-/**
- * Customize-mode per-tile toolbar: a width menu and removal, editing the
- * widget's place in the layout. Lives in the grid's `actionableArea` slot, so
- * it stays interactive while the card is `inert`.
- *
- * @param {WidgetLayoutToolbarProps} props Component props.
- */
-export declare function WidgetLayoutToolbar({ widget }: WidgetLayoutToolbarProps): React.ReactNode;
-//# sourceMappingURL=widget-layout-toolbar.d.ts.map

package/build-types/components/widgets/widget-layout-toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-layout-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/widget-layout-toolbar.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,aAAa,CAAC;AAStE,MAAM,WAAW,wBAAwB;IACxC,2DAA2D;IAC3D,MAAM,EAAE,eAAe,CAAE,OAAO,CAAE,CAAC;CACnC;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAE,EACpC,MAAM,EACN,EAAE,wBAAwB,GAAI,KAAK,CAAC,SAAS,CA6E7C"}

package/build-types/utils/grid-model-change/grid-model-change.d.ts

@@ -1,20 +0,0 @@
-import type { DashboardWidget, WidgetGridModel, WidgetGridSettings } from '../../types';
-export declare function getGridModel(settings: WidgetGridSettings): WidgetGridModel;
-type ComputeGridModelChangeProps = {
-    layout: DashboardWidget[];
-    gridSettings: WidgetGridSettings;
-    targetModel: WidgetGridModel;
-};
-type ComputeGridModelChangeResult = {
-    layout: DashboardWidget[];
-    gridSettings: WidgetGridSettings;
-} | null;
-/**
- * Computes the staged layout and grid settings after a layout-model change.
- *
- * @param {ComputeGridModelChangeProps} params Layout, current settings, and target model.
- * @return {ComputeGridModelChangeResult} Migrated layout and settings, or `null` when the model is unchanged.
- */
-export declare function computeGridModelChange({ layout, gridSettings, targetModel }: ComputeGridModelChangeProps): ComputeGridModelChangeResult;
-export {};
-//# sourceMappingURL=grid-model-change.d.ts.map

package/build-types/utils/grid-model-change/grid-model-change.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid-model-change.d.ts","sourceRoot":"","sources":["../../../src/utils/grid-model-change/grid-model-change.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,MAAM,aAAa,CAAC;AAGrB,wBAAgB,YAAY,CAAE,QAAQ,EAAE,kBAAkB,GAAI,eAAe,CAE5E;AAED,KAAK,2BAA2B,GAAG;IAClC,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,EAAE,kBAAkB,CAAC;IACjC,WAAW,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,KAAK,4BAA4B,GAAG;IACnC,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,EAAE,kBAAkB,CAAC;CACjC,GAAG,IAAI,CAAC;AAET;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,MAAM,EACN,YAAY,EACZ,WAAW,EACX,EAAE,2BAA2B,GAAI,4BAA4B,CAgB7D"}

package/build-types/utils/grid-model-change/index.d.ts

@@ -1,2 +0,0 @@
-export { computeGridModelChange, getGridModel } from './grid-model-change';
-//# sourceMappingURL=index.d.ts.map

package/build-types/utils/grid-model-change/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/grid-model-change/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/build-types/utils/migrate-layout/index.d.ts

@@ -1,2 +0,0 @@
-export { migrateLayout } from './migrate-layout';
-//# sourceMappingURL=index.d.ts.map

package/build-types/utils/migrate-layout/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/migrate-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build-types/utils/migrate-layout/migrate-layout.d.ts

@@ -1,36 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { DashboardWidget, WidgetGridModel } from '../../types';
-interface MigrationContext {
-    /**
-     * Column count of the currently-mounted grid surface. Used to
-     * resolve `'full'` widths to a concrete numeric span when going
-     * from the 2D grid model to masonry. When the surface is in
-     * responsive mode and the runtime column count is unknown,
-     * callers should pass a sensible fallback (e.g., the default of
-     * 6 used by `@wordpress/grid`).
-     */
-    columns: number;
-}
-/**
- * Migrates every widget's `placement` between grid models.
- *
- * The two storage shapes overlap on `width` and `order` but diverge
- * on the rest: 2D grid carries `height` and discriminated string
- * widths (`'fill'`/`'full'`), lanes carries `lane` and only numeric
- * widths. Each conversion loses information that the target model
- * cannot represent. The caller is responsible for surfacing the
- * result to the user in a way that lets them correct visually.
- *
- * When `from === to`, the input is returned unchanged.
- *
- * @param widgets Widgets to migrate.
- * @param from    Source model. `undefined` is treated as `'grid'`.
- * @param to      Target model.
- * @param context Information that depends on the live render (today
- *                only `columns`).
- */
-export declare function migrateLayout(widgets: DashboardWidget[], from: WidgetGridModel | undefined, to: WidgetGridModel, context?: Partial<MigrationContext>): DashboardWidget[];
-export {};
-//# sourceMappingURL=migrate-layout.d.ts.map

package/build-types/utils/migrate-layout/migrate-layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"migrate-layout.d.ts","sourceRoot":"","sources":["../../../src/utils/migrate-layout/migrate-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,eAAe,EAGf,eAAe,EACf,MAAM,aAAa,CAAC;AAErB,UAAU,gBAAgB;IACzB;;;;;;;OAOG;IACH,OAAO,EAAE,MAAM,CAAC;CAChB;AAkFD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAC5B,OAAO,EAAE,eAAe,EAAE,EAC1B,IAAI,EAAE,eAAe,GAAG,SAAS,EACjC,EAAE,EAAE,eAAe,EACnB,OAAO,GAAE,OAAO,CAAE,gBAAgB,CAAO,GACvC,eAAe,EAAE,CA8BnB"}

package/src/components/layout-settings/index.ts

@@ -1 +0,0 @@
-export { LayoutSettings } from './layout-settings';

package/src/components/layout-settings/layout-model-edit-field/index.tsx

@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import type { DataFormControlProps } from '@wordpress/dataviews';
-import { useCallback } from '@wordpress/element';
-/* eslint-disable @wordpress/use-recommended-components */
-import { Button, Fieldset, Stack, Text } from '@wordpress/ui';
-/* eslint-enable @wordpress/use-recommended-components */
-
-/**
- * Internal dependencies
- */
-import type { WidgetGridSettings } from '../../../types';
-import { GridThumbnail } from './thumbnail-grid';
-import { MasonryThumbnail } from './thumbnail-masonry';
-import styles from './style.module.css';
-
-interface ModelThumbnailProps {
-	model: string;
-	className?: string;
-}
-
-function ModelThumbnail( {
-	model,
-	className,
-}: ModelThumbnailProps ): React.ReactNode {
-	return model === 'masonry' ? (
-		<MasonryThumbnail className={ className } />
-	) : (
-		<GridThumbnail className={ className } />
-	);
-}
-
-/**
- * Card-style picker for the layout model: each option (`grid`, `masonry`)
- * renders as a thumbnail card in a radio group. Wired as the `Edit` control
- * for the `model` field of the layout settings DataForm.
- *
- * @param {DataFormControlProps< WidgetGridSettings >} props DataForm control props.
- */
-export function LayoutModelEditField( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< WidgetGridSettings > ): React.ReactNode {
-	const { getValue, setValue, elements = [] } = field;
-	const value = getValue( { item: data } );
-	const disabled = field.isDisabled( { item: data, field } );
-
-	const onSelect = useCallback(
-		( nextValue: string | number | undefined ) =>
-			onChange( setValue( { item: data, value: nextValue } ) ),
-		[ data, onChange, setValue ]
-	);
-
-	return (
-		<Fieldset.Root>
-			<Fieldset.Legend>{ field.label }</Fieldset.Legend>
-			<Stack direction="row" gap="md" role="radiogroup">
-				{ elements.map( ( option ) => {
-					const isSelected = value === option.value;
-
-					return (
-						<Button
-							key={ String( option.value ) }
-							variant="unstyled"
-							role="radio"
-							aria-checked={ isSelected }
-							disabled={ disabled }
-							className={ clsx( styles.option, {
-								[ styles.optionSelected ]: isSelected,
-							} ) }
-							onClick={ () => onSelect( option.value ) }
-						>
-							<Stack direction="column" gap="sm" align="stretch">
-								<ModelThumbnail
-									model={ String( option.value ) }
-									className={ styles.thumbnail }
-								/>
-								<Text>{ option.label }</Text>
-							</Stack>
-						</Button>
-					);
-				} ) }
-			</Stack>
-			{ typeof field.description === 'string' && (
-				<Fieldset.Description>
-					{ field.description }
-				</Fieldset.Description>
-			) }
-		</Fieldset.Root>
-	);
-}

package/src/components/layout-settings/layout-model-edit-field/style.module.css

@@ -1,34 +0,0 @@
-.option {
-	flex: 1;
-	padding: var(--wpds-dimension-padding-md);
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
-	border-radius: var(--wpds-border-radius-md);
-	background: transparent;
-	color: inherit;
-	cursor: var(--wpds-cursor-control);
-	text-align: center;
-	transition:
-		border-color var(--wpds-motion-duration-sm) var(--wpds-motion-easing-subtle),
-		background-color var(--wpds-motion-duration-sm) var(--wpds-motion-easing-subtle);
-}
-
-.option:hover {
-	border-color: var(--wpds-color-stroke-surface-neutral-strong);
-}
-
-.optionSelected,
-.optionSelected:hover {
-	border-color: var(--wpds-color-stroke-interactive-brand);
-	background-color: color-mix(in srgb, var(--wpds-color-background-surface-brand) 6%, transparent);
-}
-
-.thumbnail {
-	display: block;
-	inline-size: 100%;
-	block-size: auto;
-	color: var(--wpds-color-foreground-content-neutral-weak);
-}
-
-.optionSelected .thumbnail {
-	color: var(--wpds-color-foreground-interactive-brand);
-}

package/src/components/layout-settings/layout-model-edit-field/thumbnail-grid.tsx

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/primitives';
-
-interface GridThumbnailProps {
-	className?: string;
-}
-
-export function GridThumbnail( {
-	className,
-}: GridThumbnailProps ): React.ReactNode {
-	return (
-		<SVG
-			className={ className }
-			viewBox="0 0 40 24"
-			fill="currentColor"
-			aria-hidden="true"
-		>
-			<Rect x="2" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="14.5" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="2" y="12.75" width="11" height="10" rx="1.5" />
-			<Rect x="14.5" y="12.75" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="12.75" width="11" height="10" rx="1.5" />
-		</SVG>
-	);
-}

package/src/components/layout-settings/layout-model-edit-field/thumbnail-masonry.tsx

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/primitives';
-
-interface MasonryThumbnailProps {
-	className?: string;
-}
-
-export function MasonryThumbnail( {
-	className,
-}: MasonryThumbnailProps ): React.ReactNode {
-	return (
-		<SVG
-			className={ className }
-			viewBox="0 0 40 24"
-			fill="currentColor"
-			aria-hidden="true"
-		>
-			<Rect x="2" y="0.75" width="11" height="13" rx="1.5" />
-			<Rect x="2" y="15.25" width="11" height="8" rx="1.5" />
-			<Rect x="14.5" y="0.75" width="11" height="8" rx="1.5" />
-			<Rect x="14.5" y="10.25" width="11" height="13" rx="1.5" />
-			<Rect x="27" y="0.75" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="12.25" width="11" height="11" rx="1.5" />
-		</SVG>
-	);
-}

package/src/components/layout-settings/layout-settings.tsx

@@ -1,217 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DataForm } from '@wordpress/dataviews';
-import type { Field, Form } from '@wordpress/dataviews';
-import { useCallback, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button, Drawer } from '@wordpress/ui'; // eslint-disable-line @wordpress/use-recommended-components
-
-/**
- * Internal dependencies
- */
-import { useDashboardInternalContext } from '../../context/dashboard-context';
-import { useDashboardUIContext } from '../../context/ui-context';
-import { migrateLayout } from '../../utils/migrate-layout';
-import {
-	presetToRowHeight,
-	rowHeightToPreset,
-	type RowHeightPreset,
-} from '../../utils/row-height-presets';
-import {
-	WIDGET_DASHBOARD_COLUMN_COUNT,
-	type WidgetGridLayoutSettings,
-	type WidgetGridModel,
-	type WidgetGridSettings,
-} from '../../types';
-import { LayoutModelEditField } from './layout-model-edit-field';
-
-function getModel( item: WidgetGridSettings ): WidgetGridModel {
-	return item.model ?? 'grid';
-}
-
-function isMasonry( item: WidgetGridSettings ): boolean {
-	return getModel( item ) === 'masonry';
-}
-
-const fields: Field< WidgetGridSettings >[] = [
-	{
-		id: 'model',
-		type: 'text',
-		Edit: LayoutModelEditField,
-		label: __( 'Layout model' ),
-		description: __(
-			'Grid keeps every tile the same height. Masonry lets tiles flow at their own height.'
-		),
-		elements: [
-			{ value: 'grid', label: __( 'Standard grid' ) },
-			{ value: 'masonry', label: __( 'Masonry' ) },
-		],
-		getValue: ( { item } ) => getModel( item ),
-	},
-	{
-		id: 'rowHeight',
-		type: 'text',
-		Edit: 'toggleGroup',
-		label: __( 'Row height' ),
-		description: __( 'Height of each grid row.' ),
-		elements: [
-			{ value: 'small', label: __( 'Small' ) },
-			{ value: 'medium', label: __( 'Medium' ) },
-			{ value: 'large', label: __( 'Large' ) },
-		],
-		getValue: ( { item } ) => {
-			const rowHeight = ( item as WidgetGridLayoutSettings ).rowHeight;
-			if ( typeof rowHeight !== 'number' ) {
-				return 'medium';
-			}
-			return rowHeightToPreset( rowHeight );
-		},
-		setValue: ( { value } ) => ( {
-			rowHeight: presetToRowHeight( value as RowHeightPreset ),
-		} ),
-		isVisible: ( item ) => ! isMasonry( item ),
-	},
-];
-
-const form: Form = {
-	layout: { type: 'regular', labelPosition: 'top' },
-	fields: [ 'model', 'rowHeight' ],
-};
-
-/**
- * Modal side drawer for grid-level settings (layout model and row height),
- * mounted by the engine and shown while `layoutSettingsOpen` is set in the
- * shared UI context. Renders nothing when grid settings are not editable.
- *
- * Edits, including Reset, apply to the staging copy and preview live behind
- * the drawer. Save commits them; Cancel and any other dismissal (X, Escape)
- * revert them. Either way only grid settings change, so in-progress widget
- * layout edits survive and customize mode stays active.
- *
- * Tile gap is deliberately not exposed; spacing stays a design-system concern.
- */
-export function LayoutSettings(): React.ReactNode {
-	const {
-		gridSettings,
-		onGridSettingsChange,
-		layout,
-		onLayoutChange,
-		commit,
-		cancel: cancelStaging,
-		resetGridSettings,
-		hasUncommittedChanges,
-		canEditGridSettings,
-		editMode,
-	} = useDashboardInternalContext();
-
-	const { layoutSettingsOpen: open, setLayoutSettingsOpen: onOpenChange } =
-		useDashboardUIContext();
-
-	// Close when customize mode exits, whatever the exit path.
-	useEffect( () => {
-		if ( ! editMode && open ) {
-			onOpenChange( false );
-		}
-	}, [ editMode, open, onOpenChange ] );
-
-	const handleChange = useCallback(
-		( edits: Record< string, unknown > ) => {
-			const nextModel = edits.model as WidgetGridModel | undefined;
-			const currentModel = getModel( gridSettings );
-
-			if ( nextModel && nextModel !== currentModel ) {
-				const migrated = migrateLayout(
-					layout,
-					currentModel,
-					nextModel,
-					{ columns: WIDGET_DASHBOARD_COLUMN_COUNT }
-				);
-				onLayoutChange( migrated );
-			}
-
-			onGridSettingsChange( {
-				...gridSettings,
-				...edits,
-			} as WidgetGridSettings );
-		},
-		[ gridSettings, layout, onGridSettingsChange, onLayoutChange ]
-	);
-
-	const handleCancel = useCallback( () => {
-		cancelStaging( { exitEditMode: false, revertLayout: false } );
-		onOpenChange( false );
-	}, [ cancelStaging, onOpenChange ] );
-
-	const handleSave = useCallback( () => {
-		commit( { exitEditMode: false } );
-		onOpenChange( false );
-	}, [ commit, onOpenChange ] );
-
-	const handleOpenChange = useCallback(
-		( nextOpen: boolean ) => {
-			if ( ! nextOpen && open ) {
-				cancelStaging( { exitEditMode: false, revertLayout: false } );
-			}
-			onOpenChange( nextOpen );
-		},
-		[ open, cancelStaging, onOpenChange ]
-	);
-
-	if ( ! canEditGridSettings ) {
-		return null;
-	}
-
-	return (
-		<Drawer.Root
-			open={ open }
-			onOpenChange={ handleOpenChange }
-			swipeDirection="right"
-		>
-			<Drawer.Popup size="medium" style={ { marginTop: '32px' } }>
-				<Drawer.Header>
-					<Drawer.Title>{ __( 'Layout settings' ) }</Drawer.Title>
-					<Drawer.CloseIcon />
-				</Drawer.Header>
-
-				<Drawer.Content>
-					<DataForm
-						data={ gridSettings }
-						fields={ fields }
-						form={ form }
-						onChange={ handleChange }
-					/>
-				</Drawer.Content>
-
-				<Drawer.Footer>
-					<Button
-						variant="minimal"
-						tone="neutral"
-						size="compact"
-						onClick={ resetGridSettings }
-						style={ { marginInlineEnd: 'auto' } }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-					<Button
-						variant="minimal"
-						tone="brand"
-						size="compact"
-						onClick={ handleCancel }
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="solid"
-						tone="brand"
-						size="compact"
-						onClick={ handleSave }
-						disabled={ ! hasUncommittedChanges }
-					>
-						{ __( 'Save' ) }
-					</Button>
-				</Drawer.Footer>
-			</Drawer.Popup>
-		</Drawer.Root>
-	);
-}

package/src/components/widget-picker/widget-picker.module.css

@@ -1,11 +0,0 @@
-.preview {
-	width: 125%;
-	height: 125%;
-	overflow: hidden;
-	padding: 0;
-	transform: scale(0.8);
-	transform-origin: top left;
-	/* Let clicks and hovers reach the picker tile, not links inside the preview. */
-	pointer-events: none;
-	user-select: none;
-}