Update docs for latest features

adeira-source-id: 54e37b305202bf3ad20495380dd37383efc8e85e

apps/docs/components/pricing.tsx

@@ -34,7 +34,7 @@ function PricingPanel({
           "relative bg-neutral-950 before:absolute before:-inset-2 before:-z-10 before:rounded-2xl before:bg-blue-400 lg:mt-0",
       ])}
     >
-      <h2 className="mt-2 text-center text-3xl font-bold text-neutral-200">
+      <h2 className="mt-6 text-center text-3xl font-bold text-neutral-200">
         {name}
       </h2>
 
@@ -66,7 +66,7 @@ export function Pricing() {
         cta={
           <>
             <Link
-              className="block rounded border border-neutral-800 py-2 text-center font-semibold text-neutral-300"
+              className="block rounded border border-neutral-800 py-2 text-center font-medium text-neutral-300"
               href="https://github.com/sponsors/itsdouges/sponsorships?sponsor=itsdouges&preview=true&frequency=recurring&amount=19"
             >
               Sponsor Development
@@ -79,7 +79,7 @@ export function Pricing() {
             </div>
           </>
         }
-        description="The bare essentials for individuals."
+        description="The essentials for individuals and open source projects."
         name="Free"
         perMonthLabel="per month, forever"
         price={[0]}
@@ -105,7 +105,7 @@ export function Pricing() {
           </li>
           <li>
             <DetailsSummary
-              details="Create support tickets through GitHub."
+              details="Create support tickets through GitHub and Discord."
               summary="Web-based support"
             />
           </li>
@@ -114,7 +114,7 @@ export function Pricing() {
       <PricingPanel
         cta={
           <Link
-            className="block rounded bg-blue-400 py-2 text-center font-bold text-neutral-800"
+            className="block rounded bg-blue-400 py-2 text-center font-medium text-neutral-800"
             href="mailto:[email protected]"
           >
             Contact Us
@@ -150,7 +150,7 @@ function DetailsSummary({
 }) {
   return (
     <details className="group">
-      <summary className="flex cursor-pointer list-none items-center gap-4 font-semibold text-neutral-300">
+      <summary className="flex cursor-pointer list-none items-center gap-4 font-medium text-neutral-300">
         <ChevronRightIcon className="group-open:rotate-90" /> {summary}
       </summary>
       <p className="mt-1 pl-8 text-neutral-300">{details}</p>

apps/docs/nextra-triplex/mdx.tsx

@@ -184,12 +184,12 @@ export const components: Components = {
     <table className="mt-5 w-full table-fixed">{children}</table>
   ),
   td: ({ children }) => (
-    <td className="border-t border-neutral-800 p-2 text-neutral-300">
+    <td className="border-b border-neutral-800 p-2 text-neutral-300">
       {children}
     </td>
   ),
   th: ({ children }) => (
-    <th className="py-2.5 text-center font-medium text-neutral-200">
+    <th className="border-b border-neutral-800 py-2.5 text-center font-medium text-neutral-200">
       {children}
     </th>
   ),

apps/docs/pages/blog/triplex-for-vscode.mdx

@@ -1,6 +1,6 @@
 ---
-date: 2024-11-30
+date: 2025-02-01
 author: Michael Dougall
-title: Triplex for VS Code Is Now Available
+title: Triplex for VS Code Is Generally Available
 description: After months of development and hundreds of testers we're excited to announce the release of Triplex for VS Code.
 ---

apps/docs/pages/docs/api-reference/cli/create-triplex-project.mdx

@@ -1,9 +1,9 @@
 ---
 title: create-triplex-project
-description: The create-triplex-project CLI is the fastest way to start developing your next scene.
+description: The create-triplex-project CLI is the fastest way to start building your next scene.
 ---
 
-The `create-triplex-project` CLI bootstraps a new project for you using [official templates](/docs/get-started/starting-a-project/create-from-template). It's the fastest way to get started developing your next scene.
+The `create-triplex-project` CLI bootstraps a new project for you using [official templates](/docs/get-started/starting-a-project/create-from-template). It's the fastest way to get started building your next scene.
 
 ## Usage
 

apps/docs/pages/docs/api-reference/config-options.mdx

@@ -3,7 +3,7 @@ title: config.json Options
 description: Options change the behavior of Triplex.
 ---
 
-Configuration is is located in the .triplex folder from the root of your project and is optional.
+Configuration is is located in the `.triplex` folder from the root of your project and is optional.
 
 When you need to create one you can run the following commands in your terminal.
 

apps/docs/pages/docs/api-reference/config-options/_meta.json

@@ -4,6 +4,5 @@
   "components": "",
   "public-dir": "",
   "assets-dir": "",
-  "define": "",
-  "renderer-attributes": ""
+  "define": ""
 }

apps/docs/pages/docs/api-reference/prop-tags.mdx

@@ -2,13 +2,20 @@
 description: Prop tags change the behavior of prop controls.
 ---
 
-Prop tags only change the behavior of controls inside Triplex.
+Prop tags change the behavior of controls inside Triplex.
 
-## `number`
+## `@group`
 
-Props that are typed as a number can have their behavior changed by using the following tags.
+Groups the prop in the named group when viewed inside Triplex.
 
-### `@step`
+```tsx {2}
+interface Props {
+  /** @group Accessibility */
+  label: number;
+}
+```
+
+## `@step`
 
 Changes the step amount when using the number increment/decrement buttons.
 
@@ -19,7 +26,9 @@ interface Props {
 }
 ```
 
-### `@min`
+Supported on prop types: `number`.
+
+## `@min`
 
 Sets the minimum value for the number control.
 
@@ -30,7 +39,9 @@ interface Props {
 }
 ```
 
-### `@max`
+Supported on prop types: `number`.
+
+## `@max`
 
 Sets the maximum value for the number control.
 
@@ -40,3 +51,5 @@ interface Props {
   value: number;
 }
 ```
+
+Supported on prop types: `number`.

apps/docs/pages/docs/api-reference/props.mdx

@@ -4,7 +4,7 @@ description: Props are given to components to change their behavior and are repr
 
 import { SwitchIcon } from "@radix-ui/react-icons";
 
-Props declared on a React component are represented inside the Context Area as controls that can have their values changed and saved back to source code.
+Props declared on a React component are shown as controls inside the Context Area that can have their values changed and saved back to source code.
 
 ## Literal Types
 

apps/docs/pages/docs/building-your-scene.mdx

@@ -4,4 +4,4 @@ description: Learn the different ways you can build with Triplex.
 
 From visually editing your scene to code-first development Triplex is designed to support your workflow every step of the way.
 
-The following guides are ordered from ones to get you started through to more advanced ones you'll need as you grow. If you're new to Triplex or React we recommend reading the guides under [Components](/docs/building-your-scene/components) and [Scene](/docs/building-your-scene/scene) first.
+The following guides are ordered from ones to get you started through to more advanced ones you'll need as you grow with Triplex. If you're new to Triplex or React we recommend reading the guides under [Components](/docs/building-your-scene/components) and [Scene](/docs/building-your-scene/scene) first.

apps/docs/pages/docs/building-your-scene/_meta.json

@@ -3,5 +3,5 @@
   "scene": "",
   "global-provider": "",
   "console-logs": "",
-  "learn-the-ui": "Learn the UI"
+  "ui-glossary": "Learn the UI"
 }

apps/docs/pages/docs/building-your-scene/components.mdx

@@ -2,7 +2,7 @@
 description: Learn how components are the foundation of Triplex.
 ---
 
-Components are the [building blocks of the React ecosystem](https://react.dev/learn/your-first-component) and the primary way to build out your scene. React Three Fiber saw an explosion of ecosystem growth thanks to components / [Drei](https://github.com/pmndrs/drei) so embracing this model in Triplex was foundational.
+Components are the [building blocks of the React ecosystem](https://react.dev/learn/your-first-component) and the primary way to build out your scene. Embracing this model in Triplex is foundational and has guided a lot of the underlying architecture.
 
 ## Next Steps
 

apps/docs/pages/docs/building-your-scene/components/code-first.mdx

@@ -7,34 +7,34 @@ Not all scenes and behavior can be created visually either for technical or tast
 
 ## Two-Way Sync
 
-Triplex doesn't just save your changes back to source, it's also immediately synchronized from changes made to your source files outside of Triplex. This enables you to iterate in code and see the results in the Scene, and if using [Triplex for VS Code](/docs/get-started/vscode) you don't even have to leave your IDE.
+Triplex doesn't just save your changes back to source, it's also immediately synchronized from changes made to your source files outside of Triplex. This enables you to iterate in code and see the results in the Scene, and if you're using [Triplex for VS Code](/docs/get-started/vscode) you don't even have to leave your IDE!
 
 <KnowledgeCallout>
   Using Triplex as a code-first workflow feels very similar to using
   [Storybook](https://storybook.js.org/) but with the added benefit of its
-  productivity features and dependencies being handled for you.
+  inspection / productivity features and dependencies being handled for you.
 </KnowledgeCallout>
 
-## World-Class Dev Environment
+## The Ecosystem Bundler
 
-Triplex runs your scene using [Vite](https://vite.dev/) a popular build tool for the web, along with enabling productivity features like [Hot Module Replacement](https://vitejs.dev/guide/features.html#hot-module-replacement) and [React Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+Triplex runs your code using [Vite](https://vite.dev/) a popular build tool for the web, along with out-of-the-box features like [Hot Module Replacement](https://vitejs.dev/guide/features.html#hot-module-replacement) and [React Fast Refresh](https://reactnative.dev/docs/fast-refresh).
 
-This means you get a fast, responsive local development environment without having to do work to get it set up.
+This means you get a fast, responsive development environment without having to do the work to get it set up, nor maintain it over time.
 
 ## Managed Dependencies
 
-Unlike traditional development tools Triplex isn't installed into your repository but instead as a [standalone app](/docs/get-started/standalone) and VS Code extension. This means you don't have to worry about managing dependencies and you can use the latest features without waiting for your team to upgrade.
+Unlike traditional development tools installed through node modules, Triplex isn't installed into your repository but instead is a [standalone app](/docs/get-started/standalone) and [VS Code extension](/docs/get-started-vscode). This means you don't have to worry about managing dependencies and you can use the latest features without waiting for your team or repository to upgrade.
 
 Here are common scenarios that are no longer an issue:
 
-- Duplicate dependencies causing errors
+- Duplicate dependencies causing unexpected errors
 - Dependency bloat causing install times to increase
-- Upgrade pain from upgrading between major versions
+- Upgrade friction/pain from upgrading through major versions
 - Transitive dependency versions blocking upgrades
 - Dependencies needing interventions because of security violations
 
 <KnowledgeCallout>
-  While Triplex manages dependencies for you it still uses your projects
-  dependencies where appropriate. Anything you import along with environment
-  dependencies such as `react` and `react-dom` are sourced from your project.
+  While Triplex manages its own dependencies it still uses your dependencies
+  where appropriate. Anything you import along with environment dependencies
+  such as `react` and `react-dom` are sourced from your project.
 </KnowledgeCallout>

apps/docs/pages/docs/building-your-scene/components/component-controls.mdx

@@ -4,13 +4,13 @@ description: Learn how to change the props your component is given during develo
 
 import { EraserIcon, Pencil2Icon } from "@radix-ui/react-icons";
 
-Seeing how your component behaves when given different props is a key part of developing with Triplex. With Component Controls the props of the open component can be changed at any time by clicking the <ActionLink icon={Pencil2Icon} href="/docs/building-your-scene/learn-the-ui/scene-panel#openclose-component-controls" name="Component Controls" /> action in the Scene Panel.
+Seeing how your component behaves when given different props is a key part of building with Triplex. With Component Controls the props of the open component can be changed at any time by clicking the <ActionLink icon={Pencil2Icon} href="/docs/building-your-scene/learn-the-ui/scene-panel#openclose-component-controls" name="Component Controls" /> action in the Scene Panel.
 
 ## Making Changes
 
 With Component Controls open you can change the value of props through the UI. The behavior is the same as [Editing Props](/docs/building-your-scene/components/editing-props) with one difference — changes are only temporary for the current session.
 
-For more advanced and specific scenarios we recommend creating example components with props needed for testing.
+For more advanced and specific scenarios we recommend creating example components with props needed.
 
 ## Resetting Changes
 
@@ -29,4 +29,4 @@ export function Component({ x = 10 }: { x: number });
 
 Writing code with [Leva](https://github.com/pmndrs/leva) is a common way to have your component be configurable during development. With Component Controls you're able to decide if you want to maintain that code or not.
 
-See the [Replacing Leva With Component Props](http://localhost:3000/guides/use-leva-with-triplex) guide for how to go about it.
+See the [Replacing Leva With Component Props](http://localhost:3000/guides/use-leva-with-triplex) guide for how to use Triplex like Leva.

apps/docs/pages/docs/building-your-scene/components/editing-props.mdx

@@ -4,13 +4,15 @@ description: Learn how your component props can be edited through the UI.
 
 import { ExclamationTriangleIcon, SwitchIcon } from "@radix-ui/react-icons";
 
-Your component props can be inspected and edited thanks to [TypeScript](https://www.typescriptlang.org/), even if your project isn't using it.
+Your component props can be inspected and edited thanks to [TypeScript](https://www.typescriptlang.org/), even if your project isn't directly using it.
 
 When an element is selected its props are displayed in the Context Area.
 
 ## Making Changes
 
-For a given prop find it in the Context Area and change its value. When blurring away from the input the change will be applied and ready to save. Once you've made all the changes you want make sure to save it back to source using the <ActionLink icon="⌘ + S" href="/docs/building-your-scene/learn-the-ui/other#save" name="Save" /> action.
+For a given prop find it in the Context Area and change its value. When blurring away from the input the change will be applied and ready to save.
+
+Once you've made all the changes you want make sure to save it back to source using the <ActionLink icon="⌘ + S" href="/docs/building-your-scene/learn-the-ui/other#save" name="Save" /> action.
 
 Props with an _italic label_ means that they have a description available. Hover over the label to see the description.
 
@@ -45,19 +47,19 @@ export function Component({}: { value: number | string | boolean });
 
 Default props are respected by the editor controls. If a prop has no value set the default value will be used.
 
-Given the following component declaration when the component is rendered with no props the isVisible prop will appear checked in the UI.
+Given the following component declaration when the component is rendered with no props the `isVisible` prop will appear checked in the UI.
 
 ```tsx /isVisible = true/
 export function Component({ isVisible = true }: { isVisible: boolean });
 ```
 
 ## Code-Controlled Props
 
-Props that have dynamic values are considered controlled by code and can't be edited through the UI. You'll see the <ActionLink name="Controlled By Code" icon={ExclamationTriangleIcon} href="/docs/building-your-scene/learn-the-ui/other#controlled-by-code" /> action next to it, interacting with it jumps you to its code declaration.
+Props that have dynamic values are considered controlled by code and can't be edited through the UI. You'll see the <ActionLink name="Controlled By Code" icon={ExclamationTriangleIcon} href="/docs/building-your-scene/learn-the-ui/other#controlled-by-code" /> action next to it, interacting with the control jumps you to its code declaration.
 
 ## Unsupported Props
 
-Some props just can't be edited through the UI. Sorry! You'll see the <ActionLink name="Unsupported Prop" icon={ExclamationTriangleIcon} href="/docs/building-your-scene/learn-the-ui/other#unsupported-prop" /> action next to it, interacting with it opens GitHub for you to create an issue to gauge community interest for adding support.
+Some props just can't be edited through the UI yet. You'll see the <ActionLink name="Unsupported Prop" icon={ExclamationTriangleIcon} href="/docs/building-your-scene/learn-the-ui/other#unsupported-prop" /> action next to it, interacting with it opens GitHub for you to create an issue to gauge community interest for adding support.
 
 ## Next Steps
 

apps/docs/pages/docs/building-your-scene/components/scene-panel.mdx

@@ -4,32 +4,43 @@ description: Learn how your component is represented in the Scene Panel.
 
 import { CaretDownIcon, CaretRightIcon } from "@radix-ui/react-icons";
 
-When opening a component in Triplex its elements are displayed in the Scene Panel. These elements can have their props inspected and edited through the [UI controls](/docs/building-your-scene/components/editing-props) and [Scene](/docs/building-your-scene/scene/transform-controls).
+When opening a component in Triplex its elements are displayed in the Scene Panel. These elements can have their props inspected and edited through [UI controls](/docs/building-your-scene/components/editing-props) and in the [Scene](/docs/building-your-scene/scene/transform-controls).
 
-Elements can be both host elements such as `mesh` and `group`, and custom components such as `YourPrefabComponent` and `PerspectiveCamera`. To tell them apart host elements always start with a lowercase letter where as custom components start with an uppercase letter.
+Elements can be both host elements such as `mesh` and `div`, and custom components such as `YourPrefabComponent` and `Button`.
+
+To tell them apart host elements always start with a lowercase letter where as custom components start with an uppercase letter.
 
 <KnowledgeCallout>
   If you find elements of the same name being hard to differentiate setting a
   `name` prop on them will be reflected in the Scene Panel.
 </KnowledgeCallout>
 
-## Inspecting Custom Components
+## Element Actions
+
+Each element has available actions you can perform on it:
 
-Clicking on the <ActionLink name="View Child Elements" href="/docs/building-your-scene/learn-the-ui/scene-panel#showhide-child-elements" icon={CaretRightIcon} /> action on a custom component will reveal that components elements. You're able to inspect and edit them just as you can elements owned by the open component.
+- Delete — <Kbd>Backspace</Kbd>
+- Duplicate — <Kbd>Cmd</Kbd> + <Kbd>D</Kbd>
+- Zoom To Element — <Kbd>F</Kbd>
+- Go To Declaration
+
+In Triplex for VS Code you can find these actions in the right-click menu on an element.
+
+## Inspecting Custom Components
 
-Editing the elements will modify that component in its file when saving.
+Clicking on the <ActionLink name="View Child Elements" href="/docs/building-your-scene/learn-the-ui/scene-panel#showhide-child-elements" icon={CaretRightIcon} /> action on a custom component will reveal its internally rendered elements. You're able to inspect and edit them just as you can elements owned by the open component.
 
 <KnowledgeCallout>
-  Custom components that are sourced from node modules cannot be inspected or
-  edited.
+  Custom components that are sourced from node modules can also be edited and
+  inspected.
 </KnowledgeCallout>
 
 ## Switching Between Components
 
 You can switch between the components declared in a file by using the <ActionLink name="Component Switcher" icon={CaretDownIcon} href="/docs/building-your-scene/learn-the-ui/scene-panel#component-switcher" /> at the top of the Scene Panel.
 
 <KnowledgeCallout>
-  Switching components will not lose any changes you've made. Triplex will keep
+  Switching components will not lose any changes you've made as Triplex keeps
   all the changes you've made until you save or close the file.
 </KnowledgeCallout>
 
@@ -58,8 +69,8 @@ The elements will be rendered in the Scene Panel as "box1 (mesh)" and "box2 (mes
 
 <KnowledgeCallout>
   Both host elements and custom components can be named, however the value
-  passed to the name prop must be a string literal for it to be reflected in the
-  Scene Panel.
+  passed to the name prop must be a static string literal for it to be reflected
+  in the Scene Panel.
 </KnowledgeCallout>
 
 ## Next Steps