Merge branch 'dev'

This commit is contained in:
Jeff Emmett 2026-02-27 14:15:40 -08:00
commit e2baf71361
7 changed files with 38 additions and 38 deletions

View File

@ -283,28 +283,28 @@ export class FolkBlender extends FolkShape {
wrapper.innerHTML = html` wrapper.innerHTML = html`
<div class="header"> <div class="header">
<span class="header-title"> <span class="header-title">
<span>\u{1F9CA}</span> <span>🧊</span>
<span>3D Blender</span> <span>3D Blender</span>
</span> </span>
<div class="header-actions"> <div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button> <button class="close-btn" title="Close">×</button>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="prompt-area"> <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> <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"> <div class="controls">
<button class="generate-btn">\u{1F9CA} Generate 3D</button> <button class="generate-btn">🧊 Generate 3D</button>
</div> </div>
</div> </div>
<div class="tabs"> <div class="tabs">
<button class="tab active" data-tab="preview">\u{1F5BC} Render</button> <button class="tab active" data-tab="preview">🖼 Render</button>
<button class="tab" data-tab="code">\u{1F4DC} Script</button> <button class="tab" data-tab="code">📜 Script</button>
</div> </div>
<div class="preview-area"> <div class="preview-area">
<div class="render-preview"> <div class="render-preview">
<div class="placeholder"> <div class="placeholder">
<span class="placeholder-icon">\u{1F9CA}</span> <span class="placeholder-icon">🧊</span>
<span>Describe a 3D scene and click Generate</span> <span>Describe a 3D scene and click Generate</span>
</div> </div>
</div> </div>
@ -313,7 +313,7 @@ export class FolkBlender extends FolkShape {
</div> </div>
</div> </div>
<div class="download-row" style="display:none"> <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>
</div> </div>
`; `;

View File

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

View File

@ -235,29 +235,29 @@ export class FolkFreeCAD extends FolkShape {
wrapper.innerHTML = html` wrapper.innerHTML = html`
<div class="header"> <div class="header">
<span class="header-title"> <span class="header-title">
<span>\u{1F4D0}</span> <span>📐</span>
<span>FreeCAD</span> <span>FreeCAD</span>
</span> </span>
<div class="header-actions"> <div class="header-actions">
<button class="close-btn" title="Close">\u00D7</button> <button class="close-btn" title="Close">×</button>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="prompt-area"> <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> <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"> <div class="controls">
<button class="generate-btn">\u{1F4D0} Generate CAD</button> <button class="generate-btn">📐 Generate CAD</button>
</div> </div>
</div> </div>
<div class="preview-area"> <div class="preview-area">
<div class="placeholder"> <div class="placeholder">
<span class="placeholder-icon">\u{1F4D0}</span> <span class="placeholder-icon">📐</span>
<span>Describe a part and click Generate</span> <span>Describe a part and click Generate</span>
</div> </div>
</div> </div>
<div class="export-row" style="display:none"> <div class="export-row" style="display:none">
<a class="export-btn primary step-dl" href="#" download>\u{2B07} STEP</a> <a class="export-btn primary step-dl" href="#" download> STEP</a>
<a class="export-btn stl-dl" href="#" download>\u{2B07} STL</a> <a class="export-btn stl-dl" href="#" download> STL</a>
</div> </div>
</div> </div>
`; `;

View File

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

View File

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

View File

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

View File

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