jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: make shape content interactive + render emojis properly 

- Scope pointer-events:none to .slot-container instead of all divs,
  so buttons/textareas/inputs inside shapes are clickable again
- Replace unicode escapes (\u{xxxx}) in html`` tagged templates with
  actual emoji characters — String.raw doesn't process escapes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-27 14:15:31 -08:00
parent 726ef43952
commit 303433fa49
7 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/folk-blender.ts
View File

@ -283,28 +283,28 @@ export class FolkBlender extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u{1F9CA}</span>
<span>🧊</span>
<span>3D Blender</span>
</span>
<div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
<div class="prompt-area">
<textarea class="prompt-input" placeholder="Describe the 3D scene to generate...\ne.g. 'A low-poly fox sitting on a tree stump'" rows="3"></textarea>
<div class="controls">
<button class="generate-btn">\u{1F9CA} Generate 3D</button>
<button class="generate-btn">🧊 Generate 3D</button>
</div>
</div>
<div class="tabs">
<button class="tab active" data-tab="preview">\u{1F5BC} Render</button>
<button class="tab" data-tab="code">\u{1F4DC} Script</button>
<button class="tab active" data-tab="preview">🖼️ Render</button>
<button class="tab" data-tab="code">📜 Script</button>
</div>
<div class="preview-area">
<div class="render-preview">
<div class="placeholder">
<span class="placeholder-icon">\u{1F9CA}</span>
<span class="placeholder-icon">🧊</span>
<span>Describe a 3D scene and click Generate</span>
</div>
</div>
@ -313,7 +313,7 @@ export class FolkBlender extends FolkShape {
</div>
</div>
<div class="download-row" style="display:none">
<a class="download-btn blend-dl" href="#" download>\u{2B07} .blend</a>
<a class="download-btn blend-dl" href="#" download>⬇️ .blend</a>
</div>
</div>
`;

12
lib/folk-drawfast.ts
View File

@ -195,25 +195,25 @@ export class FolkDrawfast extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u270F\uFE0F</span>
<span>✏️</span>
<span>Drawfast</span>
</span>
<div class="header-actions">
<button class="export-png-btn" title="Export PNG">\u{1F4BE}</button>
<button class="close-btn" title="Close">\u00D7</button>
<button class="export-png-btn" title="Export PNG">💾</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
<div class="toolbar-row">
<button class="tool-btn active" data-tool="pen" title="Pen">\u270F\uFE0F</button>
<button class="tool-btn" data-tool="eraser" title="Eraser">\u{1F9F9}</button>
<button class="tool-btn active" data-tool="pen" title="Pen">✏️</button>
<button class="tool-btn" data-tool="eraser" title="Eraser">🧹</button>
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span>
${COLORS.map((c) => `<span class="color-swatch${c === "#0f172a" ? " active" : ""}" data-color="${c}" style="background:${c}"></span>`).join("")}
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span>
<input type="range" class="size-slider" min="1" max="24" value="4" />
<span class="size-label">4</span>
<span style="flex:1"></span>
<button class="tool-btn" data-tool="clear" title="Clear all">\u{1F5D1}</button>
<button class="tool-btn" data-tool="clear" title="Clear all">🗑️</button>
</div>
<div class="canvas-area">
<canvas></canvas>

12
lib/folk-freecad.ts
View File

@ -235,29 +235,29 @@ export class FolkFreeCAD extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u{1F4D0}</span>
<span>📐</span>
<span>FreeCAD</span>
</span>
<div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
<div class="prompt-area">
<textarea class="prompt-input" placeholder="Describe the parametric part to generate...\ne.g. 'Enclosure box 80x50x30mm with 3mm walls, ventilation slots, and M3 screw bosses'" rows="3"></textarea>
<div class="controls">
<button class="generate-btn">\u{1F4D0} Generate CAD</button>
<button class="generate-btn">📐 Generate CAD</button>
</div>
</div>
<div class="preview-area">
<div class="placeholder">
<span class="placeholder-icon">\u{1F4D0}</span>
<span class="placeholder-icon">📐</span>
<span>Describe a part and click Generate</span>
</div>
</div>
<div class="export-row" style="display:none">
<a class="export-btn primary step-dl" href="#" download>\u{2B07} STEP</a>
<a class="export-btn stl-dl" href="#" download>\u{2B07} STL</a>
<a class="export-btn primary step-dl" href="#" download>⬇️ STEP</a>
<a class="export-btn stl-dl" href="#" download>⬇️ STL</a>
</div>
</div>
`;

6
lib/folk-image-gen.ts
View File

@ -234,11 +234,11 @@ export class FolkImageGen extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u{1F3A8}</span>
<span>🎨</span>
<span>Image Gen</span>
</span>
<div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
@ -257,7 +257,7 @@ export class FolkImageGen extends FolkShape {
</div>
<div class="image-area">
<div class="placeholder">
<span class="placeholder-icon">\u{1F5BC}</span>
<span class="placeholder-icon">🖼️</span>
<span>Enter a prompt and click Generate</span>
</div>
</div>

20
lib/folk-kicad.ts
View File

@ -294,11 +294,11 @@ export class FolkKiCAD extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u{1F50C}</span>
<span>🔌</span>
<span>KiCAD PCB</span>
</span>
<div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
@ -306,24 +306,24 @@ export class FolkKiCAD extends FolkShape {
<textarea class="prompt-input" placeholder="Describe the PCB design...\ne.g. 'ESP32-based sensor board with BME280, OLED display, and USB-C'" rows="2"></textarea>
<input class="component-input" type="text" placeholder="Components (comma-separated): ESP32-WROOM, BME280, SSD1306..." />
<div class="controls">
<button class="generate-btn">\u{1F50C} Generate PCB</button>
<button class="generate-btn">🔌 Generate PCB</button>
</div>
</div>
<div class="tabs">
<button class="tab active" data-tab="schematic">\u{1F4CB} Schematic</button>
<button class="tab" data-tab="board">\u{1F4DF} Board</button>
<button class="tab" data-tab="drc">\u2705 DRC</button>
<button class="tab active" data-tab="schematic">📋 Schematic</button>
<button class="tab" data-tab="board">📟 Board</button>
<button class="tab" data-tab="drc">✅ DRC</button>
</div>
<div class="preview-area">
<div class="placeholder">
<span class="placeholder-icon">\u{1F50C}</span>
<span class="placeholder-icon">🔌</span>
<span>Describe a PCB design and click Generate</span>
</div>
</div>
<div class="export-row" style="display:none">
<a class="export-btn primary gerber-dl" href="#" download>\u{2B07} Gerber</a>
<a class="export-btn bom-dl" href="#" download>\u{1F4CB} BOM</a>
<a class="export-btn pdf-dl" href="#" download>\u{1F4C4} PDF</a>
<a class="export-btn primary gerber-dl" href="#" download>⬇️ Gerber</a>
<a class="export-btn bom-dl" href="#" download>📋 BOM</a>
<a class="export-btn pdf-dl" href="#" download>📄 PDF</a>
</div>
</div>
`;

4
lib/folk-shape.ts
View File

@ -69,7 +69,7 @@ const styles = css`
z-index: -1;
}
div {
.slot-container {
height: 100%;
width: 100%;
overflow: hidden;
@ -281,7 +281,7 @@ export class FolkShape extends FolkElement {
<button part="resize-top-right" aria-label="Resize shape from top right"></button>
<button part="resize-bottom-right" aria-label="Resize shape from bottom right"></button>
<button part="resize-bottom-left" aria-label="Resize shape from bottom left"></button>
<div><slot></slot></div>`,
<div class="slot-container"><slot></slot></div>`,
);
this.#handles = Object.fromEntries(

8
lib/folk-video-gen.ts
View File

@ -323,11 +323,11 @@ export class FolkVideoGen extends FolkShape {
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>\u{1F3AC}</span>
<span>🎬</span>
<span>Video Gen</span>
</span>
<div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
<div class="content">
@ -337,7 +337,7 @@ export class FolkVideoGen extends FolkShape {
</div>
<div class="input-area">
<div class="image-upload">
<div class="upload-icon">\u{1F4F7}</div>
<div class="upload-icon">📷</div>
<div class="upload-text">Click to upload source image</div>
</div>
<input type="file" class="hidden-input" accept="image/*" />
@ -352,7 +352,7 @@ export class FolkVideoGen extends FolkShape {
</div>
<div class="video-area">
<div class="placeholder">
<span class="placeholder-icon">\u{1F3AC}</span>
<span class="placeholder-icon">🎬</span>
<span>Upload an image and describe the motion</span>
</div>
</div>