# Sistema de design Melt UI

## Prévia da interface do sistema de design Melt UI

Altere o alinhamento, mova o controle deslizante de espaçamento entre letras e alterne a grade; o pôster original é atualizado com base nas stores do construtor.

## Referência de design do sistema de design Melt UI

Construtores de store/action de @melt-ui/svelte 0.86.6 verificados e executados no Svelte 5.57.1. Este é o API documentado dos construtores, não o API separado da próxima geração, baseado em runes. O Melt é headless; todos os valores visuais --study-* abaixo são configurações originais do aplicativo, fornecidas por completo.

### Configuração visual semântica original

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --study-canvas | #f3f0e9 | Página externa. |
| --study-surface | #fffdf8 | Painel de controle. |
| --study-ink | #32352e | Texto principal. |
| --study-muted | #77796a | Texto de apoio. |
| --study-line | #dbdece | Limites da trilha e do painel. |
| --study-action | #486348 | Opção de rádio selecionada e intervalo ativo. |
| --study-on-action | #fff | Texto sobre a ação. |
| --study-focus | #8aa77c | Indicador de foco do teclado. |
| --study-poster | #e0e8bb | Papel original do cartaz. |
| --study-accent | #d68f57 | Forma orbital decorativa. |
### Escalas originais de espaçamento e tipografia

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --study-space-1 | 4px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| --study-space-2 | 8px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| --study-space-3 | 12px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| --study-space-4 | 16px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| --study-space-6 | 24px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| --study-space-8 | 32px | Espaçamentos nomeados do aplicativo; não são padrões do Melt. |
| Text family | system-ui, sans-serif | Sem dependência de fontes remotas. |
| Page title | 34px / 1.15; 29px narrow | Hierarquia original de títulos. |
| Poster title | clamp(28px,5.5vw,64px); 28px below 360px | Escala original de exibição responsiva. |
| Poster tracking | 0–8px, step 1; default 2px | Espaçamento entre letras controlado pelo controle deslizante. |
| Grid spacing | 24px × 24px | Guias decorativas ativadas pelo botão de alternância nativo. |
| Focus ring | 3px solid #8aa77c; 4px offset | Estilo explícito para focus-visible. |
### Contratos nativos dos construtores

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| createRadioGroup.defaultValue | left | Uma opção de alinhamento selecionada. |
| Radio orientation / loop | horizontal / true | A navegação pelas setas percorre o grupo horizontalmente e volta ao início. |
| createSlider.defaultValue | [2] | A store contém um array mesmo quando há apenas um controle deslizante. |
| Slider min / max / step | 0 / 8 / 1 | Espaçamento entre letras inteiro e limitado. |
| Slider elements.thumbs | Array-producing builder store | A versão 0.86.6 retorna controles deslizantes, não um único elemento de controle. |
| createSwitch.defaultChecked | true | As guias começam visíveis. |
| Builder attributes + action | {...$builder} use:builder | A sintaxe explícita funciona sem o pré-processador opcional do Melt. |
| Thumb attributes + action | {...thumb} use:thumb.action | Cada controle deslizante gerado recebe seus próprios atributos e ação. |
## Guia completo do sistema de design Melt UI

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## O Melt do sistema de design Melt UI associa comportamentos à marcação que você controla

### Melt associa comportamento à marcação que você controla

> Este exemplo usa o API de store/action de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider e createSwitch retornam construtores de elementos e stores de estado. Botões, spans e divs comuns recebem os atributos e as ações que os conectam ao comportamento dos controles nativos.

O pacote não fornece o papel verde, a tipografia do cartaz nem a geometria do painel. Essas escolhas são definidas na folha de estilos original completa. A documentação também aponta para um API mais recente, separado e baseado em runes; esta página identifica deliberadamente a versão verificada dos construtores, em vez de misturar exemplos incompatíveis das duas gerações.

Consulte a especificação de apoio

## O sistema de design Melt UI distribui atributos e instala ações em conjunto

### Combine atributos spread e actions

Um elemento precisa dos atributos e da ação do construtor. O exemplo usa formas como {...$alignRoot} use:alignRoot e {...$alignItem(value)} use:alignItem. Os atributos carregam funções, estado e posicionamento; a ação instala o comportamento interativo e a limpeza.

A sintaxe abreviada use:melt exige o pré-processador opcional do Melt. Sem ele, o ambiente de execução lança um erro específico, em vez de associar silenciosamente o construtor. O código corrigido usa sintaxe explícita em toda parte, portanto a configuração do Vite abaixo não omite uma dependência oculta de pré-processamento. Da mesma forma, cada controle deslizante espalha os atributos retornados e invoca thumb.action.

Consulte a especificação de apoio

## Defina no aplicativo o sistema visual headless do sistema de design Melt UI CSS

### Defina o sistema visual sem interface no CSS da aplicação

Os papéis --study-* distinguem a tela externa, a superfície de controle, o texto, o divisor, a ação, o foco, o papel do cartaz e o destaque decorativo. Os seis valores de espaçamento nomeados vão de quatro a trinta e dois pixels. São escolhas originais que tornam reproduzível esta composição específica, não um catálogo de tokens mantido pelo Melt.

Os botões de opção selecionados e o botão de alternância usam data-state=checked, enquanto as posições em linha retornadas pelo controle deslizante determinam a localização do controle e do intervalo selecionado. A folha de estilos acrescenta apenas a geometria e as cores. Substituir essas posições nativas por percentuais calculados manualmente duplicaria a lógica e poderia comprometer o suporte à orientação ou à direção.

Consulte a especificação de apoio

## Mantenha uma opção de alinhamento selecionada com a navegação nativa do grupo do sistema de design Melt UI

### Mantenha um alinhamento selecionado com a navegação nativa do grupo

createRadioGroup começa em left, com a orientação horizontal e o retorno cíclico ativados. Cada opção de rádio tem um valor estável: left, center ou right. O alinhamento do texto do cartaz lê diretamente o valor selecionado, portanto a navegação pelo teclado e a seleção com o ponteiro afetam a mesma composição visível.

O grupo recebe o rótulo acessível Text alignment. As três opções são controles de rádio nativos associados aos construtores, não botões comuns com classes alternadas manualmente. O estado selecionado se reflete tanto na semântica quanto no seletor data-state usado para preencher o elemento visual.

1. Escolha Center e confira o alinhamento do cartaz.

2. Foque o controle deslizante Letter spacing e pressione End para chegar a 8px.

3. Desative a grade de layout e salve a composição local resultante.

Consulte a especificação de apoio

## Trate o valor como um array mesmo com um único controle deslizante — sistema de design Melt UI

### Trate o valor como um array mesmo com apenas um controle deslizante

O controle deslizante começa com defaultValue:[2], não com um valor escalar. O construtor instalado da versão 0.86.6 expõe elements.thumbs, uma store que gera um array, e o modelo renderiza cada controle retornado. O cartaz lê $tracking[0] e aplica o valor como espaçamento entre letras em pixels.

Os limites vão de zero a oito, em incrementos de um. Home e End levam aos limites; as teclas de seta avançam conforme o incremento definido. Leia $tracking[0] para esta composição com um único controle deslizante e mantenha o modelo de array ao adicionar outro, em vez de introduzir um segundo estado escalar sem relação com o primeiro.

Consulte a especificação de apoio

## Mantenha um guia visual separado dos valores de design — sistema de design Melt UI

### Mantenha um guia visual separado dos valores de design

createSwitch começa ativado, e seu estado controla uma classe de guias no cartaz. Essa classe desenha dois gradientes de grade sutis e repetidos, com intervalos de vinte e quatro pixels. Ao desativá-la, os gradientes desaparecem sem alterar o alinhamento ou o espaçamento entre letras.

O rótulo visível Show layout grid é associado ao ID estável do botão de alternância. O movimento do controle usa uma transição CSS, com uma regra para movimento reduzido. A ilustração orbital decorativa tem aria-hidden e não é interativa; ela não interfere na semântica dos controles reais.

Consulte a especificação de apoio

## Coordene stores graváveis sem duplicar o estado dos controles — sistema de design Melt UI

### Coordene stores graváveis sem duplicar o estado dos controles

O alinhamento, o espaçamento entre letras e a visibilidade da grade continuam sendo as stores graváveis dos construtores. O cartaz renderizado lê essas stores diretamente: text-align usa o alinhamento, letter-spacing usa o primeiro valor do controle deslizante e uma classe CSS usa o valor selecionado do botão de alternância. Um modelo separado do aplicativo para essas mesmas três configurações criaria trabalho desnecessário de sincronização.

O estado salvo é derivado de uma assinatura desses valores. Qualquer alteração limpa a confirmação, e a redefinição grava novamente left, [2] e true nas stores. O array de um elemento é importante: atribuir o valor escalar 2 não corresponderia ao contrato de valor do controle deslizante, embora apenas um controle esteja visível.

Consulte a especificação de apoio

## Forneça a cada construtor seus atributos, sua ação e seu nome — sistema de design Melt UI

### Forneça a cada construtor seus atributos, sua ação e seu nome

O grupo de opções de rádio recebe o rótulo Text alignment, o controle deslizante faz referência ao texto visível Letter spacing e o botão de alternância é associado ao seu rótulo visível. Esses nomes devem estar nos elementos reais controlados pelos construtores, não em elementos decorativos ao redor.

A sintaxe explícita do modelo instala atributos e ações em conjunto. Para os controles deslizantes, o item retornado inclui sua ação; por isso, o loop distribui os atributos do controle e invoca thumb.action. Preserve a saída de posicionamento do construtor ao estilizar a trilha e o intervalo: ela descreve o estado numérico e a direção reais, enquanto a folha de estilos fornece a cor e a geometria.

- Confira o resultado computado real, não apenas o rótulo numérico.

- Mantenha os rótulos nos elementos nativos associados aos construtores.

- Respeite a preferência por movimento reduzido nas transições visuais personalizadas.

Consulte a especificação de apoio

## Use o Melt UI verificado dos construtores em um projeto Svelte comum — sistema de design API

### Use o construtor verificado API em um projeto Svelte comum

O componente completo usa assinaturas de stores do Svelte com $alignment, $tracking e $grid. O Svelte 5 pode compilar essa sintaxe estabelecida de componentes; a entrada usa a função mount atual. Não é necessária nenhuma biblioteca de ícones personalizada nem nenhum pacote de folha de estilos, pois toda a camada visual é fornecida acima.

A configuração padrão do Vite com Svelte abaixo fixa @melt-ui/svelte 0.86.6 e Svelte 5.57.1. Ela não instala o pré-processador do Melt porque o componente já usa a sintaxe explícita equivalente. Ao migrar para o pacote mais recente baseado em runes, reescreva intencionalmente o API, em vez de apenas alterar a versão da dependência.

Consulte a especificação de apoio

## Exemplos de componentes do sistema de design Melt UI

### Composição completa com construtores de store/action

createRadioGroup, createSlider e createSwitch associam semântica e comportamento nativos à marcação comum.

```
<script>
import {createRadioGroup,createSlider,createSwitch} from '@melt-ui/svelte';
const {elements:{root:alignRoot,item:alignItem},states:{value:alignment}}=createRadioGroup({defaultValue:'left',orientation:'horizontal',loop:true});
const {elements:{root:trackingRoot,range:trackingRange,thumbs},states:{value:tracking}}=createSlider({defaultValue:[2],min:0,max:8,step:1});
const {elements:{root:gridRoot},states:{checked:grid}}=createSwitch({defaultChecked:true});
let saved='';let previous='';
$: current=`${$alignment}|${$tracking[0]}|${$grid}`;
$: if(current!==previous){saved='';previous=current}
function save(){saved=`Saved locally: ${$alignment} aligned, ${$tracking[0]}px tracking, grid ${$grid?'on':'off'}.`}
function reset(){alignment.set('left');tracking.set([2]);grid.set(true);saved=''}
</script>
<main class="poster-shell"><header><p class="eyebrow">TYPE COMPOSITION · LIVE STUDY</p><h1>A small change. A different rhythm.</h1><p>Use native Melt UI builders to change the alignment, tracking and guide visibility of an original typographic poster.</p></header><div class="poster-layout"><section class="controls"><h2>Composition</h2><p class="control-label" id="alignment-label">Text alignment</p><div {...$alignRoot} use:alignRoot aria-labelledby="alignment-label" class="alignment">{#each ['left','center','right'] as value}<button {...$alignItem(value)} use:alignItem class="align-option">{value[0].toUpperCase()+value.slice(1)}</button>{/each}</div><div class="tracking-control"><p class="control-label" id="tracking-label">Letter spacing <strong>{$tracking[0]}px</strong></p><div {...$trackingRoot} use:trackingRoot class="slider"><div {...$trackingRange} use:trackingRange class="slider-range"></div>{#each $thumbs as thumb}<span {...thumb} use:thumb.action aria-labelledby="tracking-label" class="slider-thumb"></span>{/each}</div><div class="scale"><span>0px</span><span>8px</span></div></div><div class="grid-control"><label for="show-grid">Show layout grid</label><button id="show-grid" {...$gridRoot} use:gridRoot class="switch"><span></span></button></div><p class="hint">The grid is a visual aid. It does not change the poster’s text or spacing.</p><button class="primary" on:click={save} disabled={!!saved}>Save composition</button><button class="reset" on:click={reset}>Restore initial settings</button><p class="result" role="status">{saved||'This study changes only the local preview.'}</p></section><section class="poster" class:guides={$grid} style:text-align={$alignment} aria-label="Live typographic poster"><div class="poster-top"><span>TYPE / 2026</span><span>STUDY 04</span></div><div class="poster-orbit" aria-hidden="true"><i></i><b></b></div><div class="poster-title" style:letter-spacing={`${$tracking[0]}px`}><span>SPACE</span><span>TO</span><span>THINK.</span></div><div class="poster-bottom"><p>A pause between<br/>one idea and the next.</p><span>Original type study<br/>{$alignment} · {$tracking[0]}px</span></div></section></div></main>
```

Referência de código

- O valor do controle deslizante é um array; o cartaz lê o primeiro item.

- O código usa a distribuição explícita de atributos e ações, sem depender de um pré-processador não mencionado.

- O estado salvo expira quando qualquer store dos construtores é alterada.

### Estilos originais completos do cartaz e dos controles

Variáveis semânticas CSS, seletores data-state dos controles, indicadores de foco e cartaz tipográfico responsivo.

```
:root{--study-canvas:#f3f0e9;--study-surface:#fffdf8;--study-ink:#32352e;--study-muted:#77796a;--study-line:#dbdece;--study-action:#486348;--study-on-action:#fff;--study-focus:#8aa77c;--study-poster:#e0e8bb;--study-accent:#d68f57;--study-space-1:4px;--study-space-2:8px;--study-space-3:12px;--study-space-4:16px;--study-space-6:24px;--study-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:var(--study-canvas);color:var(--study-ink);font-family:system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--study-focus);outline-offset:4px}button:disabled{opacity:.45;cursor:default}.poster-shell{max-width:1060px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--study-muted)}h1{font-size:34px;line-height:1.15;max-width:650px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;color:var(--study-muted);max-width:620px}.poster-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.controls{padding:24px;background:var(--study-surface);border:1px solid var(--study-line);border-radius:14px;align-self:start;min-width:0}.controls h2{font-size:20px;margin:0 0 24px}.control-label{font-size:12px;font-weight:600;margin:0 0 12px}.control-label strong{float:right;color:var(--study-action)}.alignment{display:flex;border:1px solid var(--study-line);padding:4px;border-radius:8px;gap:4px}.align-option{border:0;flex:1;padding:9px 4px;border-radius:5px;font-size:12px;background:transparent;color:var(--study-muted)}.align-option[data-state=checked]{background:var(--study-action);color:var(--study-on-action)}.tracking-control{margin-top:26px}.slider{position:relative;height:24px;display:flex;align-items:center;touch-action:none}.slider:before{content:'';height:4px;background:var(--study-line);position:absolute;inset:10px 0;border-radius:4px}.slider-range{height:4px;position:absolute;background:var(--study-action);border-radius:4px}.slider-thumb{height:20px;width:20px;border:2px solid var(--study-action);background:white;border-radius:50%;cursor:grab}.scale{display:flex;justify-content:space-between;font-size:10px;color:var(--study-muted);margin-top:8px}.grid-control{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--study-line);padding-top:22px;margin-top:24px;font-size:13px}.switch{width:42px;height:24px;padding:3px;border:0;border-radius:999px;background:#b7beaf;flex-shrink:0}.switch span{display:block;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s}.switch[data-state=checked]{background:var(--study-action)}.switch[data-state=checked] span{transform:translateX(18px)}.hint{font-size:11px;line-height:1.7;color:var(--study-muted);margin:12px 0 24px}.primary{display:block;width:100%;padding:12px;border:0;border-radius:7px;background:var(--study-action);color:white;font-size:13px;font-weight:600}.reset{width:100%;padding:12px 0;border:0;background:transparent;color:var(--study-muted);font-size:11px}.result{font-size:11px;line-height:1.7;color:var(--study-muted);margin:8px 0 0}.poster{background:var(--study-poster);padding:28px;border-radius:14px;min-width:0;overflow:hidden;position:relative}.poster.guides{background-image:linear-gradient(#6680561c 1px,transparent 1px),linear-gradient(90deg,#6680561c 1px,transparent 1px);background-size:24px 24px}.poster-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:700;letter-spacing:.1em;position:relative;z-index:1}.poster-orbit{height:130px;position:relative;margin:10px 0 20px}.poster-orbit i{display:block;position:absolute;width:140px;height:140px;background:var(--study-accent);border-radius:50%;right:10%;top:0}.poster-orbit b{display:block;position:absolute;width:140px;height:140px;border:2px solid #617748;border-radius:50%;right:27%;top:0}.poster-title{font-size:clamp(28px,5.5vw,64px);line-height:1.08;font-weight:800;position:relative}.poster-title span{display:block}.poster-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #9fac7c;margin-top:26px;padding-top:18px;font-size:11px;line-height:1.7}.poster-bottom p{margin:0}.poster-bottom>span{font-size:9px;color:#627046}@media(max-width:740px){.poster-layout{grid-template-columns:minmax(0,1fr)}.poster-shell{padding:20px}h1{font-size:29px}.poster-title{font-size:clamp(30px,9vw,56px)}}@media(max-width:360px){.poster-shell{padding:14px}.controls,.poster{padding:16px}.poster-title{font-size:28px}.poster-orbit{height:110px}.poster-orbit i,.poster-orbit b{width:115px;height:115px}.poster-top{font-size:8px}}@media(prefers-reduced-motion:reduce){.switch span{transition:none}}
```

Referência de código

- Todos os tokens visuais são originais, não padrões oficiais do Melt.

- As posições do controle deslizante e do intervalo vêm dos atributos nativos dos construtores.

- A visibilidade da grade decorativa é independente do espaçamento.

## Configuração do agente para o sistema de design Melt UI

### Ponto de partida para implementação

API de store/action verificado de @melt-ui/svelte 0.86.6 no Svelte 5.57.1. A sintaxe explícita dos construtores dispensa o pré-processador opcional do Melt. Este não é o API separado da próxima geração, baseado em runes.

```
// npm create vite@latest melt-type-study -- --template svelte
// cd melt-type-study && npm install
// npm install svelte@5.57.1 @melt-ui/svelte@0.86.6
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Um prompt para seu projeto

```
Use os construtores de stores/actions de @melt-ui/svelte 0.86.6 com Svelte 5 no estudo de composição tipográfica. Associe atributos e actions aos elementos de createRadioGroup, createSlider e createSwitch; use a sintaxe explícita fornecida, sem exigir um pré-processador não mencionado. Preserve o array de um elemento do slider e o contrato de elements.thumbs, os valores de alinhamento e a visibilidade da grade. Vincule os estilos calculados do cartaz diretamente a essas stores, invalide o feedback salvo após alterações e redefina para left, [2] e true. Não misture as runes mais recentes API nem um modelo de agendamento.
```

## Fontes e escopo do sistema de design Melt UI

Construtores de stores/actions de @melt-ui/svelte 0.86.6 com Svelte 5.57.1. Todos os tokens visuais e o conteúdo do cartaz são originais. Salvar registros apenas no estado de pré-visualização local; isso não exporta nem publica um design.

- Uso Atributos, actions e stores de estado dos construtores.

- Pré-processador Por que use:melt precisa de pré-processamento e qual é sua alternativa explícita.

- Grupo de opções Seleção exclusiva e navegação pelo teclado.

- Slider Valores de array, limites, direção e teclas.

- Switch Estado booleano e semântica.

- Estado controlado Stores graváveis e funções de alteração.

- Instalação Configuração do pacote com versão definida.

## Recursos relacionados ao sistema de design Melt UI

### Naive UI

Uma bancada nativa de tabelas de dados Naive UI, com valores verificados do objeto de tema, seleção de linhas, expansão, ordenação, paginação e uma ação local para revisar lotes.

### Nuxt UI

Crie um compositor de brief completo com Nuxt UI 4.11.3, componentes Vue reais, referências semânticas de tema, validação de entrada e comportamento explícito para rascunhos locais.

### Oruga UI

Um editor de catálogo nativo do Oruga, com tags de tópicos pesquisáveis e removíveis, limites de vocabulário aplicados, tokens reais de um tema opcional e um cartão dinâmico que reflete os rótulos selecionados.


- [Referência de implementação](https://www.melt-ui.com/docs/builders/slider)
- [Fonte](https://www.melt-ui.com/docs/usage)
- [Fonte](https://www.melt-ui.com/docs/builders/slider)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/usage)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/preprocessor)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/builders/radio-group)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/builders/slider)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/builders/switch)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/controlled)
- [Consulte a especificação de apoio](https://www.melt-ui.com/docs/installation)
- [Referência de código](https://www.melt-ui.com/docs/usage)
- [Uso Atributos, actions e stores de estado dos construtores.](https://www.melt-ui.com/docs/usage)
- [Pré-processador Por que use:melt precisa de pré-processamento e qual é sua alternativa explícita.](https://www.melt-ui.com/docs/preprocessor)
- [Grupo de opções Seleção exclusiva e navegação pelo teclado.](https://www.melt-ui.com/docs/builders/radio-group)
- [Slider Valores de array, limites, direção e teclas.](https://www.melt-ui.com/docs/builders/slider)
- [Switch Estado booleano e semântica.](https://www.melt-ui.com/docs/builders/switch)
- [Estado controlado Stores graváveis e funções de alteração.](https://www.melt-ui.com/docs/controlled)
- [Instalação Configuração do pacote com versão definida.](https://www.melt-ui.com/docs/installation)