Ilse 0.12

Ilse 0.12

Your design system says why

• Hover a component in the Library and Edit: its name and its reasoning (when to use, not for). A new name goes to your agent, which renames it across the code.
• In the DS window, click a token to write what it's for. It goes into DESIGN.md.
• What you write is kept in .ilse/ds/edits.json; nothing rewrites it.

Fixes

• An agent batch that uses a component without importing it counts as broken: one repair turn, else it's undone. No more "Button is not defined" on screen.
• No false error bubble while an agent batch is still writing.
• Writing .ilse no longer reloads the page on Tailwind v4 projects (Ilse adds .ilse/.ignore; git still tracks the folder).
• The Library no longer lists pages, providers and routers as components.
• Hovering a component's root shows its name (◇ KpiCard) instead of a CSS selector.
• The panel no longer offers old alias values a component only redirects (sm, md, lg).
• A panel color change on an element whose class comes from an expression goes to your agent instead of painting every case.
• The note's + menu is no longer cut off.

---

Ilse 0.12

O seu design system diz por quê

• Passe o mouse num componente da Biblioteca e clique em Editar: o nome e o porquê dele (quando usar, não use para). Um nome novo vai para o seu agente, que renomeia em todo o código.
• Na janela do DS, clique num token para escrever para que ele serve. Vai para o DESIGN.md.
• O que você escreve fica em .ilse/ds/edits.json; nada reescreve.

Correções

• Um lote do agente que usa um componente sem importar conta como quebrado: um turno de reparo, senão é desfeito. Acabou o "Button is not defined" na tela.
• Sem aviso de erro falso enquanto o lote do agente ainda está escrevendo.
• Gravar em .ilse não recarrega mais a página em projetos com Tailwind v4 (a Ilse cria .ilse/.ignore; o git continua versionando a pasta).
• A Biblioteca não lista mais páginas, providers e routers como componentes.
• Passar o mouse na raiz de um componente mostra o nome dele (◇ KpiCard) em vez do seletor CSS.
• O painel não oferece mais valores antigos que o componente só redireciona (sm, md, lg).
• Mudar a cor no painel de um elemento cuja classe vem de uma expressão vai para o seu agente, em vez de pintar todos os casos.
• O menu do + na nota não fica mais cortado.

Ilse 0.11

What's new

• See a prop before you apply it. In the panel's Component section, pick a value (a variant, a size) and the real component renders with it right away, so it opens, filters and reacts like the app. Cancel and the code's value comes back. Under the props, the instance's JSX with its file:line, as it will read once applied.
• Screens: Close and Esc fold the toolbar into the orb and keep the screen open.
• Settings, tidied: one Accounts block (your agent and, if you have it, Ilse Pro), each row says whose.
• Page errors show as a card with the message and where it happened, instead of the raw code frame.
• Sign in to Ilse Pro: ilse login connects this machine to your Ilse Pro account and ilse upgrade installs it, checking it was signed by Ilse. Free works the same without them.

Fixes

• The Library finds components rendered on the server (Next's app router) and library components implemented under another name (Next's Link is LinkComponent).
• On a Mac, ⌘⌫ removes the selected element; a plain ⌫ inside the note only edits text.
• Next no longer warns about a hydration mismatch caused by Ilse's DevTools hook script.
• Copies of components keep their horizontal centring.

---

Novidades

• Veja uma prop antes de aplicar. Na seção Componente do painel, escolha um valor (uma variante, um tamanho) e o componente de verdade aparece com ele na hora, abrindo, filtrando e reagindo como no app. Cancele e volta o valor do código. Embaixo das props, o JSX da instância com arquivo:linha, como vai ficar depois de aplicar.
• Telas: Fechar e Esc recolhem a barra no orbe e mantêm a tela aberta.
• Configurações mais limpas: um bloco só de Contas (o seu agente e, se você tiver, o Ilse Pro), cada linha diz de quem é.
• Erros da página aparecem num cartão com a mensagem e onde aconteceu, em vez do trecho de código cru.
• Entrar no Ilse Pro: ilse login conecta esta máquina à sua conta do Ilse Pro e ilse upgrade instala, conferindo que foi assinado pela Ilse. O Free funciona igual sem eles.

Correções

• A Biblioteca encontra componentes renderizados no servidor (app router do Next) e componentes de biblioteca implementados com outro nome (o Link do Next é LinkComponent).
• No Mac, ⌘⌫ remove o elemento selecionado; um ⌫ dentro da nota só edita o texto.
• O Next não avisa mais de hydration mismatch por causa do script de DevTools da Ilse.
• As cópias dos componentes mantêm a centralização horizontal.

v0.10.1

Fixes

• The panel's line height follows a font-size change, instead of showing the old value.
• In Screens, no tooltip is left over the screen once the pointer is inside it.

---

Correções

• O line-height do painel acompanha a mudança de tamanho da fonte, em vez de mostrar o valor antigo.
• Nas Telas, nenhum tooltip fica preso sobre a tela quando o ponteiro entra nela.

v0.10.0 — Screens

What's new

• Screens. The devices button in the toolbar opens the page you're on at phone, tablet or desktop width (iPhone 15 · 390, iPad Mini · 768, Desktop · 1280), one at a time, over the page. It's the same address, so your login and cookies still hold, and media queries answer to the screen's real width.
• The same toolbar on every screen. While Screens is open, the toolbar works on the screen: select, adjust in the panel, draw, Run, undo. The panel opens outside the screen, so it never covers a 390px layout. The change goes to your code and hot reload updates the screen.
• Any size, with rulers. Drag the screen's right or bottom edge (or its corner) for any size in between. Turn the phone to landscape. Rulers on the top and left show the selected element in orange.
• Apps that refuse iframes still open. Through Ilse's address, X-Frame-Options and frame-ancestors are dropped only for the screen's own load.

---

Novidades

• Telas. O botão de aparelhos na barra abre a página em que você está na largura de celular, tablet ou desktop (iPhone 15 · 390, iPad Mini · 768, Desktop · 1280), uma por vez, por cima da página. É o mesmo endereço: o login e os cookies continuam valendo, e os media queries respondem à largura real da tela.
• A mesma barra em cada tela. Com as Telas abertas, a barra age na tela: selecionar, ajustar no painel, desenhar, Run, desfazer. O painel abre fora da tela, então nunca cobre um layout de 390px. O ajuste vai pro código e o hot reload atualiza a tela.
• Qualquer tamanho, com réguas. Arraste a borda direita ou de baixo da tela (ou o canto) para qualquer tamanho no meio. Gire o celular para paisagem. As réguas em cima e à esquerda mostram o elemento selecionado em laranja.
• App que recusa iframe abre mesmo assim. Pelo endereço da Ilse, X-Frame-Options e frame-ancestors saem só no carregamento da própria tela.

0.9.0 — Component library and Create design system

What's new

• Component library. The catalog and your design system now live in one tab, the Library. The list of your project's components is Free: search by name or by what a component is for, see where each one is on the page, and open its Component section.
• Create design system. One click (or ilse ds) and Ilse writes .ilse/ds/DESIGN.md from your code: your components with their props and variants, and your tokens (colors, spacing, radius, type, shadows). No AI, done in seconds.
• Your agent follows it. The design system window opens what was written. Add to AGENTS.md (or CLAUDE.md) points any agent at it on a click, so Claude Code, Codex, Cursor or Gemini use your components and tokens even with Ilse closed. Ilse reads it too.

Fixes

• Editing pixels no longer flashes a horizontal scrollbar.
• Reasoning lines rise above open bubbles and panels instead of being covered by them.

---

Novidades

• Biblioteca de componentes. O catálogo e o seu design system agora ficam numa aba só, a Biblioteca. A lista de componentes do projeto é Free: busque pelo nome ou pelo que o componente faz, veja onde cada um está na página e abra a seção Componente dele.
• Criar design system. Um clique (ou ilse ds) e a Ilse escreve o .ilse/ds/DESIGN.md a partir do seu código: os componentes com props e variantes, e os tokens (cores, espaçamento, raio, tipografia, sombras). Sem IA, em segundos.
• O seu agente segue o DS. A janela do design system abre o que foi escrito. Adicionar ao AGENTS.md (ou CLAUDE.md) aponta qualquer agente pra ele num clique, e o Claude Code, Codex, Cursor ou Gemini passam a usar os seus componentes e tokens mesmo com a Ilse fechada. A Ilse também lê.

Correções

• Editar pixels não faz mais aparecer uma barra de rolagem horizontal.
• As linhas de raciocínio sobem acima de balões e painéis abertos em vez de ficarem cobertas.

0.8.0 — Components in the panel, duplicate anything, changes that show on their own

English

Components in the panel. Select a component and the panel shows its props and variants, read from your code (types, cva(), how it's used) or from a library's types. Pick another variant and Ilse rewrites that prop where this instance is written — no AI.

Duplicate anything. Duplicate a list row and the agent adds a new item to the data behind the list (with a unique key); duplicate any other block and it writes a copy of the JSX. Drag the copy where you want it and restyle it in the panel — the copy goes there, with that style, and the original stays as it was.

An edit on one instance stays on that instance. When the element comes from a component used in several places, the change applies only here unless you choose "All".

Changes show without a reload. What you previewed — a style, a copy, a hidden element — stays on screen until the page re-renders with the real change. If it doesn't on its own, Ilse asks the framework to re-render (Next's App Router: no reload, state kept). It asks you to reload only as a last resort.

The page must not break. After a change, new errors the page logs (a duplicated React key, an uncaught exception) show up with Ask for a fix, Undo and Ignore.

Undo survives a restart. The undo history is kept per project outside your repo (ILSE_UNDO_SAVE=0 keeps it in memory only).

Smaller things

• Panel size: Hug/Fill show the measured size; a Fill that changes nothing says why
• The property panel keeps the spot you dragged it to
• Chrome extension: right-click → Open with Ilse, which selects the element
• A project's own app takes its Ilse server back from another project's tab
• Old notes no longer come back as pending after a restart
• The same request on the same element isn't sent twice
• A cleaner terminal log

Português

Componentes no painel. Selecione um componente e o painel mostra as props e variantes dele, lidas do seu código (tipos, cva(), como ele é usado) ou dos tipos de uma biblioteca. Escolha outra variante e a Ilse reescreve essa prop onde esta instância está escrita — sem IA.

Duplicar qualquer coisa. Duplique uma linha de lista e o agente acrescenta um item novo aos dados dela (com key única); duplique qualquer outro bloco e ele escreve uma cópia do JSX. Arraste a cópia para onde quiser e mude o estilo dela no painel — a cópia vai para lá, com esse estilo, e o original fica como estava.

Uma edição numa instância fica nela. Quando o elemento vem de um componente usado em vários lugares, a mudança vale só aqui, a não ser que você escolha "Todos".

As mudanças aparecem sem recarregar. O que você viu em prévia — um estilo, uma cópia, um elemento escondido — continua na tela até a página renderizar a mudança real. Se ela não renderizar sozinha, a Ilse pede ao framework que renderize de novo (App Router do Next: sem recarregar, sem perder o estado). Pedir para você recarregar é o último recurso.

A página não pode quebrar. Depois de uma mudança, erros novos que a página registra (uma key repetida do React, uma exceção não tratada) aparecem com Pedir correção, Desfazer e Ignorar.

Desfazer sobrevive a reiniciar. O histórico de desfazer fica guardado por projeto, fora do seu repositório (ILSE_UNDO_SAVE=0 mantém só em memória).

Coisas menores

• Tamanho no painel: Hug/Fill mostram o tamanho medido; um Fill que não muda nada diz por quê
• O painel de propriedades fica onde você o arrastou
• Extensão do Chrome: botão direito → Abrir com a Ilse, que já seleciona o elemento
• O app de um projeto pega de volta o servidor da Ilse que a aba de outro projeto tinha pegado
• Notas antigas não voltam mais como pendentes depois de reiniciar
• O mesmo pedido no mesmo elemento não é enviado duas vezes
• Log do terminal mais limpo

0.7.0 — Position and Effects in the panel

What's new

• Position in the panel: static · relative · absolute · fixed · sticky, with X/Y. Out of the flow, the element drags anywhere, ignoring the parent's layout (like Figma's "Ignore auto layout"). It doesn't jump when you switch, and keeps its width.
• Effects in the panel: shadow, blur and background blur, on the project's scale (shadow-md, blur-md, backdrop-blur-md). They show when the element has them; "+" adds a shadow.
• Text alignment: left · center · right, under Typography.
• Formatted text (<em>, <strong>, <span>…) can be retyped in the panel; each piece keeps its formatting.

Everything applied without AI lands in the code as a Tailwind class.

Fixes

• Closing Ilse with a card open no longer leaves the page in selection mode.
• Disabled buttons and fields can be selected.
• Markers inside lists and panels that scroll on their own follow their element.

License: PolyForm Shield 1.0.0.

---

Novidades

• Position no painel: static · relative · absolute · fixed · sticky, com X/Y. Fora do fluxo, o elemento é arrastado para qualquer lugar, ignorando o layout do pai ("Ignorar o layout do pai", como no Figma). Não pula ao trocar e mantém a largura.
• Effects no painel: sombra, blur e blur do fundo, na escala do projeto (shadow-md, blur-md, backdrop-blur-md). Aparecem quando o elemento tem; "+" adiciona uma sombra.
• Alinhamento de texto: esquerda · centro · direita, em Typography.
• Texto com formatação (<em>, <strong>, <span>…) pode ser reescrito no painel; cada parte mantém a formatação.

Tudo o que é aplicado sem IA vira classe Tailwind direto no código.

Correções

• Fechar a Ilse com um card aberto não deixa mais a página em modo seleção.
• Botões e campos desabilitados podem ser selecionados.
• Marcadores dentro de listas e painéis com rolagem própria acompanham o elemento.

Licença: PolyForm Shield 1.0.0.

0.6.0 — CI verde, memória do projeto, árvore de componentes

Novidades

• Mantém o CI verde. Depois de cada mudança, a Ilse roda o typecheck do projeto e os testes que cobrem o que mudou. O que a mudança quebrou, o agente corrige antes de dizer que terminou — testes de aparência são atualizados, testes de comportamento ficam e o código é corrigido. Falhas que já existiam não são atribuídas à mudança. ILSE_CHECK=off desliga; .ilserc.json ganha check e protected.
• Memória do projeto (Configurações → Memória do projeto): as mudanças de design que a Ilse fez aqui, com a sua nota e o que ainda não tem commit. Com o Ilse Pro, também o que o modo teste lembra.
• Árvore de componentes no card, no lugar do bloco de CSS: suba para o pai ou desça para o filho sem fechar a nota.
• A mudança cai na página certa: o pedido leva a página; um desenho em área vazia fica ancorado no elemento que a contém; se o agente mexer em outra tela, a barra avisa, com Refazer nesta página / Desfazer / Manter.
• Arrastar move o que você selecionou, não o pai.
• ✕ fecha o card; menus da página não fecham mais quando você clica no card.
• Cabeçalho das configurações: plano da Ilse, agente e conta ("Claude Pro"), modelo e chamadas da sessão.
• "Sem cor" no Fill e no Stroke do painel.

Ilse Pro

O modo teste agora vem só no Ilse Pro, que se conecta ao pacote grátis por plugin. Sem o Pro, o mascote do modo teste aparece dormindo. Veja ilse.design/#pro.

Licença: PolyForm Shield 1.0.0 (como na 0.5.2).

0.5.2 — licença PolyForm Shield; npx @latest em tudo

v0.5.2

chore(license): PolyForm Shield 1.0.0 from 0.5.2 on; versions up to 0…

v0.5.1

npx ilse-design

What's new

• Your app's port, confirmed once per project. The first time, Ilse shows the port it detected — Your app will run at localhost:5173 — and you run on it or change it. Saved per project (never in the repo); ilse --port <n> changes it later. Thanks @huxleydias for asking.
• Monorepos from the root. With turbo dev (or another task runner) at the root, Ilse finds the Vite or Next app in the workspace and runs it from its own folder, on the right port. Several apps: it asks once which one (#17).
• npm page in English, with working logo and links. The Portuguese README is now LEIAME.md.

---

Em português. A Ilse mostra a porta detectada na primeira vez em cada projeto — rodar nessa ou mudar — e salva a escolha (ilse --port <n> muda depois). Em monorepo, rodando da raiz, ela acha o app Vite ou Next do workspace e sobe ele direto. A página do npm agora está em inglês; o README em português virou o LEIAME.md.