# All Docs Index

Canonical: https://socra.design/navigation/docs-index

The complete documentation home inside its shared reading shell.

Use DocsIndexPage to show starting points, all documentation, and product destinations from the same catalog that supplies navigation.

Status: partial. The specimen exercises the complete shared index and shell with fictional content. Host catalogs and service actions require consumer review.

Library: @socra/web-docs

## Anatomy

- Global property header and compact documentation header
- Full-width documentation search
- Get started entries with product marks
- Every product and category expanded
- Explore by product after a section divider
- Persistent desktop sidebar and shared footer

## States

- **Rest:** Every documentation section stays expanded without counts or disclosure controls.
- **Hover:** Shared link treatments identify available destinations.
- **Focus:** Keyboard users can open search and browse documentation destinations.
- **Pressed:** Search opens the shared dialog; document links open their pages.
- **Selected:** The index has no selected document; the article sidebar identifies the current page.
- **Disabled:** Unavailable destinations do not appear as enabled controls.
- **Loading:** The complete catalog is available from provider data without a second loading layout.
- **Error:** Search preserves the entered query and identifies when no documents match.

## Motion

The mobile global header hides down and returns up; the contextual header follows its visible edge. Desktop keeps one global header. Navigation overlays preserve reading position.

## Usage

- Use the same provider data for the index and navigation. New documentation then appears in both places.
- Let the reading shell own page spacing. Search, titles, and rows align without nested padding.

## Avoid

- Keep index sections permanently expanded. Readers can scan all documents without extra actions.
- Avoid a second index title or breadcrumb. The shell already identifies All Docs.

## Tokens

- `designTokens.color[mode].color.brand.primary`: Primary action role.
- `designTokens.color[mode].color.surface.secondary`: Working surface role.
- `designTokens.color[mode].color.content.primary`: Primary content role.
- `designTokens.spacing.role.contentGap`: Spacing relationship.
- `designTokens.shape.role.control`: Shape relationship.

## Example

```tsx
import type { ComponentProps } from 'react';
import { DocsIndexPage, DocsProvider, DocsShell, type DocsConfig } from '@socra/web-docs';
import '@socra/web-docs/styles.css';
import { SiteHeader } from '@socra/ui-web-landing';

// Render inside the host router and compatible shared theme providers.
// config supplies areas, pages, groups, and the host footer.
export function DocumentationHome({ config, index }: {
  config: DocsConfig;
  index: ComponentProps<typeof DocsIndexPage>;
}) {
  return (
    <>
      <SiteHeader brandLabel="Product" brandHref="/" hideOnScroll="mobile"
        items={[{ id: 'docs', label: 'Docs', href: '/docs' }]} />
      <DocsProvider config={{ ...config, externalHeader: true }}>
        <DocsShell><DocsIndexPage {...index} /></DocsShell>
      </DocsProvider>
    </>
  );
}
```