feat: updated docs and added player presets

.gitignore

@@ -45,3 +45,5 @@ apps/www/public/r/*
 apps/www/registry.json
 apps/www/registry-pro.json
 apps/www/registry/__index__.tsx
+
+.claude

apps/www/app/docs/[[...slug]]/page.tsx

@@ -46,7 +46,7 @@ export default async function Page(props: {
     <DocsPage full={page.data.full} toc={page.data.toc}>
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
-      <div className="flex flex-row flex-wrap items-center gap-2 border-b pb-6">
+      <div className="flex flex-row flex-wrap items-center gap-2 pb-6">
         <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
         <ViewOptions
           githubUrl={`https://github.com/winoffrg/limeplay/blob/main/apps/www/content/docs/${page.path}`}

apps/www/app/llms.mdx/[...slug]/route.ts

@@ -9,24 +9,23 @@ export const revalidate = false
 export function generateStaticParams() {
   const routes = source.generateParams()
 
-  return routes
-    .map((route) => {
-      const slug = [...route.slug]
-      if (slug.length > 0) {
-        slug[slug.length - 1] = `${slug[slug.length - 1]}.mdx`
-      }
-      return { slug }
-    })
+  return routes.map((route) => {
+    const slug = [...route.slug]
+    if (slug.length > 0) {
+      slug[slug.length - 1] = `${slug[slug.length - 1]}.mdx`
+    }
+    return { slug }
+  })
 }
 
 export async function GET(
   _req: NextRequest,
   { params }: { params: Promise<{ slug: string[] }> }
 ) {
   const slug = (await params).slug
-  const pageSlug = slug.map((segment: string, index: number) => 
-    index === slug.length - 1 && segment.endsWith('.mdx') 
-      ? segment.slice(0, -4) 
+  const pageSlug = slug.map((segment: string, index: number) =>
+    index === slug.length - 1 && segment.endsWith(".mdx")
+      ? segment.slice(0, -4)
       : segment
   )
   const page = source.getPage(pageSlug)
@@ -53,4 +52,4 @@ Error: EISDIR: illegal operation on a directory, copyfile '/Users/X/Documents/Pe
   dest: '/Users/X/Documents/Personal/Github/limeplay/apps/www/out/llms.mdx/hooks'
 }
 error: script "build" exited with code 1
- */
+ */

apps/www/components/codeblock.tsx

@@ -90,8 +90,8 @@ export function CodeBlock({
       ref={ref}
       {...props}
       className={cn(
-        isTab ? [bg, "rounded-lg shadow-sm"] : "my-4 rounded-xl bg-card p-1",
-        "shiki not-prose relative overflow-hidden border text-sm outline-none",
+        isTab ? [bg, "rounded-lg"] : "bg-card p-1",
+        "shiki not-prose relative overflow-hidden text-sm outline-none",
         props.className
       )}
     >

apps/www/components/component-preview-control.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { motion } from "motion/react"
+import { AnimatePresence, motion } from "motion/react"
 import * as React from "react"
 
 import { Tabs, TabsList } from "@/components/ui/tabs"
@@ -11,14 +11,17 @@ interface ComponentPreviewControlProps {
   children: React.ReactNode
   className?: string
   hideCode?: boolean
+  trailingSlot?: React.ReactNode
 }
 
 export function ComponentPreviewControl({
   children,
   className,
   hideCode = false,
+  trailingSlot,
 }: ComponentPreviewControlProps) {
   const [activeTab, setActiveTab] = React.useState("preview")
+  const childArray = React.Children.toArray(children)
 
   return (
     <Tabs
@@ -70,8 +73,25 @@ export function ComponentPreviewControl({
             ))}
           </TabsList>
         )}
+        {trailingSlot ? (
+          <div className="flex items-center gap-1.5">{trailingSlot}</div>
+        ) : null}
+      </div>
+      <div className="overflow-hidden">
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: activeTab === "preview" ? 50 : -50 }}
+            initial={{ opacity: 0, x: activeTab === "preview" ? -50 : 50 }}
+            transition={{
+              duration: 0.35,
+              ease: [0.32, 0.72, 0, 1],
+            }}
+          >
+            {childArray}
+          </motion.div>
+        </AnimatePresence>
       </div>
-      {children}
     </Tabs>
   )
 }

apps/www/components/component-preview.tsx

@@ -43,57 +43,66 @@ export async function ComponentPreview({
   const filePath = path.join(Component?.files?.[0]?.path)
   const fileContent = await fs.promises.readFile(filePath, "utf-8")
   const fileName = path.basename(filePath)
-  const PreviewComponent = withPlayer ? PlayerLayoutDemo : React.Fragment
 
   const rendered = await highlight(fileContent, {
     components: {
       pre: (props) => <Pre {...props} />,
     },
     lang: "tsx",
-    themes: {
-      dark: "min-dark",
-      light: "github-light",
-    },
   })
 
   return (
     <div
       className={cn("group relative my-4 mb-12 flex flex-col space-y-2")}
       {...props}
     >
-      <ComponentPreviewControl
-        className="relative mr-auto w-full rounded-none"
-        hideCode={hideCode}
-      >
-        <TabsContent
-          className={`
-            relative hidden
-            data-[state=active]:block
-          `}
-          forceMount
-          value="preview"
-        >
-          <div className={className}>
-            <PreviewComponent
-              blockChildren={blockChildren}
-              overlayChildren={overlayChildren}
-              type={type}
+      {withPlayer ? (
+        <PlayerLayoutDemo
+          blockChildren={blockChildren}
+          codeSlot={
+            <CustomCodeBlock
+              data-line-numbers
+              data-line-numbers-start={1}
+              title={fileName}
+              {...props}
             >
-              <PreviewTabComponent componentName={name} />
-            </PreviewComponent>
-          </div>
-        </TabsContent>
-        <TabsContent value="code">
-          <CustomCodeBlock
-            data-line-numbers
-            data-line-numbers-start={1}
-            title={fileName}
-            {...props}
+              {rendered}
+            </CustomCodeBlock>
+          }
+          overlayChildren={overlayChildren}
+          type={type}
+        >
+          <PreviewTabComponent componentName={name} />
+        </PlayerLayoutDemo>
+      ) : (
+        <ComponentPreviewControl
+          className="relative mr-auto w-full rounded-none"
+          hideCode={hideCode}
+        >
+          <TabsContent
+            className={`
+              relative hidden
+              data-[state=active]:block
+            `}
+            forceMount
+            value="preview"
           >
-            {rendered}
-          </CustomCodeBlock>
-        </TabsContent>
-      </ComponentPreviewControl>
+            <div className={className}>
+              <PreviewTabComponent componentName={name} />
+            </div>
+          </TabsContent>
+          <TabsContent className="dark" value="code">
+            <CustomCodeBlock
+              data-line-numbers
+              data-line-numbers-start={1}
+              title={fileName}
+              {...props}
+            >
+              {rendered}
+            </CustomCodeBlock>
+          </TabsContent>
+        </ComponentPreviewControl>
+      )}
     </div>
   )
 }