# selfstore-storage
Source: https://selfstore.dev/docs/widget-storage

One element for the whole storage journey. Assign the store and it decides what to show - the first-run question, or the panel once there is a home.

The whole storage journey, in one element. Most apps need nothing else.

```html
<selfstore-storage></selfstore-storage>
```

```js
const store = await selfstore('app', { drive: { clientId } });
document.querySelector('selfstore-storage').store = store;
```

That is the integration. Everything else is derived from the store: which
destinations to offer, which backup to propose reopening, who holds it.

## What it decides for you

It composes two elements you can still mount separately:

- before there is a durable home, the [gate](https://selfstore.dev/docs/widget-gate) - the first-run
  question, which only appears when the engine says a destination is missing;
- once there is one, the [destination panel](https://selfstore.dev/docs/widget-destination) - where
  it saves, when it last wrote, and how to change it.

**The choice between them follows the engine's own status**, the same signal the
gate uses to decide whether to be on screen. That is the part worth having: the
assembly is where the mistakes were - showing the gate while the store was still
loading, building destination lists by hand from a session the store already
had, deriving a "reopen my backup" card from data the library was already
holding. An app that mounts this element cannot make any of them.

## Properties

| Property | Type | Notes |
| --- | --- | --- |
| `store` | `StoreLike \| null` | The only one that is required. |
| `targets` | `ConnectTargets \| null` | Override the destinations. Derived from the store when left alone. |
| `manager` | `BackupsManager \| null` | Adds the named-backups panel ([backups](https://selfstore.dev/docs/widget-backups)). |
| `icons` | `Partial<Record<ConnectKind, string>>` | An image per destination. |
| `confirmAction` | `(a: DestinationAction) => boolean \| Promise<boolean>` | Veto before detaching. |
| `deferrable` | `boolean` | Whether the first-run screen offers a way out. |
| `recommended` | `ConnectKind \| null` | Badge one destination. Also an attribute. |

## When to mount the pieces instead

Reach for the individual elements when your app puts them in different places -
the gate on a first-run route, the panel inside a settings page - or when you
need `::part()` on the connect journey, which the composed version cannot expose
(see [styling](https://selfstore.dev/docs/widgets-styling)).

Everything the pieces accept, they still accept. This element adds a decision,
not a restriction.

Map of this site for a model: https://selfstore.dev/llms.txt
Every page in one file: https://selfstore.dev/llms-full.txt