+
+ ${this.#visibility === "local" ? "\u{1F512}" : "\u{1F310}"}
+
+ 
`
+ : ""
+ }
+
+ `;
+
+ const slot = root.querySelector("slot");
+ if (slot?.parentElement) {
+ const parent = slot.parentElement;
+ const existingDiv = parent.querySelector("div");
+ if (existingDiv) {
+ parent.replaceChild(wrapper.querySelector(".card")!, existingDiv);
+ }
+ }
+
+ // Toggle visibility on badge click
+ const badge = root.querySelector(".visibility-badge") as HTMLElement;
+ const card = root.querySelector(".card") as HTMLElement;
+
+ badge?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#visibility = this.#visibility === "local" ? "shared" : "local";
+
+ badge.textContent = this.#visibility === "local" ? "\u{1F512}" : "\u{1F310}";
+ card.classList.remove("local", "shared");
+ card.classList.add(this.#visibility);
+
+ this.dispatchEvent(
+ new CustomEvent("visibility-change", {
+ detail: { visibility: this.#visibility, itemId: this.#itemId },
+ bubbles: true,
+ })
+ );
+ });
+
+ return root;
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ #formatDate(timestamp: number): string {
+ const now = new Date();
+ const date = new Date(timestamp);
+ const diffDays = Math.floor(
+ (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
+ );
+
+ if (diffDays === 0) return "Today";
+ if (diffDays === 1) return "Yesterday";
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-google-item",
+ itemId: this.itemId,
+ service: this.service,
+ title: this.title,
+ preview: this.preview,
+ date: this.date,
+ thumbnailUrl: this.thumbnailUrl,
+ visibility: this.visibility,
+ };
+ }
+}
+
+/**
+ * Helper to create Google item props
+ */
+export function createGoogleItemProps(
+ service: GoogleService,
+ title: string,
+ options: Partial<{
+ itemId: string;
+ preview: string;
+ date: number;
+ thumbnailUrl: string;
+ visibility: ItemVisibility;
+ }> = {}
+) {
+ return {
+ service,
+ title,
+ itemId: options.itemId || crypto.randomUUID(),
+ preview: options.preview || "",
+ date: options.date || Date.now(),
+ thumbnailUrl: options.thumbnailUrl || "",
+ visibility: options.visibility || "local",
+ };
+}
diff --git a/lib/folk-piano.ts b/lib/folk-piano.ts
new file mode 100644
index 0000000..09223b5
--- /dev/null
+++ b/lib/folk-piano.ts
@@ -0,0 +1,291 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const PIANO_URL = "https://musiclab.chromeexperiments.com/Shared-Piano/";
+
+const styles = css`
+ :host {
+ background: #1e1e2e;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ min-width: 400px;
+ min-height: 300px;
+ overflow: hidden;
+ }
+
+ .piano-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+
+ .piano-iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ }
+
+ .loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+ color: white;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ font-size: 18px;
+ gap: 12px;
+ }
+
+ .loading.hidden {
+ display: none;
+ }
+
+ .error {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+ color: white;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ gap: 12px;
+ }
+
+ .error.hidden {
+ display: none;
+ }
+
+ .error-message {
+ font-size: 14px;
+ color: #f87171;
+ }
+
+ .retry-btn {
+ background: #6366f1;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ padding: 8px 16px;
+ cursor: pointer;
+ font-size: 14px;
+ }
+
+ .retry-btn:hover {
+ background: #4f46e5;
+ }
+
+ .controls {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ display: flex;
+ gap: 4px;
+ }
+
+ .control-btn {
+ background: rgba(0, 0, 0, 0.5);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 4px 8px;
+ cursor: pointer;
+ font-size: 14px;
+ }
+
+ .control-btn:hover {
+ background: rgba(0, 0, 0, 0.7);
+ }
+
+ .minimized {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+ color: white;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ font-size: 24px;
+ cursor: pointer;
+ }
+
+ .minimized.hidden {
+ display: none;
+ }
+`;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-piano": FolkPiano;
+ }
+}
+
+export class FolkPiano extends FolkShape {
+ static override tagName = "folk-piano";
+
+ 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;
+ }
+
+ #isMinimized = false;
+ #isLoading = true;
+ #hasError = false;
+ #iframe: HTMLIFrameElement | null = null;
+ #loadingEl: HTMLElement | null = null;
+ #errorEl: HTMLElement | null = null;
+ #minimizedEl: HTMLElement | null = null;
+ #containerEl: HTMLElement | null = null;
+
+ get isMinimized() {
+ return this.#isMinimized;
+ }
+
+ set isMinimized(value: boolean) {
+ this.#isMinimized = value;
+ this.#updateVisibility();
+ this.requestUpdate("isMinimized");
+ }
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+
+ ${this.#escapeHtml(this.#title)}
+
+ ${this.#preview ? `${this.#escapeHtml(this.#preview)}
` : ""}
+ ${this.#formatDate(this.#date)}
+ ${
+ this.#thumbnailUrl && this.height > 100
+ ? `
+
+ `;
+
+ const slot = root.querySelector("slot");
+ if (slot?.parentElement) {
+ const parent = slot.parentElement;
+ const existingDiv = parent.querySelector("div");
+ if (existingDiv) {
+ parent.replaceChild(wrapper.querySelector(".piano-container")!, existingDiv);
+ }
+ }
+
+ // Get references
+ this.#containerEl = root.querySelector(".piano-container");
+ this.#loadingEl = root.querySelector(".loading");
+ this.#errorEl = root.querySelector(".error");
+ this.#minimizedEl = root.querySelector(".minimized");
+ this.#iframe = root.querySelector(".piano-iframe");
+ const minimizeBtn = root.querySelector(".minimize-btn") as HTMLButtonElement;
+ const retryBtn = root.querySelector(".retry-btn") as HTMLButtonElement;
+
+ // Iframe load handling
+ this.#iframe?.addEventListener("load", () => {
+ this.#isLoading = false;
+ this.#hasError = false;
+ if (this.#loadingEl) this.#loadingEl.classList.add("hidden");
+ if (this.#iframe) this.#iframe.style.opacity = "1";
+ });
+
+ this.#iframe?.addEventListener("error", () => {
+ this.#isLoading = false;
+ this.#hasError = true;
+ if (this.#loadingEl) this.#loadingEl.classList.add("hidden");
+ if (this.#errorEl) this.#errorEl.classList.remove("hidden");
+ });
+
+ // Minimize toggle
+ minimizeBtn?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.isMinimized = !this.#isMinimized;
+ minimizeBtn.textContent = this.#isMinimized ? "\u{1F53D}" : "\u{1F53C}";
+ });
+
+ // Click minimized view to expand
+ this.#minimizedEl?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.isMinimized = false;
+ if (minimizeBtn) minimizeBtn.textContent = "\u{1F53C}";
+ });
+
+ // Retry button
+ retryBtn?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#retry();
+ });
+
+ // Suppress Chrome Music Lab console errors
+ window.addEventListener("error", (e) => {
+ if (e.message?.includes("musiclab") || e.filename?.includes("musiclab")) {
+ e.preventDefault();
+ }
+ });
+
+ return root;
+ }
+
+ #updateVisibility() {
+ if (!this.#iframe || !this.#minimizedEl) return;
+
+ if (this.#isMinimized) {
+ this.#iframe.style.display = "none";
+ this.#minimizedEl.classList.remove("hidden");
+ } else {
+ this.#iframe.style.display = "block";
+ this.#minimizedEl.classList.add("hidden");
+ }
+ }
+
+ #retry() {
+ if (!this.#iframe || !this.#errorEl || !this.#loadingEl) return;
+
+ this.#hasError = false;
+ this.#isLoading = true;
+ this.#errorEl.classList.add("hidden");
+ this.#loadingEl.classList.remove("hidden");
+ this.#iframe.style.opacity = "0";
+ this.#iframe.src = PIANO_URL;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-piano",
+ isMinimized: this.isMinimized,
+ };
+ }
+}
diff --git a/lib/folk-slide.ts b/lib/folk-slide.ts
new file mode 100644
index 0000000..aff03b2
--- /dev/null
+++ b/lib/folk-slide.ts
@@ -0,0 +1,116 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: transparent;
+ min-width: 200px;
+ min-height: 150px;
+ }
+
+ .slide-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ border: 2px dashed #94a3b8;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .slide-label {
+ position: absolute;
+ top: 8px;
+ left: 12px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: #64748b;
+ background: white;
+ padding: 2px 8px;
+ border-radius: 4px;
+ }
+
+ .slide-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #94a3b8;
+ font-size: 48px;
+ }
+`;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-slide": FolkSlide;
+ }
+}
+
+export class FolkSlide extends FolkShape {
+ static override tagName = "folk-slide";
+
+ 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;
+ }
+
+ #label = "Slide 1";
+
+ get label() {
+ return this.#label;
+ }
+
+ set label(value: string) {
+ this.#label = value;
+ this.requestUpdate("label");
+ }
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+
+ `;
+
+ const slot = root.querySelector("slot");
+ if (slot?.parentElement) {
+ slot.parentElement.replaceChild(
+ wrapper.querySelector(".slide-container")!,
+ slot.parentElement.querySelector("div")!
+ );
+ }
+
+ // Update label from attribute
+ this.#label = this.getAttribute("label") || "Slide 1";
+ const labelEl = root.querySelector(".slide-label") as HTMLElement;
+ if (labelEl) {
+ labelEl.textContent = this.#label;
+ }
+
+ return root;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-slide",
+ label: this.label,
+ };
+ }
+}
diff --git a/lib/index.ts b/lib/index.ts
index 9e17ac4..13a5615 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -25,6 +25,10 @@ export * from "./folk-shape";
export * from "./folk-markdown";
export * from "./folk-wrapper";
export * from "./folk-arrow";
+export * from "./folk-slide";
+export * from "./folk-chat";
+export * from "./folk-google-item";
+export * from "./folk-piano";
// Sync
export * from "./community-sync";
diff --git a/website/canvas.html b/website/canvas.html
index 7415711..3ca6c5f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -128,7 +128,11 @@
folk-markdown,
folk-wrapper,
- folk-arrow {
+ folk-arrow,
+ folk-slide,
+ folk-chat,
+ folk-google-item,
+ folk-piano {
position: absolute;
}
@@ -158,6 +162,9 @@
+ \u{1F3B9}
+ Loading Shared Piano...
+
+
+
+
+
+
+
+
+
+
+
@@ -172,13 +179,27 @@