intable 0.0.6 → 0.0.8

package/packages/react/src/plugins/antd.ts

@@ -0,0 +1,94 @@
+import type { Plugin } from 'intable'
+import type { Editor } from 'intable/plugins/EditablePlugin'
+import { resolveOptions } from 'intable/utils'
+
+import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from 'antd'
+import { useEffect, useRef, useState, createElement as h, type FC } from 'react'
+import { createRoot } from 'react-dom/client'
+
+export const AntdPlugin: Plugin = {
+  name: 'antd',
+  store(store) {
+    store.editors.text = editor(Input)
+    store.editors.number = editor(InputNumber)
+    store.editors.rate = editor(Rate)
+    store.editors.switch = editor(Switch)
+    store.editors.checkbox = editor(Checkbox)
+    store.editors.color = selector(ColorPicker, { transform: v => v?.toHexString?.() || v })
+    store.editors.select = selector(Select)
+    store.editors.date = selector(DatePicker)
+    store.editors.time = selector(TimePicker)
+    store.editors.datetime = selector(DatePicker, { showTime: true })
+  },
+  rewriteProps: {
+    class: ({ class: clazz }) => `antd ${clazz}`
+  }
+}
+
+const getEl = (el: any) => {
+  if (!el) return el
+  if (el instanceof Text) el = el.nextElementSibling
+  return el?.querySelector('input') ?? el?.querySelector('button') ?? el?.querySelector('[class*=trigger]') ?? el
+}
+
+const createEditor = (Comp: FC<any>, opts: any, isSelector?: boolean): Editor => (editorOpts) => {
+  const { eventKey, value, col, ok, cancel, props } = editorOpts
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  
+  let currentValue = eventKey || value
+  let elRef: any
+  
+  const EditorComp = () => {
+    const [val, setVal] = useState(currentValue)
+    const ref = useRef<any>(null)
+    
+    useEffect(() => {
+      elRef = ref.current
+      if (isSelector) {
+        setTimeout(() => (getEl(ref.current)?.click?.(), ref.current?.focus?.()), 0)
+      } else {
+        ref.current?.focus?.()
+      }
+    }, [])
+    
+    const handleChange = (newVal: any) => {
+      currentValue = opts.transform ? opts.transform(newVal) : newVal
+      setVal(currentValue)
+      isSelector && setTimeout(ok, 100)
+    }
+    
+    const handleKeyDown = (e: any) => {
+      e.stopPropagation()
+      if (e.key === 'Enter') ok()
+      if (e.key === 'Escape') cancel()
+    }
+    
+    return h(Comp, {
+      ref,
+      value: val,
+      onChange: handleChange,
+      onPointerDown: (e: any) => e.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      ...(col?.enum && { options: resolveOptions(col.enum) }),
+      ...opts,
+      ...props,
+    })
+  }
+  
+  root.render(h(EditorComp))
+  
+  const fragment = document.createDocumentFragment()
+  fragment.appendChild(container)
+  
+  return {
+    el: fragment,
+    getValue: () => currentValue,
+    destroy: () => root.unmount(),
+    focus: () => (isSelector && getEl(elRef)?.click?.(), elRef?.focus?.()),
+    blur: () => elRef?.blur?.(),
+  }
+}
+
+const editor = (Comp: FC<any>, opts = {}) => createEditor(Comp, opts, false)
+const selector = (Comp: FC<any>, opts = {}) => createEditor(Comp, opts, true)

package/packages/react/src/style.scss

@@ -0,0 +1,12 @@
+.antd {
+  .is-editing {
+    & > .area { @apply hidden; }
+  }
+  .in-cell-edit-wrapper {
+    @apply flex items-center p-1;
+
+    > .ant-input-affix-wrapper > .ant-input-prefix {
+      @apply hidden;
+    }
+  }
+}

package/packages/react/src/types/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

package/packages/vue/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@intable/vue",
+  "version": "0.0.8",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@vue/shared": "^3.5.27",
+    "intable": "workspace:^",
+    "solid-js": "^1.9.9"
+  },
+  "peerDependencies": {
+    "vue": "^3"
+  },
+  "devDependencies": {
+    "element-plus": "^2.13.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/packages/vue/src/index.ts

@@ -0,0 +1,63 @@
+import { onCleanup, createRenderEffect } from 'solid-js'
+import { type Plugin, type TableProps } from 'intable'
+import 'intable/wc'
+import './style.scss'
+
+// import '../../intable/src/wc'
+
+export type { TableProps } from 'intable'
+
+import { h, normalizeClass, toRaw, render, type Component, type FunctionalComponent, type App } from 'vue'
+import { stringifyStyle } from '@vue/shared'
+import { mapValues } from 'es-toolkit'
+
+export const Intable: FunctionalComponent<TableProps> = ((props) => (
+  props = mapValues(props, v => toRaw(v)),
+  h('wc-table', {
+    style: 'display: contents',
+    '.options': {
+      ...props,
+      class: normalizeClass(props.class),
+      style: stringifyStyle(props.style),
+      renderer: component,
+      plugins: [
+        VModelPlugin,
+        ...props.plugins || []
+      ]
+    } as TableProps
+  })
+))
+
+Intable.inheritAttrs = false
+Intable.__name = 'intable'
+Intable.install = app => app.component(Intable.__name, Intable)
+
+const VModelPlugin: Plugin = {
+  name: 'v-model',
+  rewriteProps: {
+    rowSelection: ({ rowSelection }, { store }) => ({
+      get value() { return store.props?.selected },
+      ...rowSelection,
+      onChange(selected) {
+        store.props!['onUpdate:selected']?.(selected)
+        rowSelection?.onChange?.(...arguments)
+      },
+    }),
+    onDataChange: ({ onDataChange }, { store }) => (data) => {
+      store.props!['onUpdate:data']?.(data)
+      onDataChange?.(data)
+    }
+  }
+}
+
+const component = <T extends Record<string, any>>(Comp: Component<T>) => {
+  return (props: T) => {
+    const root = document.createDocumentFragment()
+    root.remove ??= () => {}
+    createRenderEffect(() => render(h(Comp, { ...props }), root))
+    onCleanup(() => render(null, root))
+    return root
+  }
+}
+
+export default Intable

package/packages/vue/src/plugins/element-plus.ts

@@ -0,0 +1,69 @@
+import type { Plugin } from 'intable'
+import type { Editor } from 'intable/plugins/EditablePlugin'
+import { resolveOptions } from 'intable/utils'
+
+import { ElCheckbox, ElColorPicker, ElDatePicker, ElInput, ElInputNumber, ElRate, ElSelect, ElSwitch, ElTimePicker } from 'element-plus'
+import { type Component, h, mergeProps, ref, render } from 'vue'
+
+export const ElementPlusPlugin: Plugin = {
+  store(store) {
+    store.editors.text = createEditor(ElInput)
+    store.editors.number = createEditor(ElInputNumber)
+    store.editors.rate = createEditor(ElRate)
+    store.editors.switch = createEditor(ElSwitch)
+    store.editors.checkbox = createEditor(ElCheckbox)
+    store.editors.color = createEditor(ElColorPicker, {}, true)
+    store.editors.select = createEditor(ElSelect, {}, true)
+    store.editors.date = createEditor(ElDatePicker, { valueFormat: 'YYYY-MM-DD' }, true)
+    store.editors.time = createEditor(ElTimePicker, {}, true)
+    store.editors.datetime = createEditor(ElDatePicker, { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' }, true)
+  },
+  rewriteProps: {
+    class: ({ class: clazz }) => `element-plus ${clazz}`
+  }
+}
+
+const getElement = (el: any) => {
+  if (!el) return el
+  if (el instanceof Text) el = el.nextElementSibling
+  return el.querySelector('input') ?? el.querySelector('button') ?? el.querySelector('[class*=__trigger]') ?? el
+}
+
+const createEditor = (Comp: Component, extra?, isSelector?): Editor => {
+  return ({ eventKey, value, col, ok, cancel, props }) => {
+    const v = ref(isSelector ? value : (eventKey || value))
+    const elref = ref()
+    const root = document.createDocumentFragment()
+    root.remove ??= () => {}
+    
+    const App = () => h(Comp, mergeProps(extra, props, {
+      ref: elref,
+      modelValue: v.value,
+      'onUpdate:modelValue': (val) => v.value = val,
+      onPointerdown: (e: Event) => e.stopPropagation(),
+      onMousedown: (e: Event) => e.stopPropagation(),
+      onKeydown: (e: KeyboardEvent) => {
+        e.stopPropagation()
+        if (e.key === 'Enter') ok()
+        if (e.key === 'Escape') cancel()
+      },
+      ...isSelector ? {
+        onChange: () => ok(),
+        options: resolveOptions(col.enum ?? []),
+      } : {}
+    }))
+
+    render(h(App), root)
+    
+    return {
+      el: root,
+      getValue: () => v.value,
+      destroy: () => render(null, root),
+      focus: () => {
+        if (isSelector) getElement(elref.value?.$el)?.click()
+        elref.value?.focus?.()
+      },
+      blur: () => elref.value?.blur?.(),
+    }
+  }
+}

package/packages/vue/src/style.scss

@@ -0,0 +1,12 @@
+.element-plus {
+  .is-editing {
+    & > .area { @apply hidden; }
+  }
+  .in-cell-edit-wrapper {
+    @apply flex items-center  p-1;
+
+    > .el-input > .el-input__wrapper > .el-input__prefix {
+      @apply hidden;
+    }
+  }
+}

package/packages/vue/src/types/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/scripts/build.js

@@ -0,0 +1,184 @@
+import { resolve, join, dirname, relative, extname } from 'path'
+import { fileURLToPath } from 'url'
+import { readFileSync, readdirSync, existsSync, rmSync, cpSync, writeFileSync } from 'fs'
+import { build } from 'vite'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const rootDir = resolve(__dirname, '..')
+const packagesDir = resolve(rootDir, 'packages')
+
+// 获取所有包目录
+function getPackages() {
+  const packages = []
+  const dirs = readdirSync(packagesDir)
+
+  for (const dir of dirs) {
+    const packagePath = join(packagesDir, dir)
+    const packageJsonPath = join(packagePath, 'package.json')
+
+    if (existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
+      packages.push({
+        name: packageJson.name || dir,
+        path: packagePath,
+        packageJson,
+      })
+    }
+  }
+
+  return packages
+}
+
+// 构建单个包
+async function buildPackage(pkg) {
+  console.log(`\n📦 Building ${pkg.name}...`)
+
+  const distPath = join(pkg.path, 'dist')
+
+  try {
+    await build({
+      configFile: process.cwd() + '/vite.config.ts',
+      root: pkg.path,
+      build: {
+        outDir: 'dist',
+        lib: {
+          // preserve modules
+          entry: Object.fromEntries(readdirSync(join(pkg.path, 'src'), { withFileTypes: false, recursive: true }).filter(e => /\.[tj]sx?$/.test(e)).map(e => [
+            e.slice(0, e.length - extname(e).length),
+            join('src', e)
+          ])),
+          formats: ['es'],
+          cssFileName: 'style',
+        },
+        rollupOptions: {
+          external: id => {
+            // 排除所有外部依赖
+            const externals = Object.keys({
+              ...pkg.packageJson.dependencies,
+              ...pkg.packageJson.devDependencies,
+              ...pkg.packageJson.peerDependencies,
+            })
+
+            // 排除特定的外部依赖
+            return externals.some(ext => id === ext || id.startsWith(ext + '/'))
+          },
+          output: {
+            preserveModules: true,
+            // preserveModulesRoot: join(pkg.path, 'src'),
+            // entryFileNames: '[name].js',
+            // entryFileNames: m => m.moduleIds.some(e => e.includes('node_modules')) ? 'vendor.js' : m.name + '.js',
+            advancedChunks: {
+              groups: [
+                { name: (id) => id.includes('node_modules') ? 'vendor' : null },
+              ],
+            }
+          },
+        },
+        sourcemap: false,
+        minify: true,
+        emptyOutDir: true,
+      },
+      plugins: [
+        (await import('vite-plugin-lib-inject-css')).libInjectCss()
+      ]
+    })
+
+    // // 复制 style.scss 文件
+    // const stylePath = join(pkg.path, 'src/style.scss')
+    // if (existsSync(stylePath)) {
+    //   cpSync(stylePath, join(distPath, 'style.scss'))
+    //   console.log('  ✓ Copied style.scss')
+    // }
+
+    if (existsSync(join(pkg.path, 'src/theme'))) {
+      cpSync(join(pkg.path, 'src/theme'), join(distPath, 'theme'), { recursive: true })
+    }
+
+    // fix: unocss
+    if (existsSync(join(pkg.path, 'dist/__uno.css'))) {
+      const uno = readFileSync(join(pkg.path, 'dist/__uno.css'), { encoding: 'utf8' })
+      const rewrite = (path, fn) => writeFileSync(path, fn(readFileSync(path, { encoding: 'utf8' })))
+      rewrite(join(pkg.path, 'dist/style.css'), str => uno + '\n' + str)
+      rewrite(join(pkg.path, 'dist/index.js'), str => str.replace(`import './__uno.css'`, ''))
+    }
+
+
+    console.log(`✅ ${pkg.name} built successfully!`)
+
+    await genDts(pkg.path)
+  } catch (error) {
+    console.error(`❌ Failed to build ${pkg.name}:`, error)
+    throw error
+  }
+}
+
+// 使用 tsc 生成类型定义（跳过错误）
+async function genDts(cwd) {
+  console.log('  📝 Generating TypeScript declarations...')
+  try {
+    const distPath = join(cwd, 'dist')
+    const { execSync } = await import('child_process')
+    const { writeFileSync } = await import('fs')
+
+    // 创建临时 tsconfig 用于生成类型定义
+    const tempTsConfig = {
+      extends: './tsconfig.app.json',
+      compilerOptions: {
+        declaration: true,
+        emitDeclarationOnly: true,
+        noEmit: false,
+        outDir: distPath,
+        skipLibCheck: true,
+        noUnusedLocals: false,
+        noUnusedParameters: false,
+        jsx: 'preserve',
+        jsxImportSource: 'solid-js',
+      },
+      include: ['src'],
+    }
+
+    const tempConfigPath = join(cwd, 'tsconfig.dts.json')
+    writeFileSync(tempConfigPath, JSON.stringify(tempTsConfig, null, 2))
+
+    try {
+      execSync(`pnpm exec tsc --project tsconfig.dts.json --skipLibCheck --noCheck`, { cwd, stdio: 'pipe' })
+    } catch (tscExecError) {
+      // 即使有错误也尝试查找生成的文件
+      const dtsFiles = readdirSync(distPath, { recursive: true }).filter(f => f.endsWith('.d.ts'))
+      if (dtsFiles.length > 0) {
+        console.log(`  ℹ Generated ${dtsFiles.length} declaration files (with some errors)`)
+      } else {
+        throw tscExecError
+      }
+    }
+
+    // 删除临时配置文件
+    rmSync(tempConfigPath, { force: true })
+
+    console.log('  ✓ TypeScript declarations generated')
+  } catch (tscError) {
+    console.log('  ⚠ TypeScript declarations skipped')
+    // 不抛出错误，允许构建继续
+  }
+}
+
+// 主函数
+async function main() {
+  console.log('🚀 Starting package build process...\n')
+
+  const packages = getPackages()
+  console.log(`Found ${packages.length} package(s):`, packages.map(p => p.name).join(', '))
+
+  // 依次构建每个包
+  for (const pkg of packages) {
+    await buildPackage(pkg)
+  }
+
+  console.log('\n✨ All packages built successfully!')
+}
+
+// 执行构建
+main().catch(error => {
+  console.error('Build failed:', error)
+  process.exit(1)
+})

package/scripts/publish.js

@@ -0,0 +1,95 @@
+import { resolve, join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs'
+import { execSync } from 'child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const rootDir = resolve(__dirname, '..')
+const packagesDir = resolve(rootDir, 'packages')
+
+// 获取根目录的版本号
+function getRootVersion() {
+  const rootPackageJsonPath = join(rootDir, 'package.json')
+  const rootPackageJson = JSON.parse(readFileSync(rootPackageJsonPath, 'utf-8'))
+  return rootPackageJson.version
+}
+
+// 获取所有包目录
+function getPackages() {
+  const packages = []
+  const dirs = readdirSync(packagesDir)
+
+  for (const dir of dirs) {
+    const packagePath = join(packagesDir, dir)
+    const packageJsonPath = join(packagePath, 'package.json')
+
+    if (existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
+      packages.push({
+        name: packageJson.name || dir,
+        path: packagePath,
+        packageJson,
+        packageJsonPath
+      })
+    }
+  }
+
+  return packages
+}
+
+// 同步版本号到子包
+function syncVersion(packages, version) {
+  console.log(`\n🔄 Syncing version ${version} to all packages...`)
+  
+  for (const pkg of packages) {
+    if (pkg.packageJson.version !== version) {
+      pkg.packageJson.version = version
+      writeFileSync(pkg.packageJsonPath, JSON.stringify(pkg.packageJson, null, 2))
+      console.log(`  ✅ Updated ${pkg.name} to version ${version}`)
+    } else {
+      console.log(`  ℹ ${pkg.name} already at version ${version}`)
+    }
+  }
+}
+
+// 发布子包
+function publishPackage(pkg) {
+  console.log(`\n📤 Publishing ${pkg.name}...`)
+  
+  try {
+    execSync(`pnpm publish --no-git-checks --filter ${pkg.name}`, { cwd: rootDir, stdio: 'inherit' })
+    console.log(`  ✅ ${pkg.name} published successfully!`)
+  } catch (error) {
+    console.error(`  ❌ Failed to publish ${pkg.name}:`, error.message)
+    throw error
+  }
+}
+
+// 主函数
+async function main() {
+  console.log('🚀 Starting publish process...\n')
+
+  // 获取根目录版本号
+  const version = getRootVersion()
+  console.log(`Root version: ${version}`)
+
+  // 获取所有子包
+  const packages = getPackages()
+  console.log(`Found ${packages.length} package(s):`, packages.map(p => p.name).join(', '))
+
+  // 同步版本号
+  syncVersion(packages, version)
+
+  // 依次发布每个子包
+  for (const pkg of packages) {
+    await publishPackage(pkg)
+  }
+
+  console.log('\n✨ All packages published successfully!')
+}
+
+// 执行发布
+main().catch(error => {
+  console.error('Publish failed:', error)
+  process.exit(1)
+})

package/src/assets/ClearFormat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m14.031 1.888l9.657 9.657l-8.345 8.345l-.27.272H20v2H6.748L.253 15.667zm.322 16.164l6.507-6.507l-6.829-6.828l-6.828 6.828l6.828 6.828l.32-.323zM5.788 12.96l-2.707 2.707l4.495 4.495h4.68l.365-.37z" />
+</svg>

package/src/assets/Forms.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M12 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3m7-14h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7M5 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1m12-5h.01M13 12h.01" />
+</svg>

package/src/assets/MergeCell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z" />
+</svg>

package/src/assets/SplitCell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z" />
+</svg>

package/src/assets/gap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M19 5h-4v14h4v-2h-2V7h2zM5 5h4v14H5v-2h2V7H5zm8 2v10h-2V7z" />
+</svg>

package/src/assets/loading.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g>
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" />
+    <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
+    <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+  </g>
+</svg>

package/src/assets/paint.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+    color="currentColor">
+    <path
+      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.842 0 2 .116 2-1c0-.609-.317-1.079-.631-1.546c-.46-.683-.917-1.359-.369-2.454c.667-1.333 1.778-1.333 3.482-1.333c.851 0 1.851 0 3.018-.167c2.101-.3 2.5-1.592 2.5-3.5M7 15.002L7.009 15" />
+    <circle cx="9.5" cy="8.5" r="1.5" />
+    <circle cx="16.5" cy="9.5" r="1.5" />
+  </g>
+</svg>

package/src/assets/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>