@teleporthq/teleport-shared 0.44.0-alpha.0 → 0.44.0

package/__tests__/_fixtures/rich-text/README.md

@@ -0,0 +1,6 @@
+Stored-HTML fixtures for `rich-text-content`.
+
+`help-*.html` are six articles of TeleportHQ's help center (help-center/, 2026-09-15 drafts)
+rendered from Markdown with markdown-it 14 (`html: false`), front matter, comments and the title
+heading removed. Chosen for what they hold: a 77-line table, a table inside a numbered step,
+fenced code inside list items, a list starting at 2, callouts as bold-led quotes, a same-page anchor.

package/__tests__/_fixtures/rich-text/help-accept-an-invitation.html

@@ -0,0 +1,50 @@
+<p>TeleportHQ invitations don't need to be accepted. If you already have a TeleportHQ account with the email address you were invited with, you have access right away: open your dashboard and look under <strong>SHARED WITH ME</strong>. If you don't have an account yet, sign up with exactly that email address, and the workspace or project is added to your account automatically.</p>
+<h2>Before you start</h2>
+<ul>
+<li><strong>Find the email address you were invited with.</strong> It's the address the invitation email was sent to. Access is matched to that exact address.</li>
+</ul>
+<h2>If you already have a TeleportHQ account</h2>
+<ol>
+<li>Sign in to TeleportHQ with the account that uses the invited email address.</li>
+<li>Open your dashboard. If it was already open, reload the page.</li>
+<li>In the <strong>left sidebar</strong>, look under <strong>SHARED WITH ME</strong>:
+<ul>
+<li>If you were invited to a <strong>workspace</strong>, its name is listed there. Click it to see its projects.</li>
+<li>If you were invited to a <strong>single project</strong>, click <strong>Shared projects</strong>. The project is listed there.</li>
+</ul>
+</li>
+</ol>
+<p><img src="screenshots/accept-an-invitation-1.png" alt="The dashboard sidebar with the SHARED WITH ME section showing Shared projects and a shared workspace"></p>
+<h2>If you don't have a TeleportHQ account yet</h2>
+<ol>
+<li>Go to the TeleportHQ sign-up page. You can use the link in the invitation email.</li>
+<li>Sign up with <strong>the same email address</strong> the invitation was sent to. If you sign up with Google, GitHub or Microsoft, make sure that account uses the same address. See <a href="../../account/sign-up.md">How to create a TeleportHQ account</a>.</li>
+<li>Confirm your email address if TeleportHQ asks you to.</li>
+<li>Open your dashboard. The shared workspace or project is under <strong>SHARED WITH ME</strong>.</li>
+</ol>
+<h2>Check that it worked</h2>
+<p>You can open the shared workspace or project from <strong>SHARED WITH ME</strong>. What you can do inside depends on the role you were given. For example, a Viewer can look and comment but not edit. See <a href="roles-and-permissions.md">What can each role do?</a>.</p>
+<h2>Troubleshooting</h2>
+<p><strong>I don't see the workspace or project</strong>
+You're most likely signed in with a different email address, for example a Google account with a different address than the one invited. Check your address in <strong>Account Settings</strong>. Then either sign in with the invited address, or ask the person who invited you to invite the address you use.</p>
+<p><strong>I signed up before I was invited, with another address</strong>
+TeleportHQ only attaches invitations to the exact address they were sent to. Ask the inviter to remove the old invitation and invite the address your account uses.</p>
+<p><strong>The project opens as &quot;View only&quot;</strong>
+You were given a read-only role. Click <strong>View only</strong> in the top bar, then <strong>Request editing rights</strong>. See <a href="../sharing/request-editing-rights.md">How to ask for editing rights on a view-only project</a>.</p>
+<p><strong>I never got the invitation email</strong>
+The email is only a notification. If you have an account with the invited address, your access is already there: check <strong>SHARED WITH ME</strong>. Also check your spam folder.</p>
+<h2>Good to know</h2>
+<ul>
+<li><strong>You also get your own workspace.</strong> Every new TeleportHQ account gets its own workspace, called &quot;My workspace&quot;, on a 7-day trial. Shared workspaces are separate and listed under <strong>SHARED WITH ME</strong>.</li>
+<li><strong>Invitations don't expire.</strong> There's no accept, decline or expiry step. To turn down access, leave the workspace or project. See <a href="../workspaces/leave-a-workspace.md">How to leave a workspace</a> and <a href="../sharing/find-and-leave-shared-projects.md">How to find projects shared with you (and leave them)</a>.</li>
+<li><strong>Upper and lower case.</strong> Use the address exactly as it was invited.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="invite-people-to-your-workspace.md">How to invite people to your workspace</a></li>
+<li><a href="../sharing/find-and-leave-shared-projects.md">How to find projects shared with you (and leave them)</a></li>
+<li><a href="../workspaces/what-is-a-workspace.md">What is a workspace?</a></li>
+<li><a href="roles-and-permissions.md">What can each role do? (Admin, Designer, Editor, Viewer)</a></li>
+<li><a href="../../account/sign-up.md">How to create a TeleportHQ account</a></li>
+<li><a href="../../account/sign-in-problems.md">I can't sign in: what should I do?</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-activate-an-appsumo-license.html

@@ -0,0 +1,44 @@
+<p>To activate a TeleportHQ license you bought on AppSumo, open the activation link AppSumo gives you. It opens the TeleportHQ <strong>Welcome Sumo-ling!</strong> page with your AppSumo email already filled in. Create a TeleportHQ account with a password, or sign in if you already have one. When your dashboard opens, TeleportHQ creates a new workspace on your AppSumo plan.</p>
+<h2>Before you start</h2>
+<ul>
+<li>You need the activation link from your AppSumo purchase. The page only works when opened from that link. - <strong>Use the email address of your AppSumo purchase.</strong> TeleportHQ only activates the license for an account with that exact email, and you can't change it on the page.</li>
+<li>Opening the link signs out anyone currently signed in to TeleportHQ in that browser.</li>
+<li>An account that already has an activated AppSumo plan can't activate another one.</li>
+</ul>
+<h2>Steps</h2>
+<h3>If you don't have a TeleportHQ account yet</h3>
+<ol>
+<li>Open the activation link from AppSumo. The page says &quot;TeleportHQ account for &lt;your email&gt; is almost ready&quot;.</li>
+<li>Under <strong>Please set a password to Sign Up</strong>, type a password with at least 8 characters.</li>
+<li>Tick <strong>I agree to Terms &amp; Conditions.</strong></li>
+<li>Click <strong>Create account</strong>.</li>
+<li>Confirm your email: open the email from TeleportHQ and click its link. See <a href="sign-up.md">How to create a TeleportHQ account</a>.</li>
+<li>Answer the welcome questions. The dashboard opens and TeleportHQ creates your AppSumo workspace. The message &quot;Workspace was created with success.&quot; appears.</li>
+</ol>
+<h3>If you already have a TeleportHQ account with that email</h3>
+<ol>
+<li>Open the activation link from AppSumo. The page says &quot;There is already an account associated with &lt;your email&gt; activation email&quot;.</li>
+<li>Sign in: click the <strong>Sign in with …</strong> button you normally use, or type your password and click <strong>Sign In</strong>.</li>
+<li>The dashboard opens and TeleportHQ creates your AppSumo workspace. The message &quot;Workspace was created with success.&quot; appears.</li>
+</ol>
+<p><img src="screenshots/activate-an-appsumo-license-1.png" alt="The Welcome Sumo-ling! page with the AppSumo email filled in, the password field and the Create account button"></p>
+<h2>Check that it worked</h2>
+<p>In the dashboard's left sidebar, under <strong>WORKSPACES</strong>, you see a new workspace. Open its <strong>Plans</strong> settings to see your AppSumo plan. See <a href="../plans-and-billing/plans/legacy-lifetime-and-appsumo-plans.md">I'm on an older, Lifetime or AppSumo plan: what do I get?</a></p>
+<h2>Troubleshooting</h2>
+<p><strong>&quot;The current account e-mail is not the one associated with your activation AppSumo one. Check your inbox and retry this operation.&quot;</strong>
+You're signed in with a different email address than the AppSumo purchase. Log out, open the activation link again, and sign in or sign up with the AppSumo email.</p>
+<p><strong>&quot;Could not create workspace from AppSumo. Account already has an activated plan.&quot;</strong>
+This account already activated an AppSumo license. Check your workspaces for the existing AppSumo workspace. For help, contact TeleportHQ support. See <a href="../getting-started/get-help.md">How to get help</a>.</p>
+<p><strong>&quot;Could not create workspace from AppSumo. Check your inbox and retry operation.&quot;</strong>
+Activation failed. Open the activation link from your AppSumo email again and retry.</p>
+<p><strong>The page only shows a loading spinner</strong>
+The page was opened without the AppSumo activation details. Open the full link from AppSumo again, instead of typing the address.</p>
+<p><strong>I signed up with Google, GitHub or Microsoft using the same email</strong>
+On the activation page, click the matching <strong>Sign in with …</strong> button.</p>
+<h2>Related articles</h2>
+<ul>
+<li><a href="../plans-and-billing/plans/legacy-lifetime-and-appsumo-plans.md">I'm on an older, Lifetime or AppSumo plan: what do I get?</a></li>
+<li><a href="sign-up.md">How to create a TeleportHQ account</a></li>
+<li><a href="sign-in-problems.md">I can't sign in: what should I do?</a></li>
+<li><a href="../collaboration/workspaces/what-is-a-workspace.md">What is a workspace?</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-add-custom-code-to-your-site.html

@@ -0,0 +1,61 @@
+<p>To add a script, style or tag to every page of a TeleportHQ site, open <strong>Project Settings → Custom Code</strong>, choose <strong>Head</strong> or <strong>Body</strong>, paste the code and click <strong>Save Changes</strong>. Then publish your site. The code runs on your published (and downloaded) site, not inside the TeleportHQ editor.</p>
+<h2>Before you start</h2>
+<ul>
+<li>You need permission to change project settings (Owner, Admin or Designer role).</li>
+<li>Get the full code snippet from the tool you're adding, including its opening and closing tags, for example <code>&lt;script&gt;</code> and <code>&lt;/script&gt;</code>.</li>
+<li><strong>Head</strong> or <strong>Body?</strong> Follow the tool's instructions. As a rule:
+<ul>
+<li><strong>Head</strong>: <code>&lt;meta&gt;</code>, <code>&lt;link&gt;</code> and <code>&lt;style&gt;</code> tags, and scripts the tool says to put in the head (many analytics tools).</li>
+<li><strong>Body</strong>: scripts the tool says to put in the body, such as chat widgets.</li>
+</ul>
+</li>
+<li>The settings page lists the tags you can add here: <code>link</code>, <code>meta</code>, <code>style</code> and <code>script</code>.</li>
+<li>For fonts, use <strong>Project Settings → Fonts</strong> instead. See <a href="../../design/fonts/upload-custom-fonts.md">How to upload your own fonts</a>.</li>
+</ul>
+<h2>Steps</h2>
+<ol>
+<li>In the editor, at the <strong>top left</strong>, click the TeleportHQ logo (tooltip <strong>Project Menu</strong>).</li>
+<li>Click <strong>Project Settings</strong>.</li>
+<li>In the settings menu on the left, click <strong>Custom Code</strong>.</li>
+<li>Scroll to the <strong>Custom code</strong> section.</li>
+<li>Click <strong>Head</strong> or <strong>Body</strong>.</li>
+<li>Paste your code into the code box. For example, a chat widget:<pre><code class="language-html">&lt;script src=&quot;https://widget.example.com/chat.js&quot; async&gt;&lt;/script&gt;
+</code></pre>
+</li>
+<li>Click <strong>Save Changes</strong>. The message &quot;The changes have been saved&quot; appears.</li>
+<li>Go back to the editor and publish your site. See <a href="../../publishing/publish/publish-your-site.md">How to publish your site</a>.</li>
+</ol>
+<p><img src="screenshots/add-custom-code-to-your-site-1.png" alt="Project Settings with the Custom Code tab open, the Head and Body tabs and a script pasted in the code box"></p>
+<p>You can also reach <strong>Project Settings</strong> from the drop-down next to the project name at the top of the editor, or from the <strong>…</strong> menu on the project card on the dashboard.</p>
+<h2>Check that it worked</h2>
+<p>Open your published site in a new browser tab. The tool should work there, for example the chat bubble appears. To confirm the code is on the page, right-click the page, choose <strong>View page source</strong>, and search for part of your snippet.</p>
+<h2>Troubleshooting</h2>
+<p><strong>The code doesn't work in the editor</strong>
+That's expected. TeleportHQ doesn't run custom code on the editor canvas: &quot;You will not be able to interact with the 3rd party code while editing your project in the playground, this will only work on your published websites.&quot; Publish and test on the live site.
+<strong>The code doesn't work on my live site</strong></p>
+<ul>
+<li>Publish again. Saving settings doesn't update the live site by itself.</li>
+<li>Check you pasted the whole snippet, including opening and closing tags.</li>
+<li>Check the tag type: this box is meant for <code>link</code>, <code>meta</code>, <code>style</code> and <code>script</code> tags. To place visible HTML (a table, a form, an iframe) in one spot, use a Code Embed element instead.</li>
+</ul>
+<p><strong>My site layout broke after adding code</strong>
+The settings page warns: &quot;WARNING: Invalid code added here might break your website.&quot; Remove the code you added, click <strong>Save Changes</strong>, publish again, and check the snippet with the tool's provider.</p>
+<p><strong>The Save Changes button is greyed out</strong>
+You haven't changed anything since the last save. Edit the code, then save.</p>
+<p><strong>&quot;Could not save changes&quot;</strong>
+Try again. If it keeps failing, reload the page, and check your role allows changing project settings.</p>
+<h2>Good to know</h2>
+<ul>
+<li><strong>Custom Code vs Code Embed:</strong> Custom Code applies to every page and adds nothing visible. A <strong>Code Embed</strong> element puts code in one place on one page, like a booking calendar. See <a href="../../editor/elements/add-custom-code-with-code-embed.md">How to add your own HTML or JavaScript with Code Embed</a>.</li>
+<li><strong>Google Analytics and Google Tag Manager</strong> have their own fields in the <strong>Google</strong> section at the top of the same tab. See <a href="../../seo-and-growth/analytics/add-google-analytics.md">How to add Google Analytics or Google Tag Manager</a>.</li>
+<li><strong>Tracking pixels</strong> such as Meta or TikTok go in this Custom Code box. See <a href="../../seo-and-growth/analytics/add-tracking-pixels.md">How to add a tracking pixel (Meta, TikTok, LinkedIn)</a>.</li>
+<li>Custom code is included when you download your site's code.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="../../editor/elements/add-custom-code-with-code-embed.md">How to add your own HTML or JavaScript with Code Embed</a></li>
+<li><a href="../../seo-and-growth/analytics/add-google-analytics.md">How to add Google Analytics or Google Tag Manager</a></li>
+<li><a href="../../seo-and-growth/analytics/add-tracking-pixels.md">How to add a tracking pixel (Meta, TikTok, LinkedIn)</a></li>
+<li><a href="../../project-settings/project-settings-explained.md">Where are Project Settings, and what's in them?</a></li>
+<li><a href="../../publishing/publish/publish-your-site.md">How to publish your site</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-connect-a-custom-domain.html

@@ -0,0 +1,106 @@
+<p>In TeleportHQ, you connect a domain you own (like <code>mybakery.com</code>) from the <strong>Publish</strong> window. Publish your site to Production first, then go to <strong>Domains</strong> → <strong>Custom domain</strong> → <strong>Configure</strong>, type your domain and choose the default address. TeleportHQ then shows the DNS records to add at your domain provider. Once they work, your live site opens on your own domain.</p>
+<h2>Before you start</h2>
+<ul>
+<li><strong>Plan.</strong> Custom domains work on Trial, Pro and Premium. Each of these plans includes 1 custom domain for the workspace. See <a href="custom-domain-limits.md">How many custom domains can I connect?</a>.</li>
+<li><strong>Publish to Production first.</strong> A custom domain always points at your live site, so the project needs at least one Production publish. See <a href="../publish/publish-your-site.md">How to publish your site</a>.</li>
+<li><strong>Own the domain.</strong> Buy it from a domain provider (for example GoDaddy, Namecheap or Cloudflare) and make sure you can sign in there and change its DNS settings. A DNS record is a setting at your domain provider that tells the internet where your domain should go.</li>
+<li><strong>Role.</strong> You need a role that can publish: Owner, Admin or Designer.</li>
+<li><strong>One domain per project.</strong> A project can have one custom domain, plus its <code>www</code> twin.</li>
+</ul>
+<h2>Steps</h2>
+<h3>1. Add the domain in TeleportHQ</h3>
+<ol>
+<li>Open your project in the editor.</li>
+<li>At the <strong>top right</strong>, click <strong>Publish</strong>. The <strong>Publish</strong> window opens on the <strong>Publish</strong> tab.</li>
+<li>In the left menu, make sure <strong>Domains</strong> is selected. At the top, keep <strong>Production</strong> selected.</li>
+<li>Scroll to the <strong>Custom domain</strong> section and click <strong>Configure</strong>.</li>
+<li>Type your domain after <code>https://</code>, for example <code>mybakery.com</code> or <code>shop.mybakery.com</code>. Don't type <code>https://</code> yourself.</li>
+<li>Click <strong>Continue</strong>.</li>
+<li>If you typed a root domain like <code>mybakery.com</code>, the <strong>Choose default domain</strong> step opens. Pick one option (the section &quot;Which default domain should I choose?&quot; below explains them), then click <strong>Continue</strong>. If you typed a subdomain like <code>shop.mybakery.com</code>, this step is skipped.</li>
+</ol>
+<p>TeleportHQ shows &quot;Checking if custom domain can be added to your project...&quot;, then &quot;Verifying configurations for mybakery.com ...&quot;.</p>
+<p><img src="screenshots/connect-a-custom-domain-1.png" alt="The Custom domain section of the TeleportHQ Publish window with the domain field and the Continue button"></p>
+<h3>2. Add the DNS records at your domain provider</h3>
+<p>If your DNS isn't set up yet, TeleportHQ shows &quot;Please verify and fix the following missing configurations for your domain and recheck status&quot;. Each address gets an <strong>Invalid Configuration</strong> label and a <strong>Type / Name / Value</strong> table with copy buttons.</p>
+<ol>
+<li>
+<p>Sign in to your domain provider in a new browser tab.</p>
+</li>
+<li>
+<p>Open the DNS settings for your domain.</p>
+</li>
+<li>
+<p>Add each record exactly as TeleportHQ shows it. For a site on <code>mybakery.com</code> with the recommended <code>www</code> option, you add two records:</p>
+<table>
+<thead>
+<tr>
+<th>Type</th>
+<th>Name</th>
+<th>Value</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>A</td>
+<td>@</td>
+<td>76.76.21.21</td>
+</tr>
+<tr>
+<td>CNAME</td>
+<td>www</td>
+<td>cname.vercel-dns.com</td>
+</tr>
+</tbody>
+</table>
+</li>
+<li>
+<p>If TeleportHQ also shows a <strong>TXT</strong> record with the name <code>_vercel</code>, add it too. Copy its value from TeleportHQ.</p>
+</li>
+<li>
+<p>If TeleportHQ says &quot;Remove the following conflicting DNS record from your DNS provider:&quot;, delete that old record at your provider.</p>
+</li>
+<li>
+<p>Save the changes at your provider.</p>
+</li>
+</ol>
+<p><img src="screenshots/connect-a-custom-domain-2.png" alt="The TeleportHQ verification step showing Invalid Configuration with the A and CNAME records to add"></p>
+<p>For every record type and what it does, see <a href="dns-records-reference.md">Which DNS records do I need for my domain?</a>.</p>
+<h3>3. Check the status</h3>
+<ol>
+<li>Go back to the TeleportHQ <strong>Publish</strong> window.</li>
+<li>Click <strong>Check status</strong>.</li>
+<li>If the table is still there, wait a while and click <strong>Check status</strong> again. DNS changes often take a few minutes, and can take up to 48 hours.</li>
+</ol>
+<h2>Check that it worked</h2>
+<p>The <strong>Custom domain</strong> section now shows <code>https://mybakery.com</code> with a publish status, and a line such as &quot;Redirect option: mybakery.com&quot;. The <strong>TeleportHQ Domain</strong> row above it shows the badge <strong>Redirects to mybakery.com</strong>: your free TeleportHQ address now sends visitors to your own domain, and search engines index only your domain.</p>
+<p>Open your domain in a new browser tab. You should see your live site.</p>
+<p>From now on, the footer of the <strong>Publish</strong> window has a <strong>Publish to custom domain</strong> checkbox, ticked by default. Keep it ticked when you click <strong>Publish to Production</strong> so your domain gets your latest changes.</p>
+<h2>Which default domain should I choose?</h2>
+<p>When you connect a root domain like <code>mybakery.com</code>, TeleportHQ adds both <code>mybakery.com</code> and <code>www.mybakery.com</code> and sends one to the other, so visitors land on one main address.</p>
+<ul>
+<li><strong><code>www.mybakery.com</code></strong> (marked <strong>recommended</strong>, selected by default): <code>www.mybakery.com</code> becomes your main address. Visitors who type <code>mybakery.com</code> are sent to <code>www.mybakery.com</code>. You need both the A record and the CNAME record.</li>
+<li><strong><code>mybakery.com</code> with a redirect</strong>: <code>mybakery.com</code> becomes your main address. Visitors who type <code>www.mybakery.com</code> are sent to <code>mybakery.com</code>. You need both records.</li>
+<li><strong><code>mybakery.com</code> with &quot;no redirect&quot;</strong>: only <code>mybakery.com</code> is connected. <code>www.mybakery.com</code> won't open your site. You need only the A record.</li>
+</ul>
+<h2>Troubleshooting</h2>
+<p><strong>&quot;Publish your project to production first — a custom domain always points at your live site, so there has to be one for it to reach.&quot;</strong>
+Click <strong>Cancel</strong>, click <strong>Publish to Production</strong> and wait until the status says <strong>Published</strong>. Then click <strong>Configure</strong> again.</p>
+<p><strong>The &quot;Purchase Custom Domain Subscription&quot; window opens when you click Configure</strong>
+Your workspace has used all its custom domain slots. Remove a domain from another project, or buy a slot. See <a href="custom-domain-limits.md">How many custom domains can I connect?</a>.</p>
+<p><strong>&quot;Invalid Configuration&quot; doesn't go away</strong>
+Check each record for typing mistakes, wait for DNS to update, then click <strong>Check status</strong>. For more fixes, see <a href="custom-domain-not-working.md">Why is my custom domain not working?</a>.</p>
+<h2>Good to know</h2>
+<ul>
+<li><strong>Staging never uses your domain.</strong> Publishing to Staging doesn't change what your domain shows. See <a href="../publish/test-changes-on-staging.md">How to test changes on a staging site</a>.</li>
+<li><strong>Remove a domain.</strong> In the <strong>Custom domain</strong> section, click <strong>Remove</strong>. TeleportHQ asks &quot;Please confirm that you want to delete the existing domain&quot;. Click <strong>Confirm</strong>. Your TeleportHQ address serves the site again. Remember to delete the DNS records at your provider if you won't use them.</li>
+<li><strong>When a trial or subscription ends,</strong> TeleportHQ removes your deployments and custom domains, so your domain stops showing the site. After you subscribe again, publish again and connect the domain again. See <a href="../../plans-and-billing/plans/when-your-trial-or-subscription-ends.md">What happens when my trial or subscription ends?</a>.</li>
+<li><strong>HTTPS.</strong> TeleportHQ hosts sites on Vercel, which normally sets up a security certificate for your domain automatically once the DNS records work.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="dns-records-reference.md">Which DNS records do I need for my domain?</a></li>
+<li><a href="custom-domain-not-working.md">Why is my custom domain not working?</a></li>
+<li><a href="custom-domain-limits.md">How many custom domains can I connect (and how to get more)?</a></li>
+<li><a href="../publish/publish-your-site.md">How to publish your site</a></li>
+<li><a href="../deployments/manage-deployments.md">How to see and manage your deployments</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-custom-animations-with-code.html

@@ -0,0 +1,69 @@
+<p>In TeleportHQ, you add your own CSS animation in two parts. First, paste the animation's <code>@keyframes</code> inside a <code>&lt;style&gt;</code> tag in <strong>Project Settings → Custom Code → Head</strong> and click <strong>Save Changes</strong>. Then select an element and, in the <strong>right panel</strong>'s <strong>Advanced</strong> tab, add an <code>animation</code> property that uses the animation's name. Custom code runs on your published site, not on the editor canvas.</p>
+<h2>Before you start</h2>
+<ul>
+<li>This is for people comfortable with CSS. For animations without code, see <a href="animation-options.md">Which animation options does TeleportHQ have?</a></li>
+<li>You need permission to change project settings.</li>
+<li>Custom code isn't limited by plan.</li>
+<li>The 98 effects in the <strong>Animation</strong> section already come from the animate.css library, so you don't need to add that library to use them. See <a href="add-an-entrance-animation.md">How to animate an element when it scrolls into view</a>.</li>
+</ul>
+<h2>1. Add your keyframes</h2>
+<ol>
+<li>
+<p>In the editor, at the <strong>top left</strong>, click the TeleportHQ logo (tooltip <strong>Project Menu</strong>).</p>
+</li>
+<li>
+<p>Click <strong>Project Settings</strong>.</p>
+</li>
+<li>
+<p>In the settings menu on the left, click <strong>Custom Code</strong>.</p>
+</li>
+<li>
+<p>Under <strong>Custom code</strong>, click <strong>Head</strong>.</p>
+</li>
+<li>
+<p>Paste your animation inside a <code>&lt;style&gt;</code> tag. For example:</p>
+<pre><code class="language-html">&lt;style&gt;
+  @keyframes softPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+&lt;/style&gt;
+</code></pre>
+</li>
+<li>
+<p>Click <strong>Save Changes</strong>.</p>
+</li>
+</ol>
+<p><img src="screenshots/custom-animations-with-code-1.png" alt="The Custom Code settings with the Head tab selected and a style block with keyframes in the code editor"></p>
+<h2>2. Use the animation on an element</h2>
+<ol>
+<li>Go back to the editor and select the element. For example, an <strong>Order now</strong> button.</li>
+<li>In the <strong>right panel</strong>, open the <strong>Advanced</strong> tab.</li>
+<li>In the empty row, type <code>animation</code> in the <strong>property</strong> field.</li>
+<li>Type <code>softPulse 2s infinite</code> in the <strong>value</strong> field.</li>
+<li>Click <strong>+</strong> to add the row.</li>
+</ol>
+<p>To reuse the animation on many elements, add the same <code>animation</code> property to a CSS class instead, in the class's <strong>Properties</strong>. See <a href="../css-classes/edit-a-css-class.md">How to edit a CSS class</a>.</p>
+<h2>Add an animation library</h2>
+<p>To load another library, such as a scroll-animation script, paste its <code>&lt;link&gt;</code> or <code>&lt;script&gt;</code> tag from the library's documentation into <strong>Head</strong> (or <strong>Body</strong> for scripts that should load last), then click <strong>Save Changes</strong>. Follow the library's own instructions for the class names or attributes it needs.</p>
+<h2>Check that it worked</h2>
+<p>Custom code doesn't run on the TeleportHQ canvas, so the element stays still while you edit. Publish your site and open it to see the animation. See <a href="../../publishing/publish/publish-your-site.md">How to publish your site</a>.</p>
+<h2>Troubleshooting</h2>
+<p><strong>The animation doesn't play on my published site</strong>
+Check that the name in the <code>animation</code> value matches the <code>@keyframes</code> name exactly, including capital letters. Then check that you clicked <strong>Save Changes</strong> and published again after adding the code.</p>
+<p><strong>My site looks broken after adding code</strong>
+The settings page warns: &quot;WARNING: Invalid code added here might break your website.&quot; Remove the code you added, click <strong>Save Changes</strong>, and publish again. Then add it back one piece at a time.</p>
+<h2>Good to know</h2>
+<ul>
+<li>Code in <strong>Head</strong> is added to every page of your site.</li>
+<li>For custom fonts, don't use custom code. Use <strong>Project Settings → Fonts</strong>. See <a href="../fonts/upload-custom-fonts.md">How to upload your own fonts</a>.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="animation-options.md">Which animation options does TeleportHQ have?</a></li>
+<li><a href="add-an-entrance-animation.md">How to animate an element when it scrolls into view</a></li>
+<li><a href="../styling/write-css-in-the-advanced-tab.md">How to write CSS directly (Advanced tab)</a></li>
+<li><a href="../../code/custom-code/add-custom-code-to-your-site.md">How to add code to every page (head and body)</a></li>
+<li><a href="../css-classes/edit-a-css-class.md">How to edit a CSS class</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-generate-a-store.html

@@ -0,0 +1,78 @@
+<p>To generate an online store or web app with AI in TeleportHQ, click <strong>+ New Project</strong> and choose <strong>E-commerce</strong> or <strong>Web App</strong>. You describe your idea, pick colors and fonts, and answer a few quick questions. The AI then builds a complete store (products, cart, checkout, customer accounts and an admin panel) or an app with logins, a database and workflows.</p>
+<h2>Before you start</h2>
+<ul>
+<li><strong>The choice is permanent.</strong> A store or web app can't be turned back into a website, and its code can't be downloaded. You can still publish it from TeleportHQ. Not sure? Read <a href="../../getting-started/websites-vs-web-apps.md">What's the difference between a website and a web app?</a>.</li>
+<li><strong>A store or web app needs a Web App slot.</strong> Without one, it runs for 7 days. A trial includes 1 slot, and so does Premium. See <a href="../../web-apps/web-app-slots-and-the-7-day-window.md">Why does my web app need a slot, and what is the 7-day window?</a>.</li>
+<li><strong>It needs more AI tokens than a website.</strong> A web app or store needs at least 20,000 tokens to start. See <a href="../../plans-and-billing/ai-tokens/what-uses-ai-tokens.md">What uses AI tokens, and how much?</a>.</li>
+<li>A trial workspace can hold 1 project. See <a href="../../projects/project-limits.md">How many projects can I have?</a>.</li>
+</ul>
+<h2>Generate an online store</h2>
+<ol>
+<li>On your TeleportHQ dashboard, click <strong>+ New Project</strong>.</li>
+<li>Click the <strong>E-commerce</strong> card.</li>
+<li>On the <strong>Describe your store</strong> screen, describe what you sell and who buys it. For example: <code>A specialty coffee roaster selling single-origin beans, brewing gear and gift boxes to home baristas.</code> Then click <strong>Next</strong>.</li>
+<li>On the <strong>Colors &amp; Fonts</strong> step, click a color palette and a font pairing, then click <strong>Next</strong>. (Stores skip the design preferences step and use a light theme.)</li>
+<li>If <strong>A few fast questions</strong> appears, answer each question, then click <strong>Continue</strong>. See <a href="#answer-the-quick-questions">Answer the quick questions</a> below.</li>
+<li>On the <strong>Your products</strong> screen, choose <strong>Generate products for me</strong> or <strong>Upload my own products</strong>.</li>
+<li>Click <strong>Build my store</strong> (or <strong>Build store with {n} products</strong> if you uploaded a file).</li>
+</ol>
+<p><img src="screenshots/generate-a-store-or-web-app-with-ai-1.png" alt="The Your products screen with the Generate products for me and Upload my own products options"></p>
+<p>A checklist shows each part being set up: design system, authentication, e-commerce, products, admin panel. When it finishes, the editor opens and your store pages generate. The <strong>Your store is ready!</strong> window then asks how you want to accept payments. See <a href="../../ecommerce/store-setup/connect-stripe-or-paypal.md">How to accept payments with Stripe or PayPal</a>.</p>
+<p><strong>About the products options:</strong></p>
+<ul>
+<li><strong>Generate products for me</strong>: the AI writes a starter catalog from your description, with names, descriptions, prices, categories and images. You can edit or replace every product later.</li>
+<li><strong>Upload my own products</strong>: import a <code>.csv</code> or <code>.json</code> file. A Shopify export works as it is, including variants. The AI reads your columns and matches them to product fields. Nothing is invented. See <a href="../../ecommerce/products/import-products.md">How to import products from a file (including Shopify)</a>.</li>
+</ul>
+<h2>Generate a web app</h2>
+<ol>
+<li>On your TeleportHQ dashboard, click <strong>+ New Project</strong>.</li>
+<li>Click the <strong>Web App</strong> card.</li>
+<li>On the <strong>Business description</strong> screen, describe your app and who uses it. For example: <code>A booking app for a yoga studio. Members sign up, book classes, and see their upcoming bookings. Staff manage the class schedule.</code> Then click <strong>Next</strong>.</li>
+<li>On <strong>Design Preferences</strong>, choose <strong>Theme Mode</strong>, <strong>Animation Level</strong> and <strong>Page Layout</strong>, then click <strong>Next</strong>. Pick <strong>Dashboard</strong> layout for sidebar navigation, or keep <strong>Standard</strong> for top navigation.</li>
+<li>On the <strong>Colors &amp; Fonts</strong> step, click a color palette and a font pairing, then click <strong>Next</strong>.</li>
+<li>On <strong>A few fast questions</strong>, answer each question, then click <strong>Continue</strong>.</li>
+<li>Wait on the <strong>Designing your project</strong> screen. The editor opens and your pages start generating.</li>
+</ol>
+<h2>Answer the quick questions</h2>
+<p>For stores and web apps, TeleportHQ asks up to 10 short questions so the AI builds the right features, for example &quot;Should customers be able to book without an account?&quot;</p>
+<ol>
+<li>Read each question as it appears. It says <strong>Pick one</strong> or <strong>Multiple answers allowed</strong>.</li>
+<li>Click an answer. To give your own, click <strong>Write your own</strong> and type it (up to 500 characters).</li>
+<li>Not sure? Click <strong>Answer for me</strong>, or click <strong>Let AI answer all</strong> at the bottom.</li>
+<li>To change an answer, click <strong>Edit</strong> on the collapsed question.</li>
+<li>When every question is answered, click <strong>Continue</strong>.</li>
+</ol>
+<p>You can change these answers later in <strong>AI Settings</strong> → <strong>Onboarding Q&amp;A</strong>. See <a href="../ai-tools/ai-settings.md">How to give the AI your business details and instructions (AI Settings)</a>.</p>
+<h2>Check that it worked</h2>
+<p>The TeleportHQ editor opens with a <strong>Generating</strong> panel that lists the pages being built. On a web app, up to 10 pages are built right away on a paid plan. On a store, the homepage and the store's content pages are built first. The rest of the planned pages appear in the <strong>Pages</strong> list with a <strong>Create</strong> button. See <a href="while-ai-builds-your-site.md">What happens while AI builds your site (and if it fails)</a>.</p>
+<h2>Troubleshooting</h2>
+<p><strong>&quot;A web app needs at least 20,000 tokens to generate. Add more tokens, or continue with a website.&quot;</strong>
+Your balance is below what a web app or store needs. Buy tokens in the <strong>Purchase Tokens</strong> window that opens, or generate a website instead. See <a href="../../plans-and-billing/ai-tokens/buy-ai-tokens.md">How to buy more AI tokens</a>.</p>
+<p><strong>&quot;{AI Stores|Web Apps} — coming soon&quot;</strong>
+Web apps and stores are not yet available on your account. The card shows the date they arrive. Click <strong>Got it</strong>.
+<strong>&quot;Your token balance does not cover this generation. You need about {X} more tokens. Add more tokens, or switch off web app features.&quot;</strong>
+The first wave of pages costs more than your balance. Add tokens and click <strong>Try again</strong>.</p>
+<p><strong>&quot;We couldn’t prepare your questions&quot;</strong>
+Click <strong>Try again</strong>, or click <strong>Continue without questions</strong>.</p>
+<p><strong>&quot;Please upload a .csv or .json file&quot;</strong>
+The products upload takes only CSV or JSON files. Export your products in one of these formats.</p>
+<p><strong>&quot;Could not activate the store features (authentication &amp; e-commerce). Please try again or contact support.&quot;</strong> or <strong>&quot;Failed to import design system. Please try again or contact support.&quot;</strong>
+Try again. If it keeps failing, contact support from the chat on this help center. See <a href="../../getting-started/get-help.md">How to get help</a>.</p>
+<p><strong>&quot;Your store is missing {features}. Nothing was generated — please try again or contact support.&quot;</strong>
+Nothing was built and no pages were created. Try again, or contact support.</p>
+<h2>Good to know</h2>
+<ul>
+<li>If the AI couldn't decide on some answers, you see &quot;Picked defaults for {n} question(s) where the AI could not decide. You can change them later.&quot;</li>
+<li>The <strong>Dashboard</strong> page layout currently gives lower-quality results than <strong>Standard</strong>. Plan for extra polish after generation.</li>
+<li>If your balance can no longer cover a web app when you reach <strong>Design Preferences</strong>, TeleportHQ switches the project back to a website and shows the token message.</li>
+<li>Uploaded products replace AI products. You can't mix both in the setup; add more products later from the <strong>E-Commerce</strong> panel.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="generate-a-website-with-ai.md">How to generate a website with AI</a></li>
+<li><a href="../../getting-started/websites-vs-web-apps.md">What's the difference between a website and a web app?</a></li>
+<li><a href="../../web-apps/web-app-slots-and-the-7-day-window.md">Why does my web app need a slot, and what is the 7-day window?</a></li>
+<li><a href="../../ecommerce/store-setup/create-an-online-store.md">How to create an online store with TeleportHQ</a></li>
+<li><a href="../../ecommerce/store-setup/connect-stripe-or-paypal.md">How to accept payments with Stripe or PayPal</a></li>
+<li><a href="while-ai-builds-your-site.md">What happens while AI builds your site (and if it fails)</a></li>
+</ul>