feat: add dashboard grid preview

change/@fluentui-react-dashboard-grid-preview-drag-preview-parity.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: render configured drag previews during internal pointer dragging",
+  "packageName": "@fluentui/react-dashboard-grid-preview",
+  "email": "ynagaraj@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dashboard-grid-preview-locked-nesting.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: complete dashboard serialization and interaction behavior",
+  "packageName": "@fluentui/react-dashboard-grid-preview",
+  "email": "ynagaraj@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dashboard-grid-preview-serialization-parity.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: preserve complete serializable dashboard grid options across save and load",
+  "packageName": "@fluentui/react-dashboard-grid-preview",
+  "email": "ynagaraj@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/babel-preset-storybook-full-source/src/modifyImports.test.ts

@@ -1,4 +1,5 @@
 import * as path from 'path';
+import { transformSync } from '@babel/core';
 import { modifyImportsPlugin as plugin, PLUGIN_NAME } from './modifyImports';
 import pluginTester from 'babel-plugin-tester';
 
@@ -25,4 +26,12 @@ describe(PLUGIN_NAME, () => {
     pluginName: PLUGIN_NAME,
     plugin,
   });
+
+  it('preserves package imports when import mappings are unavailable', () => {
+    const result = transformSync("import { Button } from '@fluentui/react-components';", {
+      plugins: [[plugin, {}]],
+    });
+
+    expect(result?.code).toContain("from '@fluentui/react-components'");
+  });
 });

packages/react-components/babel-preset-storybook-full-source/src/modifyImports.ts

@@ -17,7 +17,7 @@ export const PLUGIN_NAME = 'storybook-stories-modifyImports';
  */
 export function modifyImportsPlugin(babel: typeof Babel, options: BabelPluginOptions): Babel.PluginObj<PluginState> {
   const { types: t } = babel;
-  const { importMappings } = options;
+  const importMappings = options.importMappings ?? {};
   const cssModulesEnabled = Boolean(options.cssModules);
 
   return {

packages/react-components/react-dashboard-grid-preview/library/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../.babelrc-v9.json",
+  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
+}

packages/react-components/react-dashboard-grid-preview/library/.swcrc

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "baseUrl": ".",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

packages/react-components/react-dashboard-grid-preview/library/README.md

@@ -0,0 +1,47 @@
+# @fluentui/react-dashboard-grid-preview
+
+**Dashboard Grid components for [Fluent UI React](https://react.fluentui.dev/)**
+
+> **Preview package:** These APIs are not production-ready and may change before a stable release.
+
+The package provides a responsive dashboard layout, item composition, shared-provider transfer support, drag sources,
+and drop zones.
+
+## Public entry points
+
+- `@fluentui/react-dashboard-grid-preview` exposes the React components and hooks.
+- `@fluentui/react-dashboard-grid-preview/engine` exposes the React-free and DOM-free layout engine.
+- `@fluentui/react-dashboard-grid-preview/gridstack-compat` exposes explicit GridStack conversion and DOM adapters.
+
+Preview APIs must be imported directly from this package. They are not re-exported from
+`@fluentui/react-components/unstable`.
+
+## React ownership modes
+
+`DashboardGrid` supports three explicit, mutually exclusive ownership modes:
+
+- `defaultItems` for uncontrolled model ownership.
+- `items` with `onItemsChange` for controlled ownership.
+- Declarative `DashboardGridItem` children for React-owned descriptors and content.
+
+Declarative items remain registered for their mounted lifetime. A shared `DashboardGridProvider` preserves item
+content state and focus during cross-grid transfer, including dynamically created nested grids.
+
+## Layout and commands
+
+Screen layout uses a relative surface with absolutely positioned item and placeholder shells. SSR uses deterministic
+percentage geometry until client measurement resolves exact pixel geometry; print mode replaces screen positioning
+with flow or exact print projection.
+
+Use `imperativeRef` for commands such as querying, batching, fitting, compacting, changing columns, rotating,
+enabling/disabling, focusing, and refreshing handles. The ordinary forwarded ref always targets the root HTML
+element. The public command handle intentionally does not expose the mutable internal store.
+
+`save()` uses the highest-resolution cached layout by default; pass `columns` to save a specific responsive layout.
+Application `data` is included and React `content` is excluded by default. Use `includeData` and `includeContent` to
+override those defaults. The resulting versioned state can be passed directly to `load()`.
+
+Root and nested grids share the same options for columns, responsive layouts, row height, gap, row constraints,
+drag/resize disablement, external acceptance, removal zones, dynamic nesting, print behavior, and optional engine
+injection. Public callbacks follow Fluent's `(event, data)` convention and include committed item changes,
+drag/resize progress, content resizing, enablement, and final item drops.

packages/react-components/react-dashboard-grid-preview/library/bundle-isolation.config.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../../../tools/verify-bundle-isolation/schema.json",
+  "fixturesRoot": "./bundle-isolation",
+  "externals": [],
+  "forbiddenPackages": [
+    "@fluentui/keyboard-keys",
+    "@fluentui/react-context-selector",
+    "@fluentui/react-jsx-runtime",
+    "@fluentui/react-shared-contexts",
+    "@fluentui/react-tabster",
+    "@fluentui/react-theme",
+    "@fluentui/react-utilities",
+    "@griffel/*",
+    "react",
+    "react-dom",
+    "tabster",
+    "use-sync-external-store"
+  ],
+  "fixtures": {
+    "engine.fixture.js": {}
+  }
+}

packages/react-components/react-dashboard-grid-preview/library/bundle-isolation/engine.fixture.js

@@ -0,0 +1,7 @@
+import * as engine from '@fluentui/react-dashboard-grid-preview/engine';
+
+console.log(engine);
+
+export default {
+  name: '@fluentui/react-dashboard-grid-preview/engine',
+};

packages/react-components/react-dashboard-grid-preview/library/bundle-size/index.fixture.js

@@ -0,0 +1,7 @@
+import * as p from '@fluentui/react-dashboard-grid-preview';
+
+console.log(p);
+
+export default {
+  name: 'react-dashboard-grid-preview - package',
+};

packages/react-components/react-dashboard-grid-preview/library/config/api-extractor.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json",
+  "mainEntryPointFilePath": "<projectRoot>/../../../../../../dist/out-tsc/types/packages/react-components/<unscopedPackageName>/library/src/index.d.ts"
+}

packages/react-components/react-dashboard-grid-preview/library/config/tests.cjs

@@ -0,0 +1,3 @@
+/** Jest test setup file. */
+
+require('@testing-library/jest-dom');

packages/react-components/react-dashboard-grid-preview/library/eslint.config.cjs

@@ -0,0 +1,5 @@
+// @ts-check
+
+const rootConfig = require('../../../../eslint.config.js');
+
+module.exports = [...rootConfig];