Update project structure and UI components with debug mode and minor …

…refinements

CHANGELOG.md

@@ -1,5 +1,11 @@
 # vision-pro-ui
 
+## 1.3.1
+
+### Patch Changes
+
+- Update project structure and UI components with debug mode and minor refinements
+
 ## 1.3.0
 
 ### Minor Changes

README.md

@@ -8,14 +8,7 @@ Vision UI is a collection of components that follow the VisionOS design language
 
 It uses most of the components from [shadcn/ui](https://ui.shadcn.com/) for the underlying components with others using [radix-ui](https://www.radix-ui.com/).
 
-![Demo](https://github.com/user-attachments/assets/663b0285-5567-4526-b4ef-89ba8c74a3dd)
-
-## Is this for production?
-
-No, while the components are built with extreme attention to detail, it is not meant to be used in production.
-Think of this as a playground for playing with VisionOS design language on the web.
-
-However, you are more than welcome to use this for your own projects.
+[![Demo Video](https://img.youtube.com/vi/1tywYTXi0T4/0.jpg)](https://youtu.be/1tywYTXi0T4)
 
 ## How to use
 
@@ -31,4 +24,4 @@ Then `copy/paste` the component you want to use into your project.
 
 ---
 
-The site is powered by [FumaDocs](https://fumadocs.vercel.app/)
+The Documentation is powered by [FumaDocs](https://fumadocs.vercel.app/)

app/(landing)/constants.ts

@@ -1,7 +1,7 @@
 import { WindowProps } from "@/components/core/window";
 
 export const defaultWindowClassName =
-  "h-[max(768px,70vh)] min-h-[400px] w-[calc(min(85vw,1024px))]";
+  "h-[min(768px,70vh)] min-h-[400px] w-[calc(min(85vw,1024px))]";
 export const defaultWindowProps: Partial<WindowProps> = {
   scroll: true,
   initial: {

app/(landing)/home-view.tsx

@@ -88,37 +88,20 @@ const items: HoneycombItem[] = [
     ),
     href: "https://fumadocs.vercel.app/",
   },
-  // ...Array.from({ length: 20 }, (_, i) => ({
-  //   id: `test-${i}`,
-  //   label: `Test ${i}`,
-  //   background: <div className="h-full w-full bg-[#333333]"></div>,
-  //   icon: (
-  //     <Image
-  //       src={settingsIcon}
-  //       alt="Settings"
-  //       fill
-  //       className={honeycombIconClassName}
-  //     />
-  //   ),
-  // })),
-  // {
-  //   id: "mail",
-  //   label: "Mail",
-  //   background: <div className="h-full w-full"></div>,
-  //   icon: <div className="bg-blue-500"></div>,
-  // },
-  // {
-  //   id: "messages",
-  //   label: "Messages",
-  //   background: <div className="h-full w-full"></div>,
-  //   icon: <div className="bg-blue-500"></div>,
-  // },
-  // {
-  //   id: "maps",
-  //   label: "Maps",
-  //   background: <div className="h-full w-full"></div>,
-  //   icon: <div className="bg-blue-500"></div>,
-  // },
+  ...Array.from({ length: 25 }, (_, i) => ({
+    id: `test-${i}`,
+    label: `Test ${i}`,
+    background: <div className="h-full w-full bg-[#333333]"></div>,
+    icon: (
+      <Image
+        src={settingsIcon}
+        alt="Settings"
+        fill
+        className={honeycombIconClassName}
+      />
+    ),
+    debug: true,
+  })),
 ];
 
 function HomeView() {

app/(landing)/settings/debug-mode-switch.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Switch } from "@/components/core/switch";
+import { debugModeAtom } from "@/lib/atoms";
+import { useAtom } from "jotai";
+
+export function DebugModeSwitch() {
+  const [debugMode, setDebugMode] = useAtom(debugModeAtom);
+
+  return <Switch checked={debugMode} onCheckedChange={setDebugMode} />;
+}

app/(landing)/settings/layout.tsx

@@ -1,6 +1,7 @@
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
@@ -25,6 +26,8 @@ import {
 } from "@tabler/icons-react";
 import { Window } from "@/components/core/window";
 import { defaultWindowProps } from "../constants";
+import { DebugModeSwitch } from "./debug-mode-switch";
+import { Text } from "@/components/ui/typography";
 
 const section_1 = [
   {
@@ -95,7 +98,7 @@ export default function SettingsLayout({
                         <item.icon data-slot="icon" />
                         <span
                           className={cn(
-                            "absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
+                            "absolute top-2 left-3.5 z-[-1] size-8 rounded-full",
                             "bg-gradient-to-b",
                             item.gradient,
                           )}
@@ -116,7 +119,7 @@ export default function SettingsLayout({
                         <item.icon data-slot="icon" />
                         <span
                           className={cn(
-                            "absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
+                            "absolute top-2 left-3.5 z-[-1] size-8 rounded-full",
                             "bg-gradient-to-b",
                             item.gradient,
                           )}
@@ -129,6 +132,16 @@ export default function SettingsLayout({
               </SidebarGroupContent>
             </SidebarGroup>
           </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem className="gap- flex items-center justify-between p-2">
+                <Text variant="secondary" size="callout">
+                  Debug Mode
+                </Text>
+                <DebugModeSwitch />
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
         </Sidebar>
         <main className="relative w-full">{children}</main>
       </SidebarProvider>

app/global.css

@@ -2,6 +2,7 @@
 
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
+@import "./vision-pro-ui.css";
 
 /* relative to the CSS file, make sure it's correct for your app */
 @source "../node_modules/fumadocs-ui/dist/**/*.js";
@@ -122,4 +123,4 @@
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
-}
+}

app/layout.tsx

@@ -1,5 +1,4 @@
 import "./global.css";
-import "@/app/vision-pro-ui.css";
 
 import { RootProvider } from "fumadocs-ui/provider";
 import { Metadata } from "next";

app/vision-pro-ui.css

@@ -1,10 +1,7 @@
 [data-vision-os-ui],
 [data-vision-os-ui] * {
   font-family: "SF Pro", "Inter", sans-serif;
-}
-
-[data-vision-os-ui] a {
-  display: inline-block;
+  cursor: none !important;
 }
 
 [data-vision-os-ui] .hide-scrollbar {
@@ -19,7 +16,3 @@
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
 }
-
-[data-vision-os-ui] * {
-  cursor: none !important;
-}

components/core/grid-layout.tsx

@@ -7,7 +7,6 @@ import React, {
   useRef,
   useState,
   ReactNode,
-  useId,
 } from "react";
 import {
   animate,
@@ -25,7 +24,7 @@ import { cn } from "@/lib/utils";
 import useWindowSize from "@/hooks/use-window-size";
 import { useIsMounted } from "@/hooks/use-is-mounted";
 import { useRouter } from "next/navigation";
-import { debugModeAtom } from "@/app/(landing)/atoms";
+import { debugModeAtom } from "@/lib/atoms";
 
 // ------------------------------------------------------------------
 // 1. CONTEXT SETUP
@@ -87,6 +86,7 @@ export interface HoneycombItem {
   icon: React.ReactNode;
   background?: React.ReactNode;
   href?: string;
+  debug?: boolean;
 }
 
 interface HoneycombLayoutProps {
@@ -220,7 +220,7 @@ export function HoneycombLayout({ items }: HoneycombLayoutProps) {
           ...DEBUG_CLASSNAMES,
           "outline-yellow-500",
           "after:content-[attr(data-debug)]",
-          "after:absolute after:left-0 after:top-0 after:z-40",
+          "after:absolute after:top-0 after:left-0 after:z-40",
           "after:bg-yellow-500 after:p-2 after:text-xs after:text-yellow-900",
         ],
       )}
@@ -244,7 +244,7 @@ export function HoneycombLayout({ items }: HoneycombLayoutProps) {
             ...DEBUG_CLASSNAMES,
             "outline-sky-500",
             "after:content-[attr(data-debug)]",
-            "after:absolute after:left-0 after:top-[2rem] after:z-[41]",
+            "after:absolute after:top-[2rem] after:left-0 after:z-[41]",
             "after:bg-sky-500 after:p-2 after:text-xs after:text-sky-950",
           ],
         )}
@@ -349,7 +349,7 @@ function PageContent({
           ...DEBUG_CLASSNAMES,
           "outline-green-500",
           "after:content-[attr(data-debug)]",
-          "after:absolute after:left-0 after:top-[-2rem]",
+          "after:absolute after:top-[-2rem] after:left-0",
           "after:bg-green-500 after:p-2 after:text-xs after:text-green-900",
         ],
       )}
@@ -362,7 +362,9 @@ function PageContent({
         }}
       >
         {pageItems.map((item, i) => {
-          // Row-col math. (Same as your original code)
+          // If debug is false and the item has debug set to true, don't render
+          if (item.debug && !debug) return null;
+          // Row-col math
           let row: number;
           let col: number;
           if (i < maxCols) {
@@ -460,7 +462,6 @@ function HoneycombCell({
     setAnimateOverwrite,
   } = useHoneycombContext();
 
-  const id = useId();
   const router = useRouter();
 
   const [isMouseDown, setIsMouseDown] = useState(false);
@@ -596,7 +597,7 @@ function HoneycombCell({
         >
           <div className="relative h-full w-full overflow-hidden rounded-full">
             {debug && (
-              <span className="absolute inset-0 flex h-full w-full items-center justify-center rounded-full bg-black/50 text-center font-mono text-xs font-light tabular-nums text-white/85">
+              <span className="absolute inset-0 flex h-full w-full items-center justify-center rounded-full bg-black/50 text-center font-mono text-xs font-light text-white/85 tabular-nums">
                 {Math.round(cellX)},{Math.round(cellY)}
                 <br />
                 row:{row} col:{col}

components/core/switch.tsx

@@ -1,29 +1,29 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      "peer focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-white/20",
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };

content/docs/index.mdx

@@ -16,13 +16,6 @@ Vision UI is a collection of components that follow the VisionOS design language
 
 It uses most of the components from [shadcn/ui](https://ui.shadcn.com/) for the underlying components with others using [radix-ui](https://www.radix-ui.com/).
 
-## Is this for production?
-
-No, while the components are built with extreme attention to detail, it is not meant to be used in production.
-This is a playground for playing with VisionOS design language.
-
-However, you are more than welcome to use this for your own projects.
-
 ## How to use
 
 This project assumes you already have `shadcn/ui` configured in your project.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vision-pro-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "build": "next build",
     "dev": "next dev -p 3080",