react-edit-to-html 1.1.0

package/LICENSE

@@ -0,0 +1,10 @@
+Proprietary License
+
+Copyright (c) 2026 BEO Software (https://beo-software.in/)
+
+All rights reserved. 
+
+Unauthorized copying, distribution, modification, or use of this software, 
+via any medium, is strictly prohibited. This software is proprietary and confidential.
+
+For inquiries, please contact BEO Software via https://beo-software.in/.

package/README.md

@@ -0,0 +1,264 @@
+# react-edit-to-html
+
+`react-edit-to-html` is a premium, highly customizable, responsive React drag-and-drop template builder for creating dynamic HTML layouts. It is perfect for generating backend templates (invoices, shipping lists, email templates, billing letters, reports, etc.) that get populated with dynamic data.
+
+The editor allows you to structure tables, images, text, and barcodes, preview them in real time with custom mock values, configure loop templates for multiple template engines (Handlebars, Liquid, Scriban, .NET, C#), and export clean, production-ready HTML files.
+
+---
+
+## Key Features
+
+- 🛠 **Drag-and-Drop Canvas:** Select element blocks (headings, paragraphs, tables, images, barcodes) from the sidebar and drag them onto the paper canvas.
+- 🔄 **Multi-Syntax Loop Templates:** Pick your templating engine (Handlebars, Liquid, Scriban, JS/TS maps, C#/Razor, or Custom tags) for dynamic table looping.
+- 📊 **Dynamic Mock Visualizer:** View variables substituted instantly with mock data. Edit mock values for placeholders and raw JSON rows directly in the sidebar.
+- 🎨 **Advanced Styles & Custom CSS:** Customize padding, margin, sizing, and colors. Write custom inline CSS styles (e.g. `border-radius: 8px; border: 1px dashed slate;`) for a WYSIWYG editing experience.
+- 🔤 **Custom Typography:** Register custom font sizes and Google Fonts directly in the panel.
+- 🖼 **Custom Image Types & Neutral SVGs:** Register custom graphic categories (e.g., Signature, Thumbnail) on the fly, with standard clean base64 image placeholders.
+- 📱 **Fully Responsive Layout:** Automatically stacks vertically on smaller screens and side-by-side on larger desktop screens.
+- ⚡ **PDF & HTML Importing:** Import existing HTML templates or parse digital PDF text layers directly into editable canvas blocks.
+- 💾 **Silent Callbacks:** Custom handlers for block changes and template exports instead of intrusive alerts.
+
+---
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install react-edit-to-html
+```
+
+Make sure to import the CSS stylesheet in your main React application entry point (e.g. `App.tsx` or `main.tsx`) so that the editor displays correctly:
+
+```typescript
+import 'react-edit-to-html/dist/react-edit-to-html.css';
+```
+
+---
+
+## Usage
+
+Here is a basic example of how to embed `react-edit-to-html` in a React application:
+
+```tsx
+import React from 'react';
+import HtmlEditor from 'react-edit-to-html';
+import 'react-edit-to-html/dist/react-edit-to-html.css';
+
+export default function MyBuilderPage() {
+  const customTables = [
+    {
+      tableName: 'order_items',
+      columns: [
+        { columnName: 'Item Name', placeholder: '{{item.name}}', enabled: true },
+        { columnName: 'SKU', placeholder: '{{item.sku}}', enabled: true },
+        { columnName: 'Price', placeholder: '{{item.price}}', enabled: true }
+      ],
+      loop: true,
+      isNestable: false,
+      parentPath: 'order',
+      maxNestingDepth: 5,
+      nestingPrefix: ' ',
+      showNestingLevel: false
+    }
+  ];
+
+  const customPlaceholders = [
+    { label: 'Invoice ID', placeholder: '{{invoice_id}}', category: 'General', mockValue: 'INV-2026-9021' },
+    { label: 'Customer Name', placeholder: '{{customer_name}}', category: 'General', mockValue: 'Sophia Mueller' }
+  ];
+
+  const handleBlocksChange = (blocks) => {
+    console.log('Canvas updated:', blocks);
+  };
+
+  const handleExportHtml = (html) => {
+    console.log('Exported HTML markup:', html);
+    // You can send this HTML markup directly to your backend API or save it!
+  };
+
+  return (
+    <div style={{ height: '100vh', width: '100vw' }}>
+      <HtmlEditor
+        headerTitle="Custom Document Designer"
+        headerSubtitle="Build invoices & export dynamic templates"
+        tableSchemas={customTables}
+        placeholders={customPlaceholders}
+        templatingLanguage="handlebars"
+        loopSyntax="each"
+        onChange={handleBlocksChange}
+        onExport={handleExportHtml}
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## Props Reference
+
+```ts
+type TableColumn = {
+  columnName: string;
+  placeholder: string;
+  enabled?: boolean;
+  loop?: boolean; // Set to true to make column a nested sub-table loop
+  columns?: TableColumn[]; // Sub-table column definitions when loop is true
+};
+
+type TableSchemaInfo = {
+  tableName: string;
+  columns: TableColumn[];
+  loop: boolean;
+  isNestable?: boolean;
+  parentPath?: string;
+  maxNestingDepth?: number;
+  nestingPrefix?: string;
+  showNestingLevel?: boolean;
+  loopStartTag?: string;
+  loopEndTag?: string;
+  mockRows?: any[];
+};
+
+type PlaceholderItem = {
+  label: string;
+  placeholder: string;
+  mockValue?: string;
+};
+
+interface HtmlEditorProps {
+  tableSchemas?: TableSchemaInfo[];
+  placeholders?: PlaceholderItem[];
+  defaultLogo?: string;
+  defaultBanner?: string;
+  headerTitle?: string;
+  headerSubtitle?: string;
+  headerLogo?: React.ReactNode;
+  templatingLanguage?: 'handlebars' | 'liquid' | 'scriban' | 'dotnet' | 'js' | 'csharp' | 'custom';
+  loopSyntax?: 'for' | 'foreach' | 'each';
+  onChange?: (blocks: CanvasBlock[]) => void;
+  onExport?: (html: string) => void;
+  onExportPdf?: (html: string) => void;
+  initialBlocks?: CanvasBlock[];
+  defaultStyles?: Record<string, Partial<TextStyle>>;
+  showImportHtml?: boolean;
+  showImportPdf?: boolean;
+  showClearCanvas?: boolean;
+  showPreview?: boolean;
+  showExport?: boolean;
+  showExportPdf?: boolean;
+  /** Allows passing custom CSS inline style properties dynamically to any of the header actions (importHtml, importPdf, clearCanvas, preview, export) */
+  customButtonStyles?: Record<string, React.CSSProperties>;
+  /** Allows passing custom CSS class names dynamically to customize/override button class sheets for header actions */
+  customButtonClassNames?: Record<string, string>;
+}
+```
+
+| Prop | Type | Default | Details |
+| :--- | :--- | :--- | :--- |
+| `tableSchemas` | `TableSchemaInfo[]` | `[]` | Configures dynamic table schemas. Supports top-level loop tables and nested sub-tables (`loop: true` with `columns`). |
+| `placeholders` | `PlaceholderItem[]` | `[]` | Controls variables shown in the Placeholders tab and mock values (`mockValue`) used by preview rendering. Left empty by default until passed as a prop. |
+| `defaultLogo` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `logo` image blocks. Accepts URL or base64 data URI. |
+| `defaultBanner` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `banner` image blocks. Accepts URL or base64 data URI. |
+| `headerTitle` | `string` | `'Layout Designer'` | Header title text displayed at the top of the editor. |
+| `headerSubtitle` | `string` | `'Interactive Document HTML Builder'` | Header subtitle text displayed below the title. |
+| `headerLogo` | `React.ReactNode` | Sparkles icon badge | Custom header logo node. If omitted, the built-in orange Sparkles badge is rendered. |
+| `templatingLanguage` | `'handlebars' \| 'liquid' \| 'scriban' \| ...` | `'handlebars'` | Sets initial loop-tag generation mode for table export. |
+| `loopSyntax` | `'for' \| 'foreach' \| 'each'` | `'each'` | Sets initial mapping keyword used by the loop-tag generator. |
+| `onChange` | `(blocks: CanvasBlock[]) => void` | `undefined` | Fired whenever canvas blocks state changes. |
+| `onExport` | `(html: string) => void` | `undefined` | Called when user clicks Export Template. If omitted, it automatically downloads `template.html`. |
+| `onExportPdf` | `(html: string) => void` | `undefined` | Called when user clicks Download PDF. If omitted, it defaults to triggering `window.print()` for a native PDF preview. |
+| `initialBlocks` | `CanvasBlock[]` | `[]` | Pass preloaded blocks to initialize the layout canvas (e.g. from previously exported session or DB templates). |
+| `defaultStyles` | `Record<string, Partial<TextStyle>>` | `{}` | Key-value dictionary providing pre-defined styling configurations for elements dropped or created in the canvas (e.g. `{ h1: { fontSize: '24px', fontWeight: 'bold' } }`). |
+| `showImportHtml` | `boolean` | `true` | Show/hide the "Import HTML" action button in the header. |
+| `showImportPdf` | `boolean` | `true` | Show/hide the "Import PDF" action button in the header. |
+| `showClearCanvas` | `boolean` | `true` | Show/hide the "Clear Canvas" utility button in the canvas toolbar. |
+| `showPreview` | `boolean` | `true` | Show/hide the "Live Preview" action button in the header. |
+| `showExport` | `boolean` | `true` | Show/hide the "Export Template" action button in the header. |
+| `showExportPdf` | `boolean` | `true` | Show/hide the "Download PDF" action button in the header. |
+| `customButtonStyles` | `object` | `{}` | Allows passing custom CSS inline style properties dynamically to any of the header actions. |
+| `customButtonClassNames` | `object` | `{}` | Allows passing custom CSS Tailwind class names dynamically to customize/override button class sheets. |
+
+### Notes on Table & Sub-Table Types
+
+- `TableSchemaInfo` and `TableColumn` are exported from the package (`export * from './types'`).
+- **Sub-Tables:** Define `loop: true` and specify a `columns: TableColumn[]` array on any column item. In both editor canvas and exported HTML, sub-tables render with nested headers (`<thead>`) and body rows (`<tbody>`).
+- **Column & Sub-Column Management:** In the Formatting Panel (**Styles Tab**), click the Pencil (`Edit`) icon next to any column or sub-column to edit header names and placeholders inline, add new sub-columns, or delete sub-columns.
+
+---
+
+## Editing & Managing Sections
+
+The sidebar contains 4 main tabs for configuring elements and settings:
+
+### 1. Typography Elements (Text Tab)
+Contains Heading styles, Paragraphs, Titles, and Captions.
+- **How to add:** Drag any element block onto the canvas or click "Insert at End".
+- **How to edit:** Click directly on the text block on the canvas to type text. Highlight text to trigger the inline **Rich Text Selection Bubble** (bold, italics, underline, or colors).
+
+### 2. Dynamic Tables (Tables Tab)
+Loads your configured table schemas.
+- **How to add:** Drag a table card from the sidebar onto the canvas or click "Insert at End" to append.
+- **Toggling Columns:** Click checkboxes in the sidebar schema card to enable/disable columns.
+- **Custom Tables:** Input a Table Name, choose loop start/end tags, and click "Add Custom Loop Table" to dynamically register new tables.
+
+### 3. Image & Barcode Elements (Images Tab)
+- **Logos & Banners:** Drag logos or banners onto the canvas. Upload custom files (converted to base64) under settings properties.
+- **Dynamic Barcodes:** Drag a barcode block. Change the mock value (e.g. `SHIP-99201`) or backend template tag (e.g. `{{barcode}}`) in block settings configurations.
+- **Custom Image Types:** Register custom graphics categories (e.g., Signature) by typing a label and clicking "Add Image Type".
+
+### 4. Variables Palette (Placeholders Tab)
+- **Inserting Placeholders:** Highlight any text block or table cell and drag a placeholder variable chip onto it. Alternatively, select a block, and click a variable in the palette to insert it at the cursor position.
+- **Custom Mock Values:** Next to each variable in the palette, type a mock value. This will instantly replace placeholders in the canvas for layout testing.
+
+### 5. Formatting Styles Panel (Styles Tab)
+Applies when a canvas block is selected:
+- **Typography & Layout:** Adjust alignment, font size, font family, and font weight.
+- **Visual Colors:** Adjust text color and background color using interactive selectors.
+- **Sizing & Spacing:** Control block margins, padding, widths, and heights using range sliders.
+- **Typography Variants:** Register custom sizes (e.g. `17px`) and Google fonts dynamically.
+- **Table Columns Editor:** Add columns, delete columns, or edit raw JSON records for tables.
+- **Global template settings:** Choose template syntaxes (Handlebars, Liquid, Scriban, Razor) and toggle HTML comment wraps.
+
+---
+
+## Customizing Element Styling
+
+`react-edit-to-html` provides a rich visual formatting panel to easily customize fonts, weights, sizes, margins, padding, and alignments:
+- **Style Customization:** End users can control text alignment, colors, padding, margins, block widths, and heights directly from the sidebar.
+- **Layout-Safe:** The raw custom inline CSS styles textarea has been removed from the formatting panel options to ensure design consistency and prevent layout breaks.
+- **Developer Default Styles:** Pass styling presets via the `defaultStyles` prop to auto-configure initial properties on drops or insertions.
+
+---
+
+## Export HTML Structure
+
+When exporting the template layout, `react-edit-to-html` packages the final output into a clean HTML format. Tables are exported using the exact inline styles and template comments matching the selected engine:
+
+```html
+<table style="font-size: 10px; color: #334155; text-align: left; font-weight: 400;">
+  <thead>
+    <tr>
+      <th>Weight</th>
+      <th>Package Code</th>
+      <th>Package Net Weight</th>
+      <th>Package Gross Weight</th>
+      <th>Package Content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- {{#each shipment.packages}} --><tr>
+      <td>{{gross_weight}}</td>
+      <td>{{package_code}}</td>
+      <td>{{package.net_weight}}</td>
+      <td>{{package.gross_weight}}</td>
+      <td>{{package_content}}</td>
+    </tr><!-- {{/each}} -->
+  </tbody>
+</table>
+```
+
+## License
+
+MIT © [react-edit-to-html](https://github.com/your-username/react-edit-to-html)

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>