Fix Lit dependency duplication and update mini-lit to 0.2.0

- Move lit from dependencies to peerDependencies in web-ui to prevent multiple Lit instances being loaded
- Update mini-lit from 0.1.8/0.1.10 to 0.2.0 in root package.json and web-ui/package.json
- Install @tailwindcss/vite in web-ui/example
- Run biome formatting fixes across codebase

This resolves HMR custom element re-registration errors caused by duplicate Lit registries.

packages/web-ui/src/ChatPanel.ts

@@ -1,5 +1,5 @@
-import { Badge, html } from "@mariozechner/mini-lit";
-import { LitElement } from "lit";
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import type { Agent } from "./agent/agent.js";
 import "./components/AgentInterface.js";

packages/web-ui/src/components/AgentInterface.ts

@@ -1,6 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage, Usage } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { ModelSelector } from "../dialogs/ModelSelector.js";
 import type { MessageEditor } from "./MessageEditor.js";

packages/web-ui/src/components/AttachmentTile.ts

@@ -1,6 +1,7 @@
-import { html, icon } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit/dist/icons.js";
 import { LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { html } from "lit/html.js";
 import { FileSpreadsheet, FileText, X } from "lucide";
 import { AttachmentOverlay } from "../dialogs/AttachmentOverlay.js";
 import type { Attachment } from "../utils/attachment-utils.js";

packages/web-ui/src/components/ConsoleBlock.ts

@@ -1,6 +1,7 @@
-import { html, icon } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
 import { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
+import { html } from "lit/html.js";
 import { Check, Copy } from "lucide";
 import { i18n } from "../utils/i18n.js";
 

packages/web-ui/src/components/CustomProviderCard.ts

@@ -1,5 +1,6 @@
-import { Button, html, i18n, type TemplateResult } from "@mariozechner/mini-lit";
-import { LitElement } from "lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import type { CustomProvider } from "../storage/stores/custom-providers-store.js";
 

packages/web-ui/src/components/Input.ts

@@ -1,4 +1,5 @@
-import { type BaseComponentProps, fc, html } from "@mariozechner/mini-lit";
+import { type BaseComponentProps, fc } from "@mariozechner/mini-lit/dist/mini.js";
+import { html } from "lit";
 import { type Ref, ref } from "lit/directives/ref.js";
 import { i18n } from "../utils/i18n.js";
 

packages/web-ui/src/components/MessageEditor.ts

@@ -1,12 +1,14 @@
-import { Button, html, icon, Select, type SelectOption } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { Select, type SelectOption } from "@mariozechner/mini-lit/dist/Select.js";
 import type { Model } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Brain, Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
-import "./AttachmentTile.js";
 import { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
 import { i18n } from "../utils/i18n.js";
+import "./AttachmentTile.js";
 
 @customElement("message-editor")
 export class MessageEditor extends LitElement {

packages/web-ui/src/components/MessageList.ts

@@ -1,10 +1,9 @@
-import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
 	ToolResultMessage as ToolResultMessageType,
 } from "@mariozechner/pi-ai";
-import { LitElement, type TemplateResult } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import type { AppMessage } from "./Messages.js";

packages/web-ui/src/components/Messages.ts

@@ -1,4 +1,3 @@
-import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
@@ -6,7 +5,7 @@ import type {
 	ToolResultMessage as ToolResultMessageType,
 	UserMessage as UserMessageType,
 } from "@mariozechner/pi-ai";
-import { LitElement, type TemplateResult } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { renderTool } from "../tools/index.js";
 import type { Attachment } from "../utils/attachment-utils.js";

packages/web-ui/src/components/ProviderKeyInput.ts

@@ -1,9 +1,12 @@
-import { Badge, Button, html, Input, i18n } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { type Context, complete, getModel } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { getAppStorage } from "../storage/app-storage.js";
 import { applyProxyIfNeeded } from "../utils/proxy-utils.js";
+import { Input } from "./Input.js";
 
 // Test models for each provider
 const TEST_MODELS: Record<string, string> = {

packages/web-ui/src/components/StreamingMessageContainer.ts

@@ -1,6 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { AgentTool, Message, ToolResultMessage } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
 export class StreamingMessageContainer extends LitElement {

packages/web-ui/src/dialogs/ApiKeyPromptDialog.ts

@@ -1,6 +1,8 @@
-import { DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
 import { customElement, state } from "lit/decorators.js";
 import "../components/ProviderKeyInput.js";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
 import { getAppStorage } from "../storage/app-storage.js";
 import { i18n } from "../utils/i18n.js";
 

packages/web-ui/src/dialogs/AttachmentOverlay.ts

@@ -1,7 +1,8 @@
-import { Button, html, icon } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/ModeToggle.js";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { renderAsync } from "docx-preview";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { state } from "lit/decorators.js";
 import { Download, X } from "lucide";
 import * as pdfjsLib from "pdfjs-dist";

packages/web-ui/src/dialogs/CustomProviderDialog.ts

@@ -1,5 +1,11 @@
-import { Button, DialogBase, html, Input, i18n, Label, Select, type TemplateResult } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { Input } from "@mariozechner/mini-lit/dist/Input.js";
+import { Label } from "@mariozechner/mini-lit/dist/Label.js";
+import { Select } from "@mariozechner/mini-lit/dist/Select.js";
 import type { Model } from "@mariozechner/pi-ai";
+import { html, type TemplateResult } from "lit";
 import { state } from "lit/decorators.js";
 import { getAppStorage } from "../storage/app-storage.js";
 import type { CustomProvider, CustomProviderType } from "../storage/stores/custom-providers-store.js";

packages/web-ui/src/dialogs/ModelSelector.ts

@@ -1,6 +1,10 @@
-import { Badge, Button, DialogBase, DialogHeader, html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
 import { getModels, getProviders, type Model } from "@mariozechner/pi-ai";
-import type { PropertyValues } from "lit";
+import { html, type PropertyValues, type TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Brain, Image as ImageIcon } from "lucide";

packages/web-ui/src/dialogs/PersistentStorageDialog.ts

@@ -1,4 +1,7 @@
-import { Button, DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { i18n } from "../utils/i18n.js";
 

packages/web-ui/src/dialogs/ProvidersModelsTab.ts

@@ -1,5 +1,7 @@
-import { html, i18n, Select, type TemplateResult } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Select } from "@mariozechner/mini-lit/dist/Select.js";
 import { getProviders } from "@mariozechner/pi-ai";
+import { html, type TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import "../components/CustomProviderCard.js";
 import "../components/ProviderKeyInput.js";

packages/web-ui/src/dialogs/SessionListDialog.ts

@@ -1,4 +1,6 @@
-import { DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { getAppStorage } from "../storage/app-storage.js";
 import type { SessionMetadata } from "../storage/types.js";

packages/web-ui/src/dialogs/SettingsDialog.ts

@@ -1,16 +1,10 @@
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	html,
-	Input,
-	i18n,
-	Label,
-	Switch,
-	type TemplateResult,
-} from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Dialog, DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { Input } from "@mariozechner/mini-lit/dist/Input.js";
+import { Label } from "@mariozechner/mini-lit/dist/Label.js";
+import { Switch } from "@mariozechner/mini-lit/dist/Switch.js";
 import { getProviders } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "../components/ProviderKeyInput.js";
 import { getAppStorage } from "../storage/app-storage.js";

packages/web-ui/src/tools/artifacts/ArtifactPill.ts

@@ -1,4 +1,5 @@
-import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
 import { FileCode2 } from "lucide";
 import type { ArtifactsPanel } from "./artifacts.js";
 

packages/web-ui/src/tools/artifacts/DocxArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { renderAsync } from "docx-preview";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

packages/web-ui/src/tools/artifacts/ExcelArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import * as XLSX from "xlsx";

packages/web-ui/src/tools/artifacts/GenericArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { i18n } from "../../utils/i18n.js";

packages/web-ui/src/tools/artifacts/HtmlArtifact.ts

@@ -1,4 +1,3 @@
-import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -13,6 +12,11 @@ import "../../components/SandboxedIframe.js";
 import { ArtifactElement } from "./ArtifactElement.js";
 import type { Console } from "./Console.js";
 import "./Console.js";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 
 @customElement("html-artifact")
 export class HtmlArtifact extends ArtifactElement {

packages/web-ui/src/tools/artifacts/ImageArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { i18n } from "../../utils/i18n.js";

packages/web-ui/src/tools/artifacts/MarkdownArtifact.ts

@@ -1,10 +1,12 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { i18n } from "../../utils/i18n.js";
 import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 import { ArtifactElement } from "./ArtifactElement.js";
 
 @customElement("markdown-artifact")

packages/web-ui/src/tools/artifacts/PdfArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import * as pdfjsLib from "pdfjs-dist";

packages/web-ui/src/tools/artifacts/SvgArtifact.ts

@@ -1,4 +1,6 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

packages/web-ui/src/tools/artifacts/TextArtifact.ts

@@ -1,4 +1,5 @@
-import { CopyButton, DownloadButton } from "@mariozechner/mini-lit";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts

@@ -1,9 +1,10 @@
-import { Diff, html, type TemplateResult } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/CodeBlock.js";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FileCode2 } from "lucide";
 import "../../components/ConsoleBlock.js";
+import { Diff } from "@mariozechner/mini-lit/dist/Diff.js";
+import { html, type TemplateResult } from "lit";
 import { i18n } from "../../utils/i18n.js";
 import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
 import type { ToolRenderer, ToolRenderResult } from "../types.js";

packages/web-ui/src/tools/artifacts/artifacts.ts

@@ -1,5 +1,6 @@
-import { Button, icon } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { type AgentTool, type Message, StringEnum, type ToolCall } from "@mariozechner/pi-ai";
 import { type Static, Type } from "@sinclair/typebox";
 import { html, LitElement, type TemplateResult } from "lit";

packages/web-ui/src/tools/extract-document.ts

@@ -1,6 +1,6 @@
-import { html } from "@mariozechner/mini-lit";
 import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
 import { type Static, Type } from "@sinclair/typebox";
+import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FileText } from "lucide";
 import { EXTRACT_DOCUMENT_DESCRIPTION } from "../prompts/prompts.js";

packages/web-ui/src/tools/javascript-repl.ts

@@ -1,6 +1,7 @@
-import { html, i18n } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
 import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
 import { type Static, Type } from "@sinclair/typebox";
+import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Code } from "lucide";
 import { type SandboxFile, SandboxIframe, type SandboxResult } from "../components/SandboxedIframe.js";

packages/web-ui/src/tools/renderer-registry.ts

@@ -1,4 +1,5 @@
-import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
 import type { Ref } from "lit/directives/ref.js";
 import { ref } from "lit/directives/ref.js";
 import { ChevronsUpDown, ChevronUp, Loader } from "lucide";

packages/web-ui/src/tools/renderers/BashRenderer.ts

@@ -1,5 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { html } from "lit";
 import { SquareTerminal } from "lucide";
 import { i18n } from "../../utils/i18n.js";
 import { renderHeader } from "../renderer-registry.js";

packages/web-ui/src/tools/renderers/CalculateRenderer.ts

@@ -1,5 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { html } from "lit";
 import { Calculator } from "lucide";
 import { i18n } from "../../utils/i18n.js";
 import { renderHeader } from "../renderer-registry.js";

packages/web-ui/src/tools/renderers/DefaultRenderer.ts

@@ -1,5 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { html } from "lit";
 import { Code } from "lucide";
 import { i18n } from "../../utils/i18n.js";
 import { renderHeader } from "../renderer-registry.js";

packages/web-ui/src/tools/renderers/GetCurrentTimeRenderer.ts

@@ -1,5 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { html } from "lit";
 import { Clock } from "lucide";
 import { i18n } from "../../utils/i18n.js";
 import { renderHeader } from "../renderer-registry.js";

packages/web-ui/src/utils/auth-token.ts

@@ -1,4 +1,4 @@
-import { PromptDialog } from "@mariozechner/mini-lit";
+import PromptDialog from "@mariozechner/mini-lit/dist/PromptDialog.js";
 import { i18n } from "./i18n.js";
 
 export async function getAuthToken(): Promise<string | undefined> {