@antigenic-oss/paint 0.2.0 → 0.2.2

package/src/components/right-panel/claude/ProjectRootSelector.tsx

@@ -138,13 +138,13 @@ export function ProjectRootSelector({
       setValidating(false)
     }
   }, [
-    inputValue,
-    targetUrl,
-    setProjectRoot,
-    onSaved,
-    triggerScan,
-    triggerClientScan,
-    directoryHandle,
+    inputValue, 
+    targetUrl, 
+    setProjectRoot, 
+    onSaved, 
+    triggerScan, 
+    triggerClientScan, 
+    directoryHandle, scanFeedbackCallbacks
   ])
 
   const handleKeyDown = useCallback(

package/src/components/right-panel/claude/SetupFlow.tsx

@@ -16,7 +16,7 @@ export function SetupFlow({ targetUrl, onComplete }: SetupFlowProps) {
   const cliAvailable = useEditorStore((s) => s.cliAvailable)
   const setCliAvailable = useEditorStore((s) => s.setCliAvailable)
   const portRoots = useEditorStore((s) => s.portRoots)
-  const projectRoot = portRoots[targetUrl] ?? null
+  const _projectRoot = portRoots[targetUrl] ?? null
 
   const bridgeStatus = useEditorStore((s) => s.bridgeStatus)
   const isLocal = typeof window !== 'undefined' && isEditorOnLocalhost()

package/src/components/right-panel/console/ConsolePanel.tsx

@@ -58,7 +58,7 @@ export function ConsolePanel() {
     if (!userScrolledUp.current && listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight
     }
-  }, [filtered.length])
+  }, [])
 
   const handleScroll = useCallback(() => {
     const el = listRef.current
@@ -74,7 +74,7 @@ export function ConsolePanel() {
       .map((e) => {
         const ts = new Date(e.timestamp).toISOString()
         const loc = e.source
-          ? ` (${e.source}${e.line != null ? ':' + e.line : ''}${e.column != null ? ':' + e.column : ''})`
+          ? ` (${e.source}${e.line != null ? `:${e.line}` : ''}${e.column != null ? `:${e.column}` : ''})`
           : ''
         return `[${ts}] ERROR${loc}: ${e.args.join(' ')}`
       })
@@ -194,8 +194,8 @@ export function ConsolePanel() {
                   {entry.source && (
                     <span style={{ color: 'var(--text-muted)', fontSize: 9 }}>
                       {entry.source.split('/').pop()}
-                      {entry.line != null ? ':' + entry.line : ''}
-                      {entry.column != null ? ':' + entry.column : ''}
+                      {entry.line != null ? `:${entry.line}` : ''}
+                      {entry.column != null ? `:${entry.column}` : ''}
                     </span>
                   )}
                 </span>

package/src/components/right-panel/design/BackgroundSection.tsx

@@ -250,7 +250,7 @@ function ClipDropdown({
 export function BackgroundSection() {
   const computedStyles = useEditorStore((state) => state.computedStyles)
   const cssVariableUsages = useEditorStore((state) => state.cssVariableUsages)
-  const selectorPath = useEditorStore((state) => state.selectorPath)
+  const _selectorPath = useEditorStore((state) => state.selectorPath)
   const { applyChange, resetProperty } = useChangeTracker()
 
   const hasChanges = useEditorStore((s) => {
@@ -310,7 +310,7 @@ export function BackgroundSection() {
     if (parsedGradient) {
       setGradientData(parsedGradient)
     }
-  }, [selectorPath, bgImage, parsedGradient])
+  }, [bgImage, parsedGradient])
 
   // --- Layer preview swatch ---
   const layerSwatchBg = useMemo(() => {

package/src/components/right-panel/design/GradientEditor.tsx

@@ -42,7 +42,7 @@ function parseStopColor(color: string): { hex: string; opacity: number } {
       b = +rgbaMatch[3]
     const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1
     const hex =
-      '#' + [r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')
+      `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`
     return { hex, opacity: Math.round(a * 100) }
   }
   if (color.startsWith('#')) {
@@ -453,7 +453,7 @@ export function GradientEditor({
       const newStops = [...value.stops, newStop].sort(
         (a, b) => a.position - b.position,
       )
-      const newIndex = newStops.findIndex((s) => s === newStop)
+      const newIndex = newStops.indexOf(newStop)
       setSelectedStop(newIndex)
       onChange({ ...value, stops: newStops })
     },
@@ -483,7 +483,7 @@ export function GradientEditor({
     (newHex: string) => {
       const clean = newHex.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
       if (clean.length === 6 || clean.length === 3) {
-        const hex = '#' + clean
+        const hex = `#${clean}`
         const newColor = buildStopColor(hex, stopOpacity)
         updateStop(selectedStop, { color: newColor })
       }
@@ -511,14 +511,14 @@ export function GradientEditor({
 
   const commitAngle = useCallback(() => {
     const n = parseInt(angleInput, 10)
-    if (!isNaN(n)) updateAngle(((n % 360) + 360) % 360)
+    if (!Number.isNaN(n)) updateAngle(((n % 360) + 360) % 360)
     else setAngleInput(String(value.angle))
   }, [angleInput, value.angle, updateAngle])
 
   const [hexInput, setHexInput] = useState(stopHex.replace('#', ''))
   useEffect(() => setHexInput(stopHex.replace('#', '')), [stopHex])
 
-  const commitHex = useCallback(() => {
+  const _commitHex = useCallback(() => {
     updateStopHex(hexInput)
   }, [hexInput, updateStopHex])
 
@@ -527,7 +527,7 @@ export function GradientEditor({
 
   const commitOpacity = useCallback(() => {
     const n = parseInt(opacityInput, 10)
-    if (!isNaN(n)) updateStopOpacity(n)
+    if (!Number.isNaN(n)) updateStopOpacity(n)
     else setOpacityInput(String(stopOpacity))
   }, [opacityInput, stopOpacity, updateStopOpacity])
 

package/src/components/right-panel/design/LayoutSection.tsx

@@ -132,7 +132,7 @@ function toGridTemplate(count: number): string {
   return `repeat(${count}, 1fr)`
 }
 
-function parseGapValues(gap: string): { row: string; col: string } {
+function _parseGapValues(gap: string): { row: string; col: string } {
   if (!gap || gap === 'normal') return { row: '0px', col: '0px' }
   const parts = gap.trim().split(/\s+/)
   if (parts.length >= 2) return { row: parts[0], col: parts[1] }
@@ -1137,7 +1137,7 @@ function NumberStepper({
         value={value}
         onChange={(e) => {
           const n = parseInt(e.target.value, 10)
-          if (!isNaN(n) && n >= min && n <= max) onChange(n)
+          if (!Number.isNaN(n) && n >= min && n <= max) onChange(n)
         }}
         className="w-8 h-full text-center text-[11px] bg-transparent border-none outline-none"
         style={{ color: 'var(--text-primary)' }}
@@ -1199,7 +1199,7 @@ function GapInput({
   const commit = useCallback(
     (num: string, u: string) => {
       const n = parseFloat(num)
-      if (!isNaN(n)) onChange(property, formatCSSValue(Math.max(0, n), u))
+      if (!Number.isNaN(n)) onChange(property, formatCSSValue(Math.max(0, n), u))
     },
     [onChange, property],
   )
@@ -1246,7 +1246,7 @@ function GapInput({
     const next = units[(idx + 1) % units.length]
     setUnit(next)
     const n = parseFloat(localVal || '0')
-    if (!isNaN(n)) onChange(property, formatCSSValue(Math.max(0, n), next))
+    if (!Number.isNaN(n)) onChange(property, formatCSSValue(Math.max(0, n), next))
   }, [units, unit, localVal, onChange, property])
 
   return (

package/src/components/right-panel/design/PositionSection.tsx

@@ -259,7 +259,7 @@ function OffsetInput({
         onChange(property, 'auto')
       } else {
         const n = parseFloat(num)
-        if (!isNaN(n)) onChange(property, formatCSSValue(n, 'px'))
+        if (!Number.isNaN(n)) onChange(property, formatCSSValue(n, 'px'))
       }
     },
     [onChange, property],
@@ -565,7 +565,7 @@ function ZIndexInput({
         setIsAutoMode(true)
       } else {
         const n = parseInt(v, 10)
-        if (!isNaN(n)) {
+        if (!Number.isNaN(n)) {
           onChange('zIndex', String(n))
           setIsAutoMode(false)
         }

package/src/components/right-panel/design/SVGSection.tsx

@@ -69,7 +69,6 @@ function SaveAsVariableRow({
     return (
       <div className="flex items-center gap-1 pl-1">
         <input
-          autoFocus
           value={varName}
           onChange={(e) => setVarName(e.target.value)}
           onKeyDown={handleKeyDown}
@@ -329,7 +328,7 @@ export function SVGSection() {
             value={fillDisplay}
             property="fill"
             onChange={handleColorChange}
-            varExpression={cssVariableUsages['fill']}
+            varExpression={cssVariableUsages.fill}
           />
           <SaveAsVariableRow
             property="fill"
@@ -346,7 +345,7 @@ export function SVGSection() {
             value={strokeDisplay}
             property="stroke"
             onChange={handleColorChange}
-            varExpression={cssVariableUsages['stroke']}
+            varExpression={cssVariableUsages.stroke}
           />
           <SaveAsVariableRow
             property="stroke"

package/src/components/right-panel/design/ShadowBlurSection.tsx

@@ -78,7 +78,7 @@ export function ShadowBlurSection() {
 
   const handleFilterBlurChange = (_property: string, value: string) => {
     const num = parseFloat(value)
-    if (!isNaN(num) && num > 0) {
+    if (!Number.isNaN(num) && num > 0) {
       applyChange('filter', `blur(${num}px)`)
     } else {
       applyChange('filter', 'none')
@@ -150,7 +150,7 @@ export function ShadowBlurSection() {
               property={`shadow-${i}-x`}
               onChange={(_p, v) => {
                 const num = parseFloat(v)
-                if (!isNaN(num)) updateShadow(i, { x: num })
+                if (!Number.isNaN(num)) updateShadow(i, { x: num })
               }}
               units={['px']}
             />
@@ -160,7 +160,7 @@ export function ShadowBlurSection() {
               property={`shadow-${i}-y`}
               onChange={(_p, v) => {
                 const num = parseFloat(v)
-                if (!isNaN(num)) updateShadow(i, { y: num })
+                if (!Number.isNaN(num)) updateShadow(i, { y: num })
               }}
               units={['px']}
             />
@@ -170,7 +170,7 @@ export function ShadowBlurSection() {
               property={`shadow-${i}-blur`}
               onChange={(_p, v) => {
                 const num = parseFloat(v)
-                if (!isNaN(num)) updateShadow(i, { blur: Math.max(0, num) })
+                if (!Number.isNaN(num)) updateShadow(i, { blur: Math.max(0, num) })
               }}
               units={['px']}
               min={0}
@@ -181,7 +181,7 @@ export function ShadowBlurSection() {
               property={`shadow-${i}-spread`}
               onChange={(_p, v) => {
                 const num = parseFloat(v)
-                if (!isNaN(num)) updateShadow(i, { spread: num })
+                if (!Number.isNaN(num)) updateShadow(i, { spread: num })
               }}
               units={['px']}
             />

package/src/components/right-panel/design/TextSection.tsx

@@ -100,7 +100,7 @@ const selectStyle = {
   color: 'var(--text-primary)',
 } as const
 
-const labelStyle = {
+const _labelStyle = {
   color: 'var(--text-muted)',
 } as const
 
@@ -391,7 +391,7 @@ export function TextSection() {
             value={color}
             property="color"
             onChange={handleChange}
-            varExpression={cssVariableUsages['color']}
+            varExpression={cssVariableUsages.color}
           />
         </div>
       </div>
@@ -668,7 +668,7 @@ export function TextSection() {
                 property={`textShadow-${i}-x`}
                 onChange={(_p, v) => {
                   const num = parseFloat(v)
-                  if (!isNaN(num)) updateShadow(i, { x: num })
+                  if (!Number.isNaN(num)) updateShadow(i, { x: num })
                 }}
                 units={['px']}
               />
@@ -678,7 +678,7 @@ export function TextSection() {
                 property={`textShadow-${i}-y`}
                 onChange={(_p, v) => {
                   const num = parseFloat(v)
-                  if (!isNaN(num)) updateShadow(i, { y: num })
+                  if (!Number.isNaN(num)) updateShadow(i, { y: num })
                 }}
                 units={['px']}
               />
@@ -688,7 +688,7 @@ export function TextSection() {
                 property={`textShadow-${i}-blur`}
                 onChange={(_p, v) => {
                   const num = parseFloat(v)
-                  if (!isNaN(num)) updateShadow(i, { blur: Math.max(0, num) })
+                  if (!Number.isNaN(num)) updateShadow(i, { blur: Math.max(0, num) })
                 }}
                 units={['px']}
                 min={0}

package/src/components/right-panel/design/icons.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export function FlexRowIcon(props: React.SVGProps<SVGSVGElement>) {
   return (

package/src/components/right-panel/design/inputs/BoxModelPreview.tsx

@@ -118,7 +118,7 @@ function ScrubValue({
   const commitEdit = useCallback(() => {
     setIsEditing(false)
     const n = parseFloat(editValue)
-    if (!isNaN(n)) {
+    if (!Number.isNaN(n)) {
       onChange(property, formatCSSValue(Math.max(0, n), unit))
     }
   }, [editValue, onChange, property, unit])
@@ -209,7 +209,7 @@ export function BoxModelPreview({
 
   // Dim-display helper for the content dimension text
   const dimText =
-    (contentW ? `${contentW}` : '–') + ' × ' + (contentH ? `${contentH}` : '–')
+    `${contentW ? `${contentW}` : '–'} × ${contentH ? `${contentH}` : '–'}`
 
   return (
     <div className="pt-1.5" style={{ borderTop: '1px solid var(--border)' }}>

package/src/components/right-panel/design/inputs/CompactInput.tsx

@@ -154,7 +154,7 @@ export function CompactInput({
         onChange(property, 'auto')
       } else {
         const n = parseFloat(num)
-        if (!isNaN(n)) {
+        if (!Number.isNaN(n)) {
           const clamped = clampValue(n)
           onChange(property, formatCSSValue(clamped, u))
         }
@@ -173,7 +173,7 @@ export function CompactInput({
         onChange(property, 'auto')
       } else {
         const num = parseFloat(localValue || '0')
-        if (!isNaN(num)) {
+        if (!Number.isNaN(num)) {
           const clamped = clampValue(num)
           setLocalValue(String(clamped))
           onChange(property, formatCSSValue(clamped, nextUnit))

package/src/components/right-panel/design/inputs/DraggableLabel.tsx

@@ -54,6 +54,7 @@ export function DraggableLabel({
         value === 'auto' ||
         value === 'none' ||
         value === 'normal' ||
+        Number.
         isNaN(parsed.number)
       )
         return
@@ -98,7 +99,7 @@ export function DraggableLabel({
     value !== 'auto' &&
     value !== 'none' &&
     value !== 'normal' &&
-    !isNaN(parsed.number)
+    !Number.isNaN(parsed.number)
 
   return (
     <span

package/src/components/right-panel/design/inputs/IconToggleGroup.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import type React from 'react'
 
 interface IconToggleOption {
   value: string

package/src/components/right-panel/design/inputs/LinkedInputPair.tsx

@@ -14,7 +14,7 @@ interface LinkedInputPairProps {
   units?: string[]
 }
 
-function areAllEqual(values: {
+function _areAllEqual(values: {
   top: string
   right: string
   bottom: string
@@ -68,12 +68,12 @@ export function LinkedInputPair({
     }
   }, [values])
 
-  const handleLinkedHChange = (property: string, value: string) => {
+  const handleLinkedHChange = (_property: string, value: string) => {
     onChange(properties.left, value)
     onChange(properties.right, value)
   }
 
-  const handleLinkedVChange = (property: string, value: string) => {
+  const handleLinkedVChange = (_property: string, value: string) => {
     onChange(properties.top, value)
     onChange(properties.bottom, value)
   }

package/src/components/right-panel/design/inputs/SectionHeader.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 
 interface SectionHeaderProps {
   title: string

package/src/hooks/useDOMTree.ts

@@ -1,6 +1,5 @@
 'use client'
 
-import { useEffect } from 'react'
 import { useEditorStore } from '@/store'
 
 /**

package/src/hooks/usePostMessage.ts

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useEffect, useCallback } from 'react'
+import type React from 'react'
+import { useEffect, useCallback } from 'react'
 import { useEditorStore } from '@/store'
 import type {
   InspectorToEditorMessage,
@@ -114,7 +115,7 @@ function handleMessage(event: MessageEvent) {
       sendViaIframe({ type: 'REQUEST_DOM_TREE' })
       sendViaIframe({ type: 'REQUEST_PAGE_LINKS' })
       sendViaIframe({ type: 'REQUEST_CSS_VARIABLES' })
-      setTimeout(function () {
+      setTimeout(() => {
         sendViaIframe({ type: 'REQUEST_COMPONENTS', payload: {} })
       }, 500)
 
@@ -265,7 +266,7 @@ function handleMessage(event: MessageEvent) {
       // Debounced component rescan on DOM changes (2s to avoid
       // excessive scanning during rapid DOM mutations)
       if (componentRescanTimer) clearTimeout(componentRescanTimer)
-      componentRescanTimer = setTimeout(function () {
+      componentRescanTimer = setTimeout(() => {
         componentRescanTimer = null
         sendViaIframe({ type: 'REQUEST_COMPONENTS', payload: {} })
       }, 2000)

package/src/hooks/useTargetUrl.ts

@@ -60,7 +60,7 @@ export function useTargetUrl() {
     )
       return
 
-    const delay = RECONNECT_BASE_DELAY_MS * Math.pow(2, retryCountRef.current)
+    const delay = RECONNECT_BASE_DELAY_MS * 2 ** retryCountRef.current
     retryTimeoutRef.current = setTimeout(() => {
       retryCountRef.current++
       setConnectionStatus('connecting')

package/src/inspector/DOMTraverser.ts

@@ -21,14 +21,14 @@ export function generateSelectorPath(element: Element): string {
     if (current.className && typeof current.className === 'string') {
       const classes = current.className.trim().split(/\s+/).filter(Boolean)
       if (classes.length > 0) {
-        selector += '.' + classes.join('.')
+        selector += `.${classes.join('.')}`
       }
     }
 
     const parent = current.parentElement
     if (parent) {
       const siblings = Array.from(parent.children).filter(
-        (child) => child.tagName === current!.tagName,
+        (child) => child.tagName === current?.tagName,
       )
       if (siblings.length > 1) {
         const index = siblings.indexOf(current) + 1

package/src/inspector/HoverHighlighter.ts

@@ -16,11 +16,11 @@ export function createHoverHighlighter() {
 
   function getElementLabel(el: Element): string {
     const tag = el.tagName.toLowerCase()
-    if (el.id) return tag + '#' + el.id
+    if (el.id) return `${tag}#${el.id}`
     const cls = el.className
     if (cls && typeof cls === 'string') {
       const first = cls.trim().split(/\s+/)[0]
-      if (first) return tag + '.' + first
+      if (first) return `${tag}.${first}`
     }
     return tag
   }
@@ -28,10 +28,10 @@ export function createHoverHighlighter() {
   return {
     show(el: Element, rect: DOMRect) {
       overlay.style.display = 'block'
-      overlay.style.top = rect.top + 'px'
-      overlay.style.left = rect.left + 'px'
-      overlay.style.width = rect.width + 'px'
-      overlay.style.height = rect.height + 'px'
+      overlay.style.top = `${rect.top}px`
+      overlay.style.left = `${rect.left}px`
+      overlay.style.width = `${rect.width}px`
+      overlay.style.height = `${rect.height}px`
       label.textContent = getElementLabel(el)
       // Flip label below if near top
       if (rect.top < 20) {

package/src/inspector/SelectionHighlighter.ts

@@ -12,10 +12,10 @@ export function createSelectionHighlighter() {
   return {
     show(rect: DOMRect) {
       overlay.style.display = 'block'
-      overlay.style.top = rect.top + 'px'
-      overlay.style.left = rect.left + 'px'
-      overlay.style.width = rect.width + 'px'
-      overlay.style.height = rect.height + 'px'
+      overlay.style.top = `${rect.top}px`
+      overlay.style.left = `${rect.left}px`
+      overlay.style.width = `${rect.width}px`
+      overlay.style.height = `${rect.height}px`
     },
     hide() {
       overlay.style.display = 'none'

package/src/lib/classifyElement.ts

@@ -8,7 +8,6 @@
 
 import type {
   FileMap,
-  ComponentEntry,
   RouteEntry,
   SourceInfo,
 } from '@/types/claude'
@@ -328,7 +327,7 @@ export function inferSourcePath(opts: {
     const abs = opts.sourceInfo.fileName
     if (opts.projectRoot) {
       const root = opts.projectRoot.replace(/\/$/, '')
-      if (abs.startsWith(root + '/')) {
+      if (abs.startsWith(`${root}/`)) {
         return abs.substring(root.length + 1)
       }
     }

package/src/lib/claude-bin.ts

@@ -1,5 +1,5 @@
 import { existsSync, readdirSync } from 'node:fs'
-import { spawn, execFileSync } from 'node:child_process'
+import { spawn, } from 'node:child_process'
 import { homedir } from 'node:os'
 import { join } from 'node:path'
 

package/src/lib/clientProjectScanner.ts

@@ -97,7 +97,7 @@ function filePathToUrlPattern(relativePath: string): string {
   const parts = relativePath.split('/')
   const routeParts = parts.slice(1, -1)
   const filtered = routeParts.filter((p) => !p.startsWith('('))
-  return '/' + filtered.join('/')
+  return `/${filtered.join('/')}`
 }
 
 interface Collectors {
@@ -201,14 +201,14 @@ function detectFramework(
   devDeps: Record<string, string>,
 ): string | null {
   const all = { ...deps, ...devDeps }
-  if (all['next']) return 'Next.js'
-  if (all['@remix-run/react'] || all['remix']) return 'Remix'
-  if (all['gatsby']) return 'Gatsby'
-  if (all['astro']) return 'Astro'
+  if (all.next) return 'Next.js'
+  if (all['@remix-run/react'] || all.remix) return 'Remix'
+  if (all.gatsby) return 'Gatsby'
+  if (all.astro) return 'Astro'
   if (all['@angular/core']) return 'Angular'
-  if (all['vue']) return 'Vue'
-  if (all['svelte']) return 'Svelte'
-  if (all['react']) return 'React'
+  if (all.vue) return 'Vue'
+  if (all.svelte) return 'Svelte'
+  if (all.react) return 'React'
   return null
 }
 
@@ -220,13 +220,13 @@ function detectCssStrategy(
 ): string[] {
   const all = { ...deps, ...devDeps }
   const strategies: string[] = []
-  if (all['tailwindcss']) strategies.push('Tailwind')
+  if (all.tailwindcss) strategies.push('Tailwind')
   if (hasCssModules) strategies.push('CSS Modules')
   if (all['styled-components']) strategies.push('styled-components')
   if (all['@emotion/react'] || all['@emotion/styled'])
     strategies.push('Emotion')
-  if (all['sass'] || all['node-sass']) strategies.push('Sass')
-  if (all['less']) strategies.push('Less')
+  if (all.sass || all['node-sass']) strategies.push('Sass')
+  if (all.less) strategies.push('Less')
   if (all['@vanilla-extract/css']) strategies.push('Vanilla Extract')
   if (strategies.length === 0 && cssFiles.length > 0) strategies.push('CSS')
   return strategies
@@ -270,7 +270,7 @@ export async function scanProjectClient(
 
   for (const dir of candidateDirs) {
     const alreadyCovered = scannedRoots.some((root) =>
-      dir.startsWith(root + '/'),
+      dir.startsWith(`${root}/`),
     )
     if (alreadyCovered) continue
 
@@ -312,7 +312,7 @@ export async function scanProjectClient(
         entry.kind === 'directory' &&
         ASSET_DIR_NAMES.has(name.toLowerCase())
       ) {
-        collectors.assetDirs.add('public/' + name)
+        collectors.assetDirs.add(`public/${name}`)
       }
       if (entry.kind === 'file') {
         collectors.assetDirs.add('public')

package/src/lib/cssVariableUtils.ts

@@ -37,7 +37,7 @@ export function groupVariablesIntoFamilies(
     if (!prefixMap.has(prefix)) {
       prefixMap.set(prefix, [])
     }
-    prefixMap.get(prefix)!.push({
+    prefixMap.get(prefix)?.push({
       name,
       suffix,
       value: def.value,

package/src/lib/folderPicker.ts

@@ -57,7 +57,10 @@ export async function pickFolder(): Promise<FolderPickResult> {
 
 async function pickFolderClient(): Promise<FolderPickResult> {
   try {
-    const handle = await window.showDirectoryPicker!({ mode: 'read' })
+    if (!window.showDirectoryPicker) {
+      return { type: 'error', message: 'Folder picker is not supported' }
+    }
+    const handle = await window.showDirectoryPicker({ mode: 'read' })
     return { type: 'handle', handle, name: handle.name }
   } catch (err) {
     if (err instanceof DOMException && err.name === 'AbortError') {