@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/components/sidebars/FrameSidebar.jsx

@@ -0,0 +1,263 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import useUIStore from '../../store/useUIStore'
+import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
+import { useState, useCallback, useEffect } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+import { compressImage } from '../../../utils/imageCompressor.js'
+import { IMAGE_ACCEPT_ATTR, isAllowedImage } from '../../../utils/allowedImageTypes.js'
+
+const FILL_STYLES = [
+  { id: 'transparent', label: 'None', icon: 'bx-x' },
+  { id: 'solid', label: 'Solid', icon: 'bxs-square' },
+  { id: 'grid', label: 'Grid', icon: 'bx-grid-alt' },
+]
+
+const FILL_COLORS = [
+  '#1e1e28',
+  '#13171C',
+  '#1a1a2e',
+  '#0d1117',
+  '#2d2d3a',
+  '#ffffff',
+]
+
+export default function FrameSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const toggleAIModal = useUIStore((s) => s.toggleAIModal)
+  const [frameName, setFrameName] = useState('Frame 1')
+  const [isGraph, setIsGraph] = useState(false)
+  const [fillStyle, setFillStyle] = useState('transparent')
+  const [fillColor, setFillColor] = useState('#1e1e28')
+
+  // Sync state from the actual selected frame when sidebar opens
+  useEffect(() => {
+    if (selectedShapeSidebar === 'frame' || activeTool === TOOLS.FRAME) {
+      const shape = typeof window !== 'undefined' ? window.currentShape : null
+      if (shape && shape.shapeName === 'frame') {
+        if (shape.frameName) setFrameName(shape.frameName)
+        setIsGraph(shape._frameType === 'graph')
+        setFillStyle(shape.fillStyle || 'transparent')
+        setFillColor(shape.fillColor || '#1e1e28')
+      } else {
+        setIsGraph(false)
+        setFillStyle('transparent')
+        setFillColor('#1e1e28')
+      }
+    }
+  }, [selectedShapeSidebar, activeTool])
+
+  const updateName = useCallback((e) => {
+    const name = e.target.value
+    setFrameName(name)
+    const shape = window.currentShape
+    if (shape && shape.shapeName === 'frame') {
+      shape.frameName = name
+      shape.draw()
+    }
+  }, [])
+
+  const updateFillStyle = useCallback((style) => {
+    setFillStyle(style)
+    const shape = window.currentShape
+    if (shape && shape.shapeName === 'frame') {
+      shape.fillStyle = style
+      shape.draw()
+    }
+  }, [])
+
+  const updateFillColor = useCallback((color) => {
+    setFillColor(color)
+    const shape = window.currentShape
+    if (shape && shape.shapeName === 'frame') {
+      shape.fillColor = color
+      shape.draw()
+    }
+  }, [])
+
+  const resizeToFit = useCallback(() => {
+    const shape = window.currentShape
+    if (shape && shape.shapeName === 'frame' && typeof shape.resizeToFitContents === 'function') {
+      shape.resizeToFitContents()
+    }
+  }, [])
+
+  const handleAIEdit = useCallback(() => {
+    const shape = window.currentShape
+    if (shape && shape.shapeName === 'frame') {
+      window.__aiEditTargetFrame = shape
+      toggleAIModal()
+    }
+  }, [toggleAIModal])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.FRAME || selectedShapeSidebar === 'frame'}>
+      <ToolbarButton icon="bxs-rename" tooltip="Frame name">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.name')}</p>
+        <input
+          type="text"
+          value={frameName}
+          onChange={updateName}
+          className="w-32 px-2.5 py-1.5 bg-white/[0.05] border border-white/[0.1] rounded-lg text-white text-xs outline-none focus:border-[#5B57D1]/50 transition-all duration-150 font-[lixFont]"
+          spellCheck={false}
+        />
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Fill style */}
+      <ToolbarButton icon="bxs-palette" tooltip="Fill style">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.background')}</p>
+        <div className="flex gap-1 mb-2.5">
+          {FILL_STYLES.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => updateFillStyle(s.id)}
+              title={s.label}
+              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${
+                fillStyle === s.id
+                  ? 'bg-white/[0.12] text-white'
+                  : 'text-text-muted hover:text-white hover:bg-white/[0.06]'
+              }`}
+            >
+              <i className={`bx ${s.icon} text-sm`} />
+              {s.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Color picker — only show for solid/grid */}
+        {fillStyle !== 'transparent' && (
+          <>
+            <p className="text-xs text-text-muted uppercase tracking-wider mb-1.5">{t('sidebar.sectionHeader.color')}</p>
+            <div className="flex items-center gap-1.5">
+              {FILL_COLORS.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => updateFillColor(c)}
+                  title={c}
+                  className={`w-6 h-6 rounded-md border-2 transition-all duration-100 ${
+                    fillColor === c ? 'border-accent-blue scale-110' : 'border-white/10 hover:border-white/30'
+                  }`}
+                  style={{ backgroundColor: c }}
+                />
+              ))}
+              <label className="w-6 h-6 rounded-md border-2 border-white/10 hover:border-white/30 cursor-pointer overflow-hidden relative transition-all duration-100" title="Custom color">
+                <input
+                  type="color"
+                  value={fillColor}
+                  onChange={(e) => updateFillColor(e.target.value)}
+                  className="absolute inset-0 opacity-0 cursor-pointer"
+                />
+                <i className="bx bx-palette text-xs text-text-muted absolute inset-0 flex items-center justify-center" />
+              </label>
+            </div>
+          </>
+        )}
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bx-image-alt" tooltip="Background image">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.backgroundImage')}</p>
+        <div className="flex gap-1.5 mb-2">
+          <button
+            onClick={() => {
+              const input = document.createElement('input')
+              input.type = 'file'
+              input.accept = IMAGE_ACCEPT_ATTR
+              input.onchange = async (e) => {
+                const file = e.target.files?.[0]
+                if (!file) return
+                if (!isAllowedImage(file)) {
+                  console.warn('[FrameSidebar] Rejected file type:', file.type)
+                  return
+                }
+                const reader = new FileReader()
+                reader.onload = async (ev) => {
+                  const shape = window.currentShape
+                  if (!shape?.shapeName === 'frame' || !shape.setImageFromURL) return
+                  // Compress heavily before setting
+                  try {
+                    const compressed = await compressImage(ev.target.result, { maxWidth: 1280, quality: 0.5 })
+                    shape.setImageFromURL(compressed.dataUrl, shape._frameImageFit || 'cover')
+                  } catch {
+                    shape.setImageFromURL(ev.target.result, shape._frameImageFit || 'cover')
+                  }
+                }
+                reader.readAsDataURL(file)
+              }
+              input.click()
+            }}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-white transition-all duration-100"
+          >
+            <i className="bx bx-upload text-sm" />
+            Set Image
+          </button>
+          <button
+            onClick={() => {
+              const shape = window.currentShape
+              if (shape?.shapeName === 'frame' && shape.setImageFromURL) {
+                shape.setImageFromURL(null)
+                shape.draw()
+              }
+            }}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-red-400 transition-all duration-100"
+          >
+            <i className="bx bx-x text-sm" />
+            Remove
+          </button>
+        </div>
+        {/* Fit controls — only show when frame has an image */}
+        {(() => {
+          const shape = typeof window !== 'undefined' ? window.currentShape : null
+          if (!shape?.shapeName === 'frame' || !shape?._frameImageURL) return null
+          return (
+            <>
+              <p className="text-xs text-text-muted uppercase tracking-wider mb-1.5">{t('sidebar.sectionHeader.fit')}</p>
+              <div className="flex gap-1">
+                {[
+                  { id: 'cover', label: 'Cover' },
+                  { id: 'contain', label: 'Contain' },
+                  { id: 'fill', label: 'Stretch' },
+                ].map((f) => (
+                  <button
+                    key={f.id}
+                    onClick={() => {
+                      const s = window.currentShape
+                      if (s?.shapeName === 'frame' && s.setImageFromURL && s._frameImageURL) {
+                        s.setImageFromURL(s._frameImageURL, f.id)
+                      }
+                    }}
+                    className={`px-2 py-1 rounded-md text-[10px] transition-all ${
+                      shape._frameImageFit === f.id
+                        ? 'bg-white/[0.12] text-white'
+                        : 'text-text-muted hover:text-white hover:bg-white/[0.06]'
+                    }`}
+                  >{f.label}</button>
+                ))}
+              </div>
+            </>
+          )
+        })()}
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-expand" tooltip="Actions">
+        <button onClick={resizeToFit} className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-white transition-all duration-100">
+          <i className="bx bxs-expand text-sm" />
+          Resize to Fit
+        </button>
+      </ToolbarButton>
+
+      {/* AI Edit / Graph Edit removed while AI is coming-soon. Restore the
+          button + handleAIEdit wiring when the assistant ships. */}
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}

package/src/react/components/sidebars/IconSidebar.jsx

@@ -0,0 +1,279 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+// Origin of the icons API. When the package runs same-origin with
+// sketch.elixpo this stays empty (relative path). External hosts (e.g.
+// blogs.elixpo) point at the public sketch.elixpo deploy via
+//   window.__lixsketchIconsOrigin = 'https://sketch.elixpo.com'
+// The endpoints are CORS-enabled so any origin can fetch.
+const DEFAULT_ICONS_ORIGIN = 'https://sketch.elixpo.com';
+function getIconsBaseUrl() {
+  if (typeof window === 'undefined') return '';
+  if (window.__lixsketchIconsOrigin) return window.__lixsketchIconsOrigin;
+  // Same-origin if the host is sketch.elixpo itself; otherwise default to prod.
+  if (typeof location !== 'undefined' && /sketch\.elixpo/.test(location.host)) return '';
+  return DEFAULT_ICONS_ORIGIN;
+}
+
+const iconResultCache = new Map()
+
+const CATEGORIES = [
+  { value: null, label: 'All', icon: 'bxs-grid-alt' },
+  { value: 'tech', label: 'Tech', icon: 'bxs-chip' },
+  { value: 'devops', label: 'DevOps', icon: 'bxs-server' },
+  { value: 'design', label: 'Design', icon: 'bxs-palette' },
+  { value: 'social media', label: 'Social', icon: 'bxs-share-alt' },
+  { value: 'navigation', label: 'Nav', icon: 'bxs-navigation' },
+  { value: 'business', label: 'Business', icon: 'bxs-briefcase' },
+  { value: 'media', label: 'Media', icon: 'bxs-videos' },
+]
+
+// Normalize an SVG string so it renders fully within a fixed box.
+// Ensures the inner <svg> has width/height="100%" and a viewBox.
+function normalizeSvg(raw) {
+  if (!raw) return raw
+  // Parse to a temp element so we can inspect attributes
+  const tmp = document.createElement('div')
+  tmp.innerHTML = raw
+  const svgEl = tmp.querySelector('svg')
+  if (!svgEl) return raw
+
+  // Ensure viewBox exists — derive from width/height if missing
+  if (!svgEl.getAttribute('viewBox')) {
+    const w = parseFloat(svgEl.getAttribute('width')) || 24
+    const h = parseFloat(svgEl.getAttribute('height')) || 24
+    svgEl.setAttribute('viewBox', `0 0 ${w} ${h}`)
+  }
+  // Force the SVG to fill its container
+  svgEl.setAttribute('width', '100%')
+  svgEl.setAttribute('height', '100%')
+  return tmp.innerHTML
+}
+
+function IconCell({ icon, onClick }) {
+  const name = icon.filename?.replace('.svg', '').replace(/_/g, ' ') || ''
+  const normalizedSvg = typeof document !== 'undefined' && icon.svg ? normalizeSvg(icon.svg) : icon.svg
+  return (
+    <button
+      onClick={onClick}
+      title={name}
+      style={{ width: '44px', height: '44px', overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', background: 'transparent', border: 'none', padding: 0 }}
+      className="hover:bg-surface-hover transition-colors duration-100"
+    >
+      {normalizedSvg ? (
+        <div
+          style={{ width: '24px', height: '24px', overflow: 'visible', flexShrink: 0, pointerEvents: 'none', filter: 'brightness(0) invert(1)' }}
+          dangerouslySetInnerHTML={{ __html: normalizedSvg }}
+        />
+      ) : (
+        <img
+          src={`/icons/${encodeURIComponent(icon.filename)}`}
+          alt=""
+          style={{ width: '24px', height: '24px', pointerEvents: 'none', filter: 'invert(1)' }}
+          loading="lazy"
+        />
+      )}
+    </button>
+  )
+}
+
+export default function IconSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const setActiveTool = useSketchStore((s) => s.setActiveTool)
+  const visible = activeTool === TOOLS.ICON
+  const [query, setQuery] = useState('')
+  const [category, setCategory] = useState(null)
+  const [icons, setIcons] = useState([])
+  const [loading, setLoading] = useState(false)
+  const debounceRef = useRef(null)
+
+  // Close on Escape
+  useEffect(() => {
+    if (!visible) return
+    const handler = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        setActiveTool(TOOLS.SELECT)
+      }
+    }
+    document.addEventListener('keydown', handler, true)
+    return () => document.removeEventListener('keydown', handler, true)
+  }, [visible, setActiveTool])
+
+  // Close when clicking on the canvas (outside the sidebar)
+  useEffect(() => {
+    if (!visible) return
+    const svgEl = document.getElementById('freehand-canvas')
+    if (!svgEl) return
+    const handleCanvasClick = () => setActiveTool(TOOLS.SELECT)
+    svgEl.addEventListener('mousedown', handleCanvasClick)
+    return () => svgEl.removeEventListener('mousedown', handleCanvasClick)
+  }, [visible, setActiveTool])
+
+  const fetchIcons = useCallback(async (searchQuery, cat) => {
+    const params = new URLSearchParams()
+    if (searchQuery) params.set('q', searchQuery)
+    if (cat) params.set('category', cat)
+    params.set('inline', '1')
+    const cacheKey = params.toString()
+
+    // Return cached results instantly if available
+    if (iconResultCache.has(cacheKey)) {
+      setIcons(iconResultCache.get(cacheKey))
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await fetch(`${getIconsBaseUrl()}/api/icons/search?${cacheKey}`)
+      if (res.ok) {
+        const data = await res.json()
+        const results = data.results || []
+        iconResultCache.set(cacheKey, results)
+        setIcons(results)
+      }
+    } catch (err) {
+      console.error('Icon fetch failed:', err)
+    }
+    setLoading(false)
+  }, [])
+
+  // Fetch icons when visibility, query, or category changes (debounced for query typing)
+  useEffect(() => {
+    if (!visible) return
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => {
+      fetchIcons(query, category)
+    }, query ? 300 : 0)
+    return () => clearTimeout(debounceRef.current)
+  }, [query, visible, category, fetchIcons])
+
+  // Preload all categories in background on first sidebar open
+  const hasPreloaded = useRef(false)
+  useEffect(() => {
+    if (!visible || hasPreloaded.current) return
+    hasPreloaded.current = true
+    // Fire-and-forget: preload each category so switching is instant
+    CATEGORIES.forEach((cat) => {
+      const params = new URLSearchParams()
+      if (cat.value) params.set('category', cat.value)
+      params.set('inline', '1')
+      const key = params.toString()
+      if (!iconResultCache.has(key)) {
+        fetch(`${getIconsBaseUrl()}/api/icons/search?${key}`)
+          .then((r) => r.ok ? r.json() : null)
+          .then((data) => { if (data?.results) iconResultCache.set(key, data.results) })
+          .catch(() => {})
+      }
+    })
+  }, [visible])
+
+  const handleIconClick = useCallback((icon) => {
+    if (typeof window === 'undefined') return
+    const place = (svgContent) => {
+      if (window.prepareIconPlacement) {
+        window.prepareIconPlacement(svgContent)
+      } else {
+        window.iconToPlace = svgContent
+      }
+    }
+    if (icon.svg) {
+      place(icon.svg)
+    } else {
+      fetch(`${getIconsBaseUrl()}/api/icons/serve?name=${encodeURIComponent(icon.filename)}`)
+        .then((r) => r.text())
+        .then(place)
+        .catch(() => {})
+    }
+  }, [])
+
+  return (
+    <div
+      className={`absolute top-[60px] right-2 bottom-[56px] w-[300px] bg-surface border border-border-light rounded-2xl z-[999] font-[lixFont] flex flex-col transition-transform duration-200 ${
+        visible ? 'translate-x-0' : 'translate-x-full'
+      }`}
+    >
+      {/* Header */}
+      <div className="px-3.5 pt-3.5 pb-2 shrink-0">
+        <div className="flex items-center justify-between mb-2.5">
+          <h3 className="text-text-primary text-sm font-medium">Icons</h3>
+          <button
+            onClick={() => setActiveTool(TOOLS.SELECT)}
+            className="w-6 h-6 flex items-center justify-center rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors duration-100"
+            title="Close (Esc)"
+          >
+            <i className="bx bx-x text-lg" />
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="flex items-center gap-2 bg-surface-hover border border-border-light rounded-lg px-2.5 py-2">
+          <i className="bx bxs-search text-text-muted text-sm" />
+          <input
+            id="iconSearchInput"
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search icons..."
+            className="flex-1 bg-transparent text-text-primary text-sm outline-none placeholder:text-text-dim"
+            spellCheck={false}
+          />
+          {query && (
+            <button onClick={() => setQuery('')} className="text-text-dim hover:text-text-secondary">
+              <i className="bx bxs-x-circle text-sm" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Categories */}
+      <div className="flex flex-wrap gap-1 px-3.5 pb-2.5 shrink-0">
+        {CATEGORIES.map((cat) => (
+          <button
+            key={cat.value || 'all'}
+            onClick={() => setCategory(cat.value)}
+            className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs whitespace-nowrap transition-colors duration-100 ${
+              category === cat.value
+                ? 'bg-accent-blue/20 text-accent-blue-hover'
+                : 'text-text-muted hover:bg-surface-hover hover:text-text-primary'
+            }`}
+          >
+            <i className={`bx ${cat.icon} text-xs`} />
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Divider */}
+      <div className="h-px bg-surface-hover mx-3.5 shrink-0" />
+
+      {/* Icon grid — scrollable */}
+      <div className="flex-1 overflow-y-auto no-scrollbar px-3 py-2.5" id="iconsContainer">
+        {loading ? (
+          <div className="flex items-center justify-center py-12 text-text-muted text-sm">
+            <i className="bx bxs-hourglass bx-spin text-lg mr-2" />
+            Loading...
+          </div>
+        ) : icons.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-text-muted text-sm">
+            No icons found
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', gap: '2px' }}>
+            {icons.map((icon, i) => (
+              <IconCell
+                key={icon.filename || i}
+                icon={icon}
+                onClick={() => handleIconClick(icon)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/react/components/sidebars/ImageSidebar.jsx

@@ -0,0 +1,69 @@
+"use client"
+
+import useSketchStore from '../../store/useSketchStore'
+import useUIStore from '../../store/useUIStore'
+import ShapeSidebar, { Divider, LayerControls } from './ShapeSidebar'
+import { useCallback } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export default function ImageSidebar() {
+  const { t } = useTranslation()
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const toggleImageGenerateModal = useUIStore((s) => s.toggleImageGenerateModal)
+
+  const handleEditWithAI = useCallback(() => {
+    const shape = window.currentShape
+    if (!shape || shape.shapeName !== 'image') return
+
+    // Get the image URL from the element
+    const el = shape.element
+    const href = el?.getAttribute('href') || el?.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
+    const w = parseFloat(el?.getAttribute('width')) || 512
+    const h = parseFloat(el?.getAttribute('height')) || 512
+
+    // Store reference for the modal to pick up
+    window.__editImageRef = { imageUrl: href, width: w, height: h, shape }
+    toggleImageGenerateModal()
+  }, [toggleImageGenerateModal])
+
+  const handleReplace = useCallback(() => {
+    if (window.openImageFilePicker) {
+      // Store current shape so the new image replaces it
+      window.__replaceImageShape = window.currentShape
+      window.openImageFilePicker()
+    }
+  }, [])
+
+  return (
+    <ShapeSidebar visible={selectedShapeSidebar === 'image'}>
+      {/* Edit with AI */}
+      <button
+        onClick={handleEditWithAI}
+        title="Edit with AI"
+        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+          <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
+        </svg>
+        <span className="text-xs">AI Edit</span>
+      </button>
+
+      <Divider />
+
+      {/* Replace image */}
+      <button
+        onClick={handleReplace}
+        title="Replace image"
+        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100"
+      >
+        <i className="bx bx-upload text-base" />
+        <span className="text-xs">Replace</span>
+      </button>
+
+      <Divider />
+
+      {/* Layer controls */}
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}