diff --git a/lib/folk-blender.ts b/lib/folk-blender.ts
new file mode 100644
index 0000000..7b8c0df
--- /dev/null
+++ b/lib/folk-blender.ts
@@ -0,0 +1,444 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ min-width: 380px;
+ min-height: 480px;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: linear-gradient(135deg, #ea580c, #f59e0b);
+ color: white;
+ border-radius: 8px 8px 0 0;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: move;
+ }
+
+ .header-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .header-actions button {
+ background: transparent;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .header-actions button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ }
+
+ .prompt-area {
+ padding: 12px;
+ border-bottom: 1px solid #e2e8f0;
+ }
+
+ .prompt-input {
+ width: 100%;
+ padding: 10px 12px;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ font-size: 13px;
+ resize: none;
+ outline: none;
+ font-family: inherit;
+ }
+
+ .prompt-input:focus {
+ border-color: #ea580c;
+ }
+
+ .controls {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+ }
+
+ .generate-btn {
+ flex: 1;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #ea580c, #f59e0b);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: opacity 0.2s;
+ }
+
+ .generate-btn:hover {
+ opacity: 0.9;
+ }
+
+ .generate-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ .tabs {
+ display: flex;
+ border-bottom: 1px solid #e2e8f0;
+ }
+
+ .tab {
+ flex: 1;
+ padding: 8px;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 600;
+ color: #64748b;
+ border: none;
+ background: none;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: all 0.2s;
+ }
+
+ .tab:hover {
+ color: #ea580c;
+ }
+
+ .tab.active {
+ color: #ea580c;
+ border-bottom-color: #ea580c;
+ }
+
+ .preview-area {
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .render-preview {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px;
+ overflow: hidden;
+ }
+
+ .render-preview img {
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .code-area {
+ flex: 1;
+ overflow: auto;
+ padding: 12px;
+ }
+
+ .code-area pre {
+ margin: 0;
+ padding: 12px;
+ background: #1e293b;
+ color: #e2e8f0;
+ border-radius: 6px;
+ font-size: 11px;
+ line-height: 1.5;
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+
+ .download-row {
+ display: flex;
+ gap: 8px;
+ padding: 8px 12px;
+ border-top: 1px solid #e2e8f0;
+ }
+
+ .download-btn {
+ padding: 6px 12px;
+ background: #334155;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .download-btn:hover {
+ background: #475569;
+ }
+
+ .placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #94a3b8;
+ text-align: center;
+ gap: 8px;
+ }
+
+ .placeholder-icon {
+ font-size: 48px;
+ opacity: 0.5;
+ }
+
+ .loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ gap: 12px;
+ }
+
+ .spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #e2e8f0;
+ border-top-color: #ea580c;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ to { transform: rotate(360deg); }
+ }
+
+ .error {
+ color: #ef4444;
+ padding: 12px;
+ background: #fef2f2;
+ border-radius: 6px;
+ font-size: 13px;
+ margin: 12px;
+ }
+`;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-blender": FolkBlender;
+ }
+}
+
+export class FolkBlender extends FolkShape {
+ static override tagName = "folk-blender";
+
+ static {
+ const sheet = new CSSStyleSheet();
+ const parentRules = Array.from(FolkShape.styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ const childRules = Array.from(styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ sheet.replaceSync(`${parentRules}\n${childRules}`);
+ this.styles = sheet;
+ }
+
+ #isLoading = false;
+ #error: string | null = null;
+ #renderUrl: string | null = null;
+ #script: string | null = null;
+ #blendUrl: string | null = null;
+ #activeTab: "preview" | "code" = "preview";
+ #promptInput: HTMLTextAreaElement | null = null;
+ #generateBtn: HTMLButtonElement | null = null;
+ #previewArea: HTMLElement | null = null;
+ #codeArea: HTMLElement | null = null;
+ #downloadRow: HTMLElement | null = null;
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \u{1F9CA}
+ Describe a 3D scene and click Generate
+
+
+
+
// Blender Python script will appear here
+
+
+
+
${this.#escapeHtml(this.#error)}
`;
+ }
+ } finally {
+ this.#isLoading = false;
+ if (this.#generateBtn) this.#generateBtn.disabled = false;
+ }
+ }
+
+ #renderResult() {
+ if (this.#previewArea) {
+ if (this.#renderUrl) {
+ this.#previewArea.innerHTML = `})
`;
+ } else {
+ this.#previewArea.innerHTML = '\u2705Script generated (see Script tab)
';
+ }
+ }
+
+ if (this.#codeArea && this.#script) {
+ this.#codeArea.innerHTML = `${this.#escapeHtml(this.#script)}`;
+ }
+
+ if (this.#downloadRow && this.#blendUrl) {
+ this.#downloadRow.style.display = "flex";
+ const blendLink = this.#downloadRow.querySelector(".blend-dl") as HTMLAnchorElement;
+ if (blendLink) blendLink.href = this.#blendUrl;
+ }
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-blender",
+ renderUrl: this.#renderUrl,
+ script: this.#script,
+ blendUrl: this.#blendUrl,
+ };
+ }
+}
diff --git a/lib/folk-drawfast.ts b/lib/folk-drawfast.ts
new file mode 100644
index 0000000..f621992
--- /dev/null
+++ b/lib/folk-drawfast.ts
@@ -0,0 +1,456 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ min-width: 360px;
+ min-height: 420px;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: linear-gradient(135deg, #f97316, #eab308);
+ color: white;
+ border-radius: 8px 8px 0 0;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: move;
+ }
+
+ .header-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .header-actions button {
+ background: transparent;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .header-actions button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ }
+
+ .toolbar-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 12px;
+ border-bottom: 1px solid #e2e8f0;
+ flex-wrap: wrap;
+ }
+
+ .tool-btn {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 2px solid #e2e8f0;
+ border-radius: 6px;
+ background: white;
+ cursor: pointer;
+ font-size: 14px;
+ transition: all 0.15s;
+ }
+
+ .tool-btn:hover {
+ border-color: #f97316;
+ }
+
+ .tool-btn.active {
+ border-color: #f97316;
+ background: #fff7ed;
+ }
+
+ .color-swatch {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ border: 2px solid #e2e8f0;
+ cursor: pointer;
+ transition: transform 0.1s;
+ }
+
+ .color-swatch:hover {
+ transform: scale(1.2);
+ }
+
+ .color-swatch.active {
+ border-color: #0f172a;
+ transform: scale(1.15);
+ }
+
+ .size-slider {
+ width: 80px;
+ accent-color: #f97316;
+ }
+
+ .size-label {
+ font-size: 11px;
+ color: #64748b;
+ min-width: 20px;
+ }
+
+ .canvas-area {
+ flex: 1;
+ position: relative;
+ cursor: crosshair;
+ overflow: hidden;
+ }
+
+ .canvas-area canvas {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ .export-btn {
+ padding: 6px 12px;
+ background: #f97316;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+
+ .export-btn:hover {
+ opacity: 0.9;
+ }
+`;
+
+const COLORS = ["#0f172a", "#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899", "#ffffff"];
+
+interface Stroke {
+ points: { x: number; y: number; pressure: number }[];
+ color: string;
+ size: number;
+ tool: string;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-drawfast": FolkDrawfast;
+ }
+}
+
+export class FolkDrawfast extends FolkShape {
+ static override tagName = "folk-drawfast";
+
+ static {
+ const sheet = new CSSStyleSheet();
+ const parentRules = Array.from(FolkShape.styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ const childRules = Array.from(styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ sheet.replaceSync(`${parentRules}\n${childRules}`);
+ this.styles = sheet;
+ }
+
+ #strokes: Stroke[] = [];
+ #currentStroke: Stroke | null = null;
+ #canvas: HTMLCanvasElement | null = null;
+ #ctx: CanvasRenderingContext2D | null = null;
+ #color = "#0f172a";
+ #brushSize = 4;
+ #tool = "pen"; // pen | eraser
+ #isDrawing = false;
+
+ get strokes() {
+ return this.#strokes;
+ }
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+
+
+
+
+
+ ${COLORS.map((c) => ``).join("")}
+
+
+ 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \u{1F4D0}
+ Describe a part and click Generate
+
+
+
+
${this.#escapeHtml(this.#error)}
`;
+ }
+ } finally {
+ this.#isLoading = false;
+ if (this.#generateBtn) this.#generateBtn.disabled = false;
+ }
+ }
+
+ #renderResult() {
+ if (this.#previewArea) {
+ if (this.#previewUrl) {
+ this.#previewArea.innerHTML = `})
`;
+ } else {
+ this.#previewArea.innerHTML = '\u2705Model generated! Download files below.
';
+ }
+ }
+
+ if (this.#exportRow && (this.#stepUrl || this.#stlUrl)) {
+ this.#exportRow.style.display = "flex";
+ const stepLink = this.#exportRow.querySelector(".step-dl") as HTMLAnchorElement;
+ const stlLink = this.#exportRow.querySelector(".stl-dl") as HTMLAnchorElement;
+ if (stepLink && this.#stepUrl) {
+ stepLink.href = this.#stepUrl;
+ stepLink.style.display = "";
+ }
+ if (stlLink && this.#stlUrl) {
+ stlLink.href = this.#stlUrl;
+ stlLink.style.display = "";
+ }
+ }
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-freecad",
+ previewUrl: this.#previewUrl,
+ stepUrl: this.#stepUrl,
+ stlUrl: this.#stlUrl,
+ };
+ }
+}
diff --git a/lib/folk-kicad.ts b/lib/folk-kicad.ts
new file mode 100644
index 0000000..74ed220
--- /dev/null
+++ b/lib/folk-kicad.ts
@@ -0,0 +1,496 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ min-width: 380px;
+ min-height: 460px;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: linear-gradient(135deg, #059669, #34d399);
+ color: white;
+ border-radius: 8px 8px 0 0;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: move;
+ }
+
+ .header-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .header-actions button {
+ background: transparent;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .header-actions button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ }
+
+ .prompt-area {
+ padding: 12px;
+ border-bottom: 1px solid #e2e8f0;
+ }
+
+ .prompt-input {
+ width: 100%;
+ padding: 10px 12px;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ font-size: 13px;
+ resize: none;
+ outline: none;
+ font-family: inherit;
+ }
+
+ .prompt-input:focus {
+ border-color: #059669;
+ }
+
+ .component-input {
+ width: 100%;
+ padding: 8px 10px;
+ border: 2px solid #e2e8f0;
+ border-radius: 6px;
+ font-size: 12px;
+ outline: none;
+ margin-top: 8px;
+ font-family: inherit;
+ }
+
+ .component-input:focus {
+ border-color: #059669;
+ }
+
+ .controls {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+ }
+
+ .generate-btn {
+ flex: 1;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #059669, #34d399);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: opacity 0.2s;
+ }
+
+ .generate-btn:hover {
+ opacity: 0.9;
+ }
+
+ .generate-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ .tabs {
+ display: flex;
+ border-bottom: 1px solid #e2e8f0;
+ }
+
+ .tab {
+ flex: 1;
+ padding: 8px;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 600;
+ color: #64748b;
+ border: none;
+ background: none;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: all 0.2s;
+ }
+
+ .tab:hover {
+ color: #059669;
+ }
+
+ .tab.active {
+ color: #059669;
+ border-bottom-color: #059669;
+ }
+
+ .preview-area {
+ flex: 1;
+ overflow: auto;
+ padding: 12px;
+ }
+
+ .preview-area img {
+ max-width: 100%;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .drc-results {
+ font-size: 12px;
+ color: #334155;
+ }
+
+ .drc-results .pass {
+ color: #059669;
+ font-weight: 600;
+ }
+
+ .drc-results .fail {
+ color: #ef4444;
+ font-weight: 600;
+ }
+
+ .export-row {
+ display: flex;
+ gap: 8px;
+ padding: 8px 12px;
+ border-top: 1px solid #e2e8f0;
+ flex-wrap: wrap;
+ }
+
+ .export-btn {
+ padding: 6px 12px;
+ background: #334155;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .export-btn:hover {
+ background: #475569;
+ }
+
+ .export-btn.primary {
+ background: #059669;
+ }
+
+ .export-btn.primary:hover {
+ background: #047857;
+ }
+
+ .placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #94a3b8;
+ text-align: center;
+ gap: 8px;
+ }
+
+ .placeholder-icon {
+ font-size: 48px;
+ opacity: 0.5;
+ }
+
+ .loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ gap: 12px;
+ }
+
+ .spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #e2e8f0;
+ border-top-color: #059669;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ to { transform: rotate(360deg); }
+ }
+
+ .error {
+ color: #ef4444;
+ padding: 12px;
+ background: #fef2f2;
+ border-radius: 6px;
+ font-size: 13px;
+ }
+`;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-kicad": FolkKiCAD;
+ }
+}
+
+export class FolkKiCAD extends FolkShape {
+ static override tagName = "folk-kicad";
+
+ static {
+ const sheet = new CSSStyleSheet();
+ const parentRules = Array.from(FolkShape.styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ const childRules = Array.from(styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ sheet.replaceSync(`${parentRules}\n${childRules}`);
+ this.styles = sheet;
+ }
+
+ #isLoading = false;
+ #error: string | null = null;
+ #schematicSvg: string | null = null;
+ #boardSvg: string | null = null;
+ #gerberUrl: string | null = null;
+ #bomUrl: string | null = null;
+ #pdfUrl: string | null = null;
+ #drcResults: any = null;
+ #activeTab: "schematic" | "board" | "drc" = "schematic";
+ #promptInput: HTMLTextAreaElement | null = null;
+ #componentInput: HTMLInputElement | null = null;
+ #generateBtn: HTMLButtonElement | null = null;
+ #previewArea: HTMLElement | null = null;
+ #exportRow: HTMLElement | null = null;
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \u{1F50C}
+ Describe a PCB design and click Generate
+
+
+
+
${this.#escapeHtml(this.#error)}
`;
+ }
+ } finally {
+ this.#isLoading = false;
+ if (this.#generateBtn) this.#generateBtn.disabled = false;
+ }
+ }
+
+ #renderPreview() {
+ if (!this.#previewArea) return;
+
+ switch (this.#activeTab) {
+ case "schematic":
+ if (this.#schematicSvg) {
+ this.#previewArea.innerHTML = `})
`;
+ } else {
+ this.#previewArea.innerHTML = '\u{1F4CB}Schematic will appear here
';
+ }
+ break;
+ case "board":
+ if (this.#boardSvg) {
+ this.#previewArea.innerHTML = `})
`;
+ } else {
+ this.#previewArea.innerHTML = '\u{1F4DF}Board layout will appear here
';
+ }
+ break;
+ case "drc":
+ if (this.#drcResults) {
+ const violations = this.#drcResults.violations || [];
+ const passed = violations.length === 0;
+ this.#previewArea.innerHTML = `
+
+
${passed
+ ? '\u2705 DRC Passed'
+ : `\u274C ${violations.length} Violation(s)`
+ }
+ ${violations.map((v: any) => `
\u2022 ${this.#escapeHtml(v.message || v)}
`).join("")}
+
\u2705DRC results will appear here
';
+ }
+ break;
+ }
+ }
+
+ #showExports() {
+ if (this.#exportRow && (this.#gerberUrl || this.#bomUrl || this.#pdfUrl)) {
+ this.#exportRow.style.display = "flex";
+ const gerberLink = this.#exportRow.querySelector(".gerber-dl") as HTMLAnchorElement;
+ const bomLink = this.#exportRow.querySelector(".bom-dl") as HTMLAnchorElement;
+ const pdfLink = this.#exportRow.querySelector(".pdf-dl") as HTMLAnchorElement;
+ if (gerberLink) gerberLink.href = this.#gerberUrl || "#";
+ if (bomLink) bomLink.href = this.#bomUrl || "#";
+ if (pdfLink) pdfLink.href = this.#pdfUrl || "#";
+ }
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-kicad",
+ schematicSvg: this.#schematicSvg,
+ boardSvg: this.#boardSvg,
+ gerberUrl: this.#gerberUrl,
+ bomUrl: this.#bomUrl,
+ pdfUrl: this.#pdfUrl,
+ };
+ }
+}
diff --git a/lib/folk-splat.ts b/lib/folk-splat.ts
new file mode 100644
index 0000000..57dc9a6
--- /dev/null
+++ b/lib/folk-splat.ts
@@ -0,0 +1,438 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: #0f172a;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ min-width: 360px;
+ min-height: 400px;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: linear-gradient(135deg, #7c3aed, #2563eb);
+ color: white;
+ border-radius: 8px 8px 0 0;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: move;
+ }
+
+ .header-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .header-actions button {
+ background: transparent;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .header-actions button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ }
+
+ .controls {
+ padding: 10px 12px;
+ border-bottom: 1px solid #1e293b;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .splat-url-input {
+ flex: 1;
+ padding: 8px 10px;
+ border: 2px solid #334155;
+ border-radius: 6px;
+ background: #1e293b;
+ color: #e2e8f0;
+ font-size: 12px;
+ outline: none;
+ }
+
+ .splat-url-input:focus {
+ border-color: #7c3aed;
+ }
+
+ .load-btn {
+ padding: 8px 14px;
+ background: linear-gradient(135deg, #7c3aed, #2563eb);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+
+ .load-btn:hover {
+ opacity: 0.9;
+ }
+
+ .viewer-area {
+ flex: 1;
+ position: relative;
+ background: #0a0a0a;
+ overflow: hidden;
+ }
+
+ .viewer-area canvas {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ .placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #64748b;
+ text-align: center;
+ gap: 8px;
+ }
+
+ .placeholder-icon {
+ font-size: 48px;
+ opacity: 0.5;
+ }
+
+ .gallery-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+ padding: 10px;
+ overflow-y: auto;
+ max-height: 200px;
+ }
+
+ .gallery-item {
+ padding: 8px;
+ background: #1e293b;
+ border-radius: 6px;
+ cursor: pointer;
+ color: #cbd5e1;
+ font-size: 11px;
+ text-align: center;
+ border: 2px solid transparent;
+ transition: border-color 0.2s;
+ }
+
+ .gallery-item:hover {
+ border-color: #7c3aed;
+ }
+
+ .gallery-item .title {
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .gallery-item .meta {
+ font-size: 10px;
+ color: #64748b;
+ margin-top: 2px;
+ }
+
+ .loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ gap: 12px;
+ color: #94a3b8;
+ }
+
+ .spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #334155;
+ border-top-color: #7c3aed;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ to { transform: rotate(360deg); }
+ }
+
+ .error {
+ color: #ef4444;
+ padding: 12px;
+ background: #1c1017;
+ border-radius: 6px;
+ font-size: 13px;
+ margin: 10px;
+ }
+
+ .upload-btn {
+ padding: 8px 14px;
+ background: #334155;
+ color: #e2e8f0;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ cursor: pointer;
+ }
+
+ .upload-btn:hover {
+ background: #475569;
+ }
+`;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-splat": FolkSplat;
+ }
+}
+
+export class FolkSplat extends FolkShape {
+ static override tagName = "folk-splat";
+
+ static {
+ const sheet = new CSSStyleSheet();
+ const parentRules = Array.from(FolkShape.styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ const childRules = Array.from(styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ sheet.replaceSync(`${parentRules}\n${childRules}`);
+ this.styles = sheet;
+ }
+
+ #splatUrl = "";
+ #isLoading = false;
+ #error: string | null = null;
+ #viewer: any = null;
+ #viewerCanvas: HTMLCanvasElement | null = null;
+ #gallerySplats: any[] = [];
+ #urlInput: HTMLInputElement | null = null;
+
+ get splatUrl() {
+ return this.#splatUrl;
+ }
+ set splatUrl(v: string) {
+ this.#splatUrl = v;
+ }
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+
+
+
+
+
+
+
+
+ \u{1F52E}
+ Enter a splat URL or browse the gallery
+
+
+
No splats in this space yet
';
+ return;
+ }
+
+ container.innerHTML = this.#gallerySplats.map((s) => `
+
+
${this.#escapeHtml(s.title)}
+
${s.file_format} \u2022 ${(s.file_size_bytes / 1024 / 1024).toFixed(1)}MB
+
Failed to load gallery
`;
+ }
+ }
+
+ async #loadSplat(url: string, viewerArea: HTMLElement) {
+ this.#splatUrl = url;
+ this.#isLoading = true;
+ this.#error = null;
+
+ viewerArea.innerHTML = '';
+
+ try {
+ // Use Three.js + GaussianSplats3D via CDN importmap (not bundled)
+ const threeId = "three";
+ const gs3dId = "@mkkellogg/gaussian-splats-3d";
+ const THREE = await (Function("id", "return import(id)")(threeId) as Promise);
+ const GS3D = await (Function("id", "return import(id)")(gs3dId) as Promise);
+
+ viewerArea.innerHTML = "";
+
+ const canvas = document.createElement("canvas");
+ canvas.style.width = "100%";
+ canvas.style.height = "100%";
+ viewerArea.appendChild(canvas);
+
+ const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+ renderer.setSize(viewerArea.clientWidth, viewerArea.clientHeight);
+
+ const viewer = new GS3D.Viewer({
+ renderer,
+ cameraUp: [0, -1, 0],
+ initialCameraPosition: [0, 0, 5],
+ initialCameraLookAt: [0, 0, 0],
+ });
+
+ await viewer.addSplatScene(url);
+ this.#viewer = viewer;
+ this.#viewerCanvas = canvas;
+
+ // Simple animation loop
+ const animate = () => {
+ if (!this.#viewer) return;
+ (viewer as any).update();
+ (viewer as any).render();
+ requestAnimationFrame(animate);
+ };
+ animate();
+ } catch (err) {
+ // Fallback: show as iframe pointing to splat viewer page
+ console.warn("[folk-splat] Three.js not available, using iframe fallback");
+ const spaceSlug = this.#getSpaceSlug();
+ const slug = url.split("/").filter(Boolean).pop()?.split(".")[0] || "";
+ viewerArea.innerHTML = ``;
+ } finally {
+ this.#isLoading = false;
+ }
+ }
+
+ #getSpaceSlug(): string {
+ const pathParts = window.location.pathname.split("/").filter(Boolean);
+ return pathParts[0] || "demo";
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-splat",
+ splatUrl: this.#splatUrl,
+ };
+ }
+}
diff --git a/lib/index.ts b/lib/index.ts
index 9519134..ac2d22e 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -39,6 +39,13 @@ export * from "./folk-video-gen";
export * from "./folk-prompt";
export * from "./folk-transcription";
+// Creative Tools Shapes
+export * from "./folk-splat";
+export * from "./folk-blender";
+export * from "./folk-drawfast";
+export * from "./folk-freecad";
+export * from "./folk-kicad";
+
// Advanced Shapes
export * from "./folk-video-chat";
export * from "./folk-obs-note";
diff --git a/modules/providers/components/folk-provider-directory.ts b/modules/providers/components/folk-provider-directory.ts
deleted file mode 100644
index bd44eb6..0000000
--- a/modules/providers/components/folk-provider-directory.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * — browseable provider directory.
- * Shows a grid of provider cards with search, capability filter, and proximity sorting.
- */
-
-class FolkProviderDirectory extends HTMLElement {
- private shadow: ShadowRoot;
- private providers: any[] = [];
- private capabilities: string[] = [];
- private selectedCap = "";
- private searchQuery = "";
- private userLat: number | null = null;
- private userLng: number | null = null;
-
- constructor() {
- super();
- this.shadow = this.attachShadow({ mode: "open" });
- }
-
- connectedCallback() {
- this.render();
- this.loadProviders();
- }
-
- private getApiBase(): string {
- const path = window.location.pathname;
- const parts = path.split("/").filter(Boolean);
- return parts.length >= 2 ? `/${parts[0]}/providers` : "/demo/providers";
- }
-
- private async loadProviders() {
- try {
- const params = new URLSearchParams();
- if (this.selectedCap) params.set("capability", this.selectedCap);
- if (this.userLat && this.userLng) {
- params.set("lat", String(this.userLat));
- params.set("lng", String(this.userLng));
- }
- params.set("limit", "100");
-
- const res = await fetch(`${this.getApiBase()}/api/providers?${params}`);
- const data = await res.json();
- this.providers = data.providers || [];
-
- // Collect unique capabilities
- const capSet = new Set();
- for (const p of this.providers) {
- for (const cap of (p.capabilities || [])) capSet.add(cap);
- }
- this.capabilities = Array.from(capSet).sort();
-
- this.render();
- } catch (e) {
- console.error("Failed to load providers:", e);
- }
- }
-
- private render() {
- const filtered = this.providers.filter((p) => {
- if (this.searchQuery) {
- const q = this.searchQuery.toLowerCase();
- const name = (p.name || "").toLowerCase();
- const city = (p.location?.city || "").toLowerCase();
- const country = (p.location?.country || "").toLowerCase();
- if (!name.includes(q) && !city.includes(q) && !country.includes(q)) return false;
- }
- return true;
- });
-
- this.shadow.innerHTML = `
-
-
-
- Provider Directory
-
-
-
-
- ${this.capabilities.length > 0 ? `
-
- All
- ${this.capabilities.map((cap) => `
- ${cap}
- `).join("")}
-
` : ""}
-
- ${filtered.length === 0 ? `No providers found
` : `
-
- ${filtered.map((p) => `
-
-
-
- ${(p.capabilities || []).map((cap: string) => `${this.esc(cap)}`).join("")}
-
- ${p.turnaround?.standard_days ? `
\u23F1 ${p.turnaround.standard_days} days standard${p.turnaround.rush_days ? ` / ${p.turnaround.rush_days} days rush (+${p.turnaround.rush_surcharge_pct || 0}%)` : ""}
` : ""}
-
-
- `).join("")}
-