Quick Start

This page shows the smallest shape that still matches how the package is actually built.

What you need on a real screen

At minimum, a Drive screen has four parts:

1. server procedures to read and mutate nodes
2. client query state that resolves queryData and pagination strategy
3. a provider that owns namespace, permission, selection, and view state
4. a provider-specific view wrapper that binds your data into grid/list rendering

Minimal local integration

import "@tulip-systems/drive/styles.css";

import {
  LocalDriveContent,
  LocalDriveProvider,
  LocalDriveToolbar,
  LocalDriveToolbarTools,
  LocalDriveView,
  LocalDriveViewProvider,
  LocalDriveViewSwitcher,
} from "@tulip-systems/drive/local/client";

export function FilesScreen() {
  const queryData = [];
  const strategy = {} as never;

  return (
    <LocalDriveProvider
      namespace="media"
      permission="files.read"
      meta={{ title: "Media Library" }}
      initialView="grid"
    >
      <LocalDriveViewProvider queryData={queryData} strategy={strategy}>
        <LocalDriveContent>
          <LocalDriveToolbar>
            <div />
            <LocalDriveToolbarTools>
              <LocalDriveViewSwitcher />
            </LocalDriveToolbarTools>
          </LocalDriveToolbar>

          <LocalDriveView />
        </LocalDriveContent>
      </LocalDriveViewProvider>
    </LocalDriveProvider>
  );
}

Why the extra LocalDriveViewProvider exists

LocalDriveProvider manages application state like:

• namespace
• permission gate
• view mode cookie
• drag and drop moves
• upload-zone context
• selection context

LocalDriveViewProvider is a separate layer because it binds actual query results and table state:

• queryData
• strategy
• custom columns
• columnVisibility
• node and bulk commands

This split is useful because your page can change data and list strategy without rethinking the provider shell.

What to wire next

After this shell works, add:

1. real server procedures by implementing localDriveRouterContract or googleDriveRouterContract
2. a query strategy that supports list/grid pagination
3. toolbar commands such as create folder and upload
4. file-open behavior for local URLs or Google webViewLink