Add hide attribute to sequoia-comments component

Resolves #1

bun.lock

···
     },
     "packages/cli": {
       "name": "sequoia-cli",
-      "version": "0.3.2",
+      "version": "0.4.0",
       "bin": {
         "sequoia": "dist/index.js",
       },
···
       "devDependencies": {
         "@biomejs/biome": "^2.3.13",
         "@types/mime-types": "^3.0.1",
-        "@types/node": "^20",
-      },
-      "peerDependencies": {
-        "typescript": "^5",
-      },
-    },
-    "packages/ui": {
-      "name": "sequoia-ui",
-      "version": "0.1.0",
-      "devDependencies": {
-        "@biomejs/biome": "^2.3.13",
         "@types/node": "^20",
       },
       "peerDependencies": {
···
     "send": ["send@0.19.2", "", { "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", "fresh": "~0.5.2", "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", "on-finished": "~2.4.1", "range-parser": "~1.2.1", "statuses": "~2.0.2" } }, "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg=="],
 
     "sequoia-cli": ["sequoia-cli@workspace:packages/cli"],
-
-    "sequoia-ui": ["sequoia-ui@workspace:packages/ui"],
 
     "serve-static": ["serve-static@1.16.3", "", { "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", "send": "~0.19.1" } }, "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA=="],
 

docs/docs/pages/comments.mdx

···
 |-----------|------|---------|-------------|
 | `document-uri` | `string` | - | AT Protocol URI for the document. Optional if a `<link rel="site.standard.document">` tag exists in the page head. |
 | `depth` | `number` | `6` | Maximum depth of nested replies to fetch. |
+| `hide` | `string` | - | Set to "auto" to hide if no document link is detected |
 
 ```html
 <!-- Use attributes for explicit control -->

docs/docs/public/sequoia-comments.js

···
  * Attributes:
  *   - document-uri: AT Protocol URI for the document (optional if link tag exists)
  *   - depth: Maximum depth of nested replies to fetch (default: 6)
+ *   - hide: Set to "auto" to hide if no document link is detected
  *
  * CSS Custom Properties:
  *   - --sequoia-fg-color: Text color (default: #1f2937)
···
 class SequoiaComments extends BaseElement {
 	constructor() {
 		super();
-		this.shadow = this.attachShadow({ mode: "open" });
+		const shadow = this.attachShadow({ mode: "open" });
+
+		const styleTag = document.createElement("style");
+		shadow.appendChild(styleTag);
+		styleTag.innerText = styles;
+
+		const container = document.createElement("div");
+		shadow.appendChild(container);
+		container.className = "sequoia-comments-container";
+		container.part = "container";
+
+		this.commentsContainer = container;
 		this.state = { type: "loading" };
 		this.abortController = null;
+
 	}
 
 	static get observedAttributes() {
-		return ["document-uri", "depth"];
+		return ["document-uri", "depth", "hide"];
 	}
 
 	connectedCallback() {
···
 	get depth() {
 		const depthAttr = this.getAttribute("depth");
 		return depthAttr ? parseInt(depthAttr, 10) : 6;
+	}
+
+	get hide() {
+		const hideAttr = this.getAttribute("hide");
+		return hideAttr === "auto";
 	}
 
 	async loadComments() {
···
 	}
 
 	render() {
-		const styleTag = `<style>${styles}</style>`;
-
 		switch (this.state.type) {
 			case "loading":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-loading">
-							<span class="sequoia-loading-spinner"></span>
-							Loading comments...
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-loading">
+						<span class="sequoia-loading-spinner"></span>
+						Loading comments...
 					</div>
 				`;
 				break;
 
 			case "no-document":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-warning">
-							No document found. Add a <code>&lt;link rel="site.standard.document" href="at://..."&gt;</code> tag to your page.
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-warning">
+						No document found. Add a <code>&lt;link rel="site.standard.document" href="at://..."&gt;</code> tag to your page.
 					</div>
 				`;
+				if (this.hide) {
+					this.commentsContainer.style.display = 'none';
+				}
 				break;
 
 			case "no-comments-enabled":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-empty">
-							Comments are not enabled for this post.
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-empty">
+						Comments are not enabled for this post.
 					</div>
 				`;
 				break;
 
 			case "empty":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-comments-header">
-							<h3 class="sequoia-comments-title">Comments</h3>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
-								${BLUESKY_ICON}
-								Reply on Bluesky
-							</a>
-						</div>
-						<div class="sequoia-empty">
-							No comments yet. Be the first to reply on Bluesky!
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-comments-header">
+						<h3 class="sequoia-comments-title">Comments</h3>
+						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
+							${BLUESKY_ICON}
+							Reply on Bluesky
+						</a>
+					</div>
+					<div class="sequoia-empty">
+						No comments yet. Be the first to reply on Bluesky!
 					</div>
 				`;
 				break;
 
 			case "error":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-error">
-							Failed to load comments: ${escapeHtml(this.state.message)}
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-error">
+						Failed to load comments: ${escapeHtml(this.state.message)}
 					</div>
 				`;
 				break;
···
 					.join("");
 				const commentCount = this.countComments(replies);
 
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-comments-header">
-							<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
-								${BLUESKY_ICON}
-								Reply on Bluesky
-							</a>
-						</div>
-						<div class="sequoia-comments-list">
-							${threadsHtml}
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-comments-header">
+						<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
+						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
+							${BLUESKY_ICON}
+							Reply on Bluesky
+						</a>
+					</div>
+					<div class="sequoia-comments-list">
+						${threadsHtml}
 					</div>
 				`;
 				break;

packages/cli/src/components/sequoia-comments.js

···
  * Attributes:
  *   - document-uri: AT Protocol URI for the document (optional if link tag exists)
  *   - depth: Maximum depth of nested replies to fetch (default: 6)
+ *   - hide: Set to "auto" to hide if no document link is detected
  *
  * CSS Custom Properties:
  *   - --sequoia-fg-color: Text color (default: #1f2937)
···
 class SequoiaComments extends BaseElement {
 	constructor() {
 		super();
-		this.shadow = this.attachShadow({ mode: "open" });
+		const shadow = this.attachShadow({ mode: "open" });
+
+		const styleTag = document.createElement("style");
+		shadow.appendChild(styleTag);
+		styleTag.innerText = styles;
+
+		const container = document.createElement("div");
+		shadow.appendChild(container);
+		container.className = "sequoia-comments-container";
+		container.part = "container";
+
+		this.commentsContainer = container;
 		this.state = { type: "loading" };
 		this.abortController = null;
+
 	}
 
 	static get observedAttributes() {
-		return ["document-uri", "depth"];
+		return ["document-uri", "depth", "hide"];
 	}
 
 	connectedCallback() {
···
 	get depth() {
 		const depthAttr = this.getAttribute("depth");
 		return depthAttr ? parseInt(depthAttr, 10) : 6;
+	}
+
+	get hide() {
+		const hideAttr = this.getAttribute("hide");
+		return hideAttr === "auto";
 	}
 
 	async loadComments() {
···
 	}
 
 	render() {
-		const styleTag = `<style>${styles}</style>`;
-
 		switch (this.state.type) {
 			case "loading":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-loading">
-							<span class="sequoia-loading-spinner"></span>
-							Loading comments...
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-loading">
+						<span class="sequoia-loading-spinner"></span>
+						Loading comments...
 					</div>
 				`;
 				break;
 
 			case "no-document":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-warning">
-							No document found. Add a <code>&lt;link rel="site.standard.document" href="at://..."&gt;</code> tag to your page.
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-warning">
+						No document found. Add a <code>&lt;link rel="site.standard.document" href="at://..."&gt;</code> tag to your page.
 					</div>
 				`;
+				if (this.hide) {
+					this.commentsContainer.style.display = 'none';
+				}
 				break;
 
 			case "no-comments-enabled":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-empty">
-							Comments are not enabled for this post.
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-empty">
+						Comments are not enabled for this post.
 					</div>
 				`;
 				break;
 
 			case "empty":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-comments-header">
-							<h3 class="sequoia-comments-title">Comments</h3>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
-								${BLUESKY_ICON}
-								Reply on Bluesky
-							</a>
-						</div>
-						<div class="sequoia-empty">
-							No comments yet. Be the first to reply on Bluesky!
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-comments-header">
+						<h3 class="sequoia-comments-title">Comments</h3>
+						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
+							${BLUESKY_ICON}
+							Reply on Bluesky
+						</a>
+					</div>
+					<div class="sequoia-empty">
+						No comments yet. Be the first to reply on Bluesky!
 					</div>
 				`;
 				break;
 
 			case "error":
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-error">
-							Failed to load comments: ${escapeHtml(this.state.message)}
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-error">
+						Failed to load comments: ${escapeHtml(this.state.message)}
 					</div>
 				`;
 				break;
···
 					.join("");
 				const commentCount = this.countComments(replies);
 
-				this.shadow.innerHTML = `
-					${styleTag}
-					<div class="sequoia-comments-container">
-						<div class="sequoia-comments-header">
-							<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
-								${BLUESKY_ICON}
-								Reply on Bluesky
-							</a>
-						</div>
-						<div class="sequoia-comments-list">
-							${threadsHtml}
-						</div>
+				this.commentsContainer.innerHTML = `
+					<div class="sequoia-comments-header">
+						<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
+						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
+							${BLUESKY_ICON}
+							Reply on Bluesky
+						</a>
+					</div>
+					<div class="sequoia-comments-list">
+						${threadsHtml}
 					</div>
 				`;
 				break;