@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/styles/squareSidebar.css

@@ -0,0 +1,206 @@
+.squareSideBar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    border-radius: 15px;
+    height: auto;
+    background-color: #232329;
+    overflow: visible;
+    padding: 5px 10px;
+    transition: 0.5s;
+    z-index: 100;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    filter: blur(0px);
+    opacity: 1;
+}
+
+.squareSideBar.hidden {
+    opacity: 0;
+    pointer-events: none;
+    filter: blur(10px);
+    transform: translateX(-50%) translateY(20px);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+/*  Combined Labels  */
+.squareColorLabel,
+.squareBackgroundLabel,
+.squareThicknessLabel,
+.squareFillLabel,
+.squareStyleLabel {
+    display: none;
+}
+
+
+/* Combined containers for colors, backgrounds, thickness, and fill */
+.squareColorsSquare,
+.squareBackground,
+.squareThickness,
+.squareFill,
+.squareStyle {
+    position: static;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 40px;
+    gap: 5px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(255,255,255,0.15);
+}
+
+.squareFill {
+    border-right: none;
+}
+
+.squareThickness, .squareStyle {
+    gap: 5px;
+}
+
+
+/* Combined styles for color, background and fill spans */
+.squareColorsSquare span,
+.squareBackground span,
+.squareFill span {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+/* Combined selected styles for color background and fill spans */
+.squareColorsSquare span.selected,
+.squareBackground span.selected,
+.squareFill span.selected {
+    border: 2px solid #3c09d6;
+    transform: scale(1.3); /* Using transform instead of scale */
+    transition: 0.25s;
+}
+
+/* Color-specific styles */
+.squareColorsSquare span:nth-child(1) { background-color: #fff; }
+.squareColorsSquare span:nth-child(2) { background: #FF8383; }
+.squareColorsSquare span:nth-child(3) { background-color: #3A994C; }
+.squareColorsSquare span:nth-child(4) { background-color: #56A2E8; }
+.squareColorsSquare span:nth-child(5) { background: #FFD700; }
+
+/* Background-specific styles */
+.squareBackground span:nth-child(1) { background-color: #f0f0f0;  } 
+.squareBackground span:nth-child(2) { background-color: #ffcccb;  } 
+.squareBackground span:nth-child(3) { background-color: #90ee90;  } 
+.squareBackground span:nth-child(4) { background-color: #add8e6;  } 
+.squareBackground span:nth-child(5) { 
+    background-color: #ffffe000;  
+    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
+                      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+    background-size: 12px 12px;
+    background-position: 0 0, 6px 6px;
+} 
+
+
+/* Thickness styles */
+.squareThickness span {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    left: 0;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.squareThickness span.selected {
+    background: #444480;
+    transition: 0.25s;
+}
+
+.squareThickness span:nth-child(1) { font-weight: 100; }
+.squareThickness span:nth-child(2) { font-weight: 500; }
+.squareThickness span:nth-child(3) { font-weight: 700; }
+
+/* Fill styles */
+
+
+
+.squareFill span {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    background: #31303B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #fff;
+    text-transform: uppercase;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.squareFill span.selected {
+    background: #444480;
+    transition: 0.25s;
+}
+
+/* Style styles */
+.squareStyle span {
+    width: 35px;
+    height: 35px;
+    left: 5%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.squareStyle span.selected {
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}
+
+.squareStyle span svg {
+    width: 30px;
+    height: 30px;
+    stroke: #fff;
+    transition: 0.25s;
+}
+
+.squareStyle span.selected svg {
+    stroke: #FFD700;
+}
+
+.squareFill .squareFillStyleSpan svg {
+    pointer-events: none;
+  }
+  

package/src/react/styles/writeText.css

@@ -0,0 +1,149 @@
+@font-face 
+{
+    font-family: "lixFont";
+    src: url(./fonts/lixFont.woff2);
+    font-weight: normal;
+    font-size: normal;
+}
+
+@font-face
+{
+    font-family: 'lixCode';
+    src: url(./fonts/lixCode.ttf);
+    font-weight: normal;
+    font-size: normal;
+}
+
+@font-face
+{
+    font-family: 'lixDefault';
+    src: url(./fonts/lixDefault.ttf);
+    font-weight: normal;
+    font-size: normal;
+}   
+
+@font-face
+{
+    font-family: 'lixFancy';
+    src: url(./fonts/lixFancy.ttf);
+    font-weight: normal;
+    font-size: normal;
+}
+
+#textElement
+{
+    height: 500px;
+    width: auto;
+    resize: none;
+    background: transparent;
+    color: #fff;
+    font-family: 'lixFont', sans-serif;
+    font-size: 30px;
+    border: none;
+    outline: none;
+    overflow: visible;
+    white-space: pre-wrap;  
+}
+#textElement::-webkit-scrollbar
+{
+    display: none;
+}
+
+#freehand-canvas > g
+{
+    user-select: none;
+}
+
+/* Prevent native browser text selection on SVG text elements during mouse drag */
+#freehand-canvas text,
+#freehand-canvas tspan {
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: painted;
+}
+
+/* Embedded shape labels */
+.shape-label {
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: none;
+}
+
+.syntax-highlight-overlay {
+    font-family: 'lixCode', 'Courier New', monospace !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+}
+
+.syntax-highlight-overlay pre {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+}
+
+.syntax-highlight-overlay code {
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+    display: inline !important;
+}
+
+/* Ensure all highlighting spans are inline and preserve spacing */
+.syntax-highlight-overlay .hljs-keyword,
+.syntax-highlight-overlay .hljs-string,
+.syntax-highlight-overlay .hljs-comment,
+.syntax-highlight-overlay .hljs-number,
+.syntax-highlight-overlay .hljs-function,
+.syntax-highlight-overlay .hljs-variable,
+.syntax-highlight-overlay .hljs-built_in,
+.syntax-highlight-overlay .hljs-type,
+.syntax-highlight-overlay .hljs-class,
+.syntax-highlight-overlay .hljs-tag,
+.syntax-highlight-overlay .hljs-attr,
+.syntax-highlight-overlay .hljs-literal,
+.syntax-highlight-overlay .hljs-operator,
+.syntax-highlight-overlay .hljs-punctuation,
+.syntax-highlight-overlay .hljs-title,
+.syntax-highlight-overlay .hljs-params,
+.syntax-highlight-overlay .hljs-property,
+.syntax-highlight-overlay .hljs-regexp {
+    display: inline !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+}
+
+/* Ensure text editor matches exactly */
+.svg-text-editor {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    overflow: visible !important;
+    word-break: keep-all !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+    font-family: inherit !important;
+    line-height: inherit !important;
+}
+
+.svg-text-editor::-webkit-scrollbar {
+    display: none;
+}
+
+
+
+

package/src/react/styles.css

@@ -0,0 +1,175 @@
+/* @elixpo/lixsketch/react — host-agnostic styles for <LixSketchCanvas />.
+ * Bundles boxicons (used by toolbar + sidebars). Tokens (--lixsketch-*)
+ * are the theming hooks; hosts can override them at any ancestor scope. */
+
+@import 'boxicons/css/boxicons.min.css';
+
+/* Product CSS — toolbars + per-shape sidebars (copied from sketch.elixpo).
+ *
+ * NOT bundled here:
+ *   - canvasStroke.css: ships destructive globals (`* { margin: 0 }`,
+ *     `svg { width: 100vw }`) that escape the canvas root and break the
+ *     host page. SVGCanvas.jsx styles its own <svg> directly.
+ *   - canvasTools.css: hardcodes sketch's dark palette for fixed-position
+ *     toolbars (`background: #232329`, etc.). The React Toolbar component
+ *     positions / styles itself via Tailwind utility classes, which pick
+ *     up the consumer's theme tokens — so we let those drive instead. */
+@import './styles/squareSidebar.css';
+@import './styles/circleSidebar.css';
+@import './styles/arrowSidebar.css';
+@import './styles/lineSidebar.css';
+@import './styles/paintbrushSidebar.css';
+@import './styles/writeText.css';
+
+.lixsketch-canvas-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--lixsketch-bg, #0e1014);
+  color: var(--lixsketch-fg, #e6e8ec);
+  font-family: var(--lixsketch-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.lixsketch-canvas-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: transparent;
+  cursor: default;
+}
+
+/* ── Loading overlay ── */
+
+.lixsketch-canvas-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lixsketch-bg, #0e1014);
+  z-index: 50;
+}
+
+.lixsketch-canvas-spinner {
+  width: 28px;
+  height: 28px;
+  border: 2px solid rgba(155, 123, 247, 0.25);
+  border-top-color: #9b7bf7;
+  border-radius: 50%;
+  animation: lixsketch-spin 0.7s linear infinite;
+}
+
+@keyframes lixsketch-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Toolbar ── */
+
+.lixsketch-toolbar {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--lixsketch-toolbar-bg, rgba(20, 22, 28, 0.95));
+  border: 1px solid var(--lixsketch-border, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
+}
+
+.lixsketch-toolbar-spacer {
+  width: 1px;
+  height: 18px;
+  background: var(--lixsketch-border, rgba(255, 255, 255, 0.08));
+  margin: 0 4px;
+}
+
+.lixsketch-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--lixsketch-fg-muted, rgba(230, 232, 236, 0.7));
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s, color 0.12s, transform 0.06s;
+}
+
+.lixsketch-tool-btn:hover {
+  background: var(--lixsketch-hover, rgba(255, 255, 255, 0.06));
+  color: var(--lixsketch-fg, #e6e8ec);
+}
+
+.lixsketch-tool-btn:active {
+  transform: scale(0.94);
+}
+
+.lixsketch-tool-btn.is-active {
+  background: var(--lixsketch-accent-bg, rgba(155, 123, 247, 0.18));
+  color: var(--lixsketch-accent, #b69aff);
+}
+
+.lixsketch-tool-btn:focus-visible {
+  outline: 2px solid var(--lixsketch-accent, #9b7bf7);
+  outline-offset: 1px;
+}
+
+.lixsketch-tool-btn--exit {
+  width: auto;
+  padding: 0 10px 0 8px;
+  color: var(--lixsketch-fg-muted, rgba(230, 232, 236, 0.7));
+}
+
+.lixsketch-tool-btn-label {
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+/* ── Embedded content adjustments ──
+   When sitting inside another app's layout, hosts often scope the canvas
+   to a flex container. Make sure children stay inside our root.            */
+
+.lixsketch-canvas-root * {
+  box-sizing: border-box;
+}
+
+.lixsketch-exit-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10000;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: rgba(20, 22, 28, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(230, 232, 236, 0.85);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.lixsketch-exit-btn:hover {
+  background: rgba(155, 123, 247, 0.12);
+  border-color: rgba(155, 123, 247, 0.3);
+  color: #b69aff;
+}
+.lixsketch-exit-btn .bx { font-size: 16px; }

package/src/react/toolsEnum.js

@@ -0,0 +1,20 @@
+// Standalone TOOLS enum re-export. The engine's index.js also exports
+// TOOLS but doing it from here lets the React subpath avoid pulling
+// in side-effectful modules (SceneSerializer, shape graph) just to read
+// a constants map. Keep these values in lockstep with src/index.js.
+export const TOOLS = {
+  SELECT: 'select',
+  PAN: 'pan',
+  RECTANGLE: 'rectangle',
+  CIRCLE: 'circle',
+  LINE: 'line',
+  ARROW: 'arrow',
+  FREEHAND: 'freehand',
+  TEXT: 'text',
+  CODE: 'code',
+  ERASER: 'eraser',
+  LASER: 'laser',
+  IMAGE: 'image',
+  FRAME: 'frame',
+  ICON: 'icon',
+};

package/src/react/utils/toast.js

@@ -0,0 +1,18 @@
+// Lightweight toast stub for offline mode. Hosts can override by mounting
+// a #lixsketch-toast container; otherwise we fall back to a console log.
+export function showToast(message, options = {}) {
+  const tone = options.tone || 'info';
+  const root = typeof document !== 'undefined' ? document.getElementById('lixsketch-toast') : null;
+  if (!root) {
+    console.log(`[lixsketch:${tone}]`, message);
+    return;
+  }
+  const el = document.createElement('div');
+  el.className = `lixsketch-toast-item is-${tone}`;
+  el.textContent = message;
+  root.appendChild(el);
+  setTimeout(() => { el.classList.add('is-leaving'); }, 1800);
+  setTimeout(() => { try { root.removeChild(el); } catch {} }, 2200);
+}
+
+export default { showToast };

package/src/shapes/Frame.js

@@ -27,7 +27,13 @@ class Frame {
         this.fillStyle = options.fillStyle || "transparent"; // 'transparent' | 'solid' | 'grid'
         this.fillColor = options.fillColor || "#1e1e28";
         this.gridSize = options.gridSize || 20;
-        this.gridColor = options.gridColor || "rgba(255,255,255,0.06)";
+        // Issue #38 follow-up: read the grid stroke from a CSS custom
+        // property so the frame grid stays visible in both themes. The
+        // var is defined in globals.css for both `body.canvas-mode`
+        // (dark-on-light) and `body.canvas-mode.theme-dark` (light-on-dark).
+        // The literal here is the dark-theme fallback for environments
+        // (tests, embeds) without the canvas-mode CSS in scope.
+        this.gridColor = options.gridColor || "var(--lixsketch-grid-fine, rgba(255,255,255,0.06))";
         this.options = {
             stroke: options.stroke || "#555",
             strokeWidth: options.strokeWidth || 1,

package/src/shapes/Line.js

@@ -4,7 +4,13 @@
 import { updateAttachedArrows as updateArrowsForShape } from '../tools/arrowTool.js';
 
 const rc = rough.svg(svg);
-const lineColor = "#fff";
+// Issue #38 follow-up: read the default stroke from the active theme
+// instead of pinning to a single colour. White was invisible on the new
+// light canvas, near-black is invisible if the user toggles dark.
+function getThemeStroke() {
+    if (typeof document === 'undefined') return '#fff';
+    return document.body && document.body.classList.contains('theme-dark') ? '#fff' : '#1a1a2e';
+}
 const lineStrokeWidth = 2;
 let hoveredFrameLine = null;
 
@@ -136,7 +142,7 @@ class Line {
             const pathData = `M ${this.startPoint.x} ${this.startPoint.y} Q ${this.controlPoint.x} ${this.controlPoint.y} ${this.endPoint.x} ${this.endPoint.y}`;
             lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
             lineElement.setAttribute('d', pathData);
-            lineElement.setAttribute('stroke', this.options.stroke || lineColor);
+            lineElement.setAttribute('stroke', this.options.stroke || getThemeStroke());
             lineElement.setAttribute('stroke-width', this.options.strokeWidth || lineStrokeWidth);
             lineElement.setAttribute('fill', 'none');
             lineElement.setAttribute('stroke-linecap', 'round');
@@ -151,7 +157,7 @@ class Line {
             lineElement.setAttribute('y1', this.startPoint.y);
             lineElement.setAttribute('x2', this.endPoint.x);
             lineElement.setAttribute('y2', this.endPoint.y);
-            lineElement.setAttribute('stroke', this.options.stroke || lineColor);
+            lineElement.setAttribute('stroke', this.options.stroke || getThemeStroke());
             lineElement.setAttribute('stroke-width', this.options.strokeWidth || lineStrokeWidth);
             lineElement.setAttribute('stroke-linecap', 'round');
             if (this.options.strokeDasharray) {
@@ -548,7 +554,7 @@ removeSelection() {
             const pathData = `M ${this.startPoint.x} ${this.startPoint.y} Q ${this.controlPoint.x} ${this.controlPoint.y} ${this.endPoint.x} ${this.endPoint.y}`;
             lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
             lineElement.setAttribute('d', pathData);
-            lineElement.setAttribute('stroke', this.options.stroke || lineColor);
+            lineElement.setAttribute('stroke', this.options.stroke || getThemeStroke());
             lineElement.setAttribute('stroke-width', this.options.strokeWidth || lineStrokeWidth);
             lineElement.setAttribute('fill', 'none');
             lineElement.setAttribute('stroke-linecap', 'round');
@@ -562,7 +568,7 @@ removeSelection() {
             lineElement.setAttribute('y1', this.startPoint.y);
             lineElement.setAttribute('x2', this.endPoint.x);
             lineElement.setAttribute('y2', this.endPoint.y);
-            lineElement.setAttribute('stroke', this.options.stroke || lineColor);
+            lineElement.setAttribute('stroke', this.options.stroke || getThemeStroke());
             lineElement.setAttribute('stroke-width', this.options.strokeWidth || lineStrokeWidth);
             lineElement.setAttribute('stroke-linecap', 'round');
             lineElement.setAttribute('stroke-dasharray', this.options.strokeDasharray);