rename the framework to @hanzo/gui and the loader to @hanzogui/loader

Both old names are owned by a different npm account (artemis-prime), so
publishing them returns 403 — which is how this surfaced: the 8.0.0 run
shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a
version that cannot be published and therefore does not exist. Those two
were uninstallable.

@hanzo/gui and @hanzogui/* are ours, so the framework now carries the name
it is imported by everywhere downstream, and the loader moves under the
scope we control.

The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')`
is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting
either would change behaviour, so both are untouched.

Co-authored-by: Hanzo Dev <[email protected]>

apps/demos/package.json

@@ -78,7 +78,7 @@
     "@hanzogui/dev-config": "workspace:*",
     "@hanzogui/theme": "workspace:*",
     "@hanzogui/toast": "workspace:*",
-    "hanzogui": "workspace:*"
+    "@hanzo/gui": "workspace:*"
   },
   "devDependencies": {
     "@hanzogui/build": "workspace:*",

apps/demos/src/AccordionDemo.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown } from '@hanzogui/lucide-icons-2'
-import { Accordion, Paragraph, Square } from 'hanzogui'
+import { Accordion, Paragraph, Square } from '@hanzo/gui'
 
 export function AccordionDemo() {
   return (

apps/demos/src/AddThemeDemo.tsx

@@ -1,7 +1,7 @@
 import { addTheme } from '@hanzogui/theme'
 import React from 'react'
 
-import { Button, H3, Theme, View, YStack } from 'hanzogui'
+import { Button, H3, Theme, View, YStack } from '@hanzo/gui'
 
 export function AddThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

apps/demos/src/AlertDialogDemo.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, Button, XStack, YStack } from 'hanzogui'
+import { AlertDialog, Button, XStack, YStack } from '@hanzo/gui'
 
 export function AlertDialogDemo() {
   return (

apps/demos/src/AnimationsDelayDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from 'hanzogui'
+import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from '@hanzo/gui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

apps/demos/src/AnimationsDemo.tsx

@@ -1,6 +1,6 @@
 import { LogoIcon } from '@hanzogui/logo'
 import { Play } from '@hanzogui/lucide-icons-2'
-import { Button, isWeb, Square, useControllableState, Image, useEvent } from 'hanzogui'
+import { Button, isWeb, Square, useControllableState, Image, useEvent } from '@hanzo/gui'
 
 export function AnimationsDemo(props) {
   const [positionI, setPositionI] = useControllableState({

apps/demos/src/AnimationsEnterDemo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { LogoIcon } from '@hanzogui/logo'
 
-import { Button, Square, YStack, isWeb } from 'hanzogui'
+import { Button, Square, YStack, isWeb } from '@hanzo/gui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

apps/demos/src/AnimationsHoverDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from 'hanzogui'
+import { Square } from '@hanzo/gui'
 
 export function AnimationsHoverDemo() {
   return (

apps/demos/src/AnimationsPresenceDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AnimatePresence } from '@hanzogui/animate-presence'
 import { ArrowLeft, ArrowRight } from '@hanzogui/lucide-icons-2'
 
-import { Button, Image, XStack, YStack, styled } from 'hanzogui'
+import { Button, Image, XStack, YStack, styled } from '@hanzo/gui'
 
 // @ts-ignore
 import photo1 from '../../public/photo1.jpg'

apps/demos/src/AnimationsTimingDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from 'hanzogui'
+import { Square } from '@hanzo/gui'
 
 export function AnimationsTimingDemo() {
   return (

apps/demos/src/AvatarDemo.tsx

@@ -1,4 +1,4 @@
-import { Avatar, XStack } from 'hanzogui'
+import { Avatar, XStack } from '@hanzo/gui'
 
 export function AvatarDemo() {
   return (

apps/demos/src/BoxShadowTokenDemo.tsx

@@ -1,4 +1,4 @@
-import { styled, View, Text, YStack } from 'hanzogui'
+import { styled, View, Text, YStack } from '@hanzo/gui'
 
 // styled() with boxShadow containing embedded $token
 // if web imports are picked up on native, this resolves to var(--shadowColor)

apps/demos/src/BuildAButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Drumstick, Hand } from '@hanzogui/lucide-icons-2'
-import type { ButtonProps, ThemeName } from 'hanzogui'
-import { Button, XStack, YStack } from 'hanzogui'
+import type { ButtonProps, ThemeName } from '@hanzo/gui'
+import { Button, XStack, YStack } from '@hanzo/gui'
 
 const outlined = {
   bg: 'transparent',

apps/demos/src/ButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@hanzogui/button'
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Theme, XGroup, XStack, YStack } from 'hanzogui'
+import { Theme, XGroup, XStack, YStack } from '@hanzo/gui'
 
 export function ButtonDemo() {
   return (

apps/demos/src/CardDemo.tsx

@@ -1,5 +1,5 @@
-import type { CardProps } from 'hanzogui'
-import { Button, Card, H2, Image, Paragraph, Theme, XStack } from 'hanzogui'
+import type { CardProps } from '@hanzo/gui'
+import { Button, Card, H2, Image, Paragraph, Theme, XStack } from '@hanzo/gui'
 
 export function CardDemo() {
   return (

apps/demos/src/CheckboxDemo.tsx

@@ -1,6 +1,6 @@
 import { Check as CheckIcon } from '@hanzogui/lucide-icons-2'
-import type { CheckboxProps } from 'hanzogui'
-import { Checkbox, Label, Theme, XStack, YStack } from 'hanzogui'
+import type { CheckboxProps } from '@hanzo/gui'
+import { Checkbox, Label, Theme, XStack, YStack } from '@hanzo/gui'
 
 export function CheckboxDemo() {
   return (

apps/demos/src/CheckboxHeadlessDemo.tsx

@@ -5,7 +5,7 @@ import { Check, Minus } from '@hanzogui/lucide-icons-2'
 
 import type { View } from 'react-native'
 import { Pressable } from 'react-native'
-import { Label, XStack, YStack } from 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 export function CheckboxHeadlessDemo() {
   return (

apps/demos/src/CheckboxUnstyledDemo.tsx

@@ -1,7 +1,7 @@
 import { createCheckbox } from '@hanzogui/checkbox'
 import { View, styled } from '@hanzogui/core'
 import { Check } from '@hanzogui/lucide-icons-2'
-import { Label, XStack, YStack } from 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 const Frame = styled(View, {
   borderWidth: 1,

apps/demos/src/ColorsDemo.tsx

@@ -10,7 +10,7 @@ import {
   yellow,
   yellowDark,
 } from '@hanzogui/colors'
-import { H2, Paragraph, Separator, Square, XStack, YStack } from 'hanzogui'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from '@hanzo/gui'
 
 const colorGroups = ['gray', 'blue', 'green', 'yellow', 'red'] as const
 

apps/demos/src/ContextMenuDemo.tsx

@@ -1,7 +1,7 @@
 import { ContextMenu } from '@hanzogui/context-menu'
 import { Calendar, Check, ChevronRight } from '@hanzogui/lucide-icons-2'
 import React from 'react'
-import { Text, View, YStack } from 'hanzogui'
+import { Text, View, YStack } from '@hanzo/gui'
 
 /**
  * Note: you'll want to use createMenu() to customize further.

apps/demos/src/DialogDemo.tsx

@@ -15,7 +15,7 @@ import {
   View,
   XGroup,
   XStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 import { SelectDemoContents } from './SelectDemo'
 
 type DialogMode = 'plain' | 'adapt' | 'keepMounted'

apps/demos/src/FormsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { SizeTokens } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
 import {
   Button,
   Form,
@@ -11,7 +11,7 @@ import {
   XGroup,
   Label,
   YStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 export function FormsDemo(props: { size: SizeTokens }) {
   const [status, setStatus] = React.useState<'off' | 'submitting' | 'submitted'>('off')

apps/demos/src/GroupDemo.tsx

@@ -1,5 +1,5 @@
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'hanzogui'
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui'
 
 export function GroupDemo() {
   return (

apps/demos/src/HeadingsDemo.tsx

@@ -1,4 +1,4 @@
-import { H1, H2, H3, H4, H5, H6, YStack } from 'hanzogui'
+import { H1, H2, H3, H4, H5, H6, YStack } from '@hanzo/gui'
 
 export function HeadingsDemo() {
   return (

apps/demos/src/InputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Button, Input, TextArea, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Button, Input, TextArea, XStack, YStack } from '@hanzo/gui'
 
 export function InputsDemo() {
   return (

apps/demos/src/LabelDemo.tsx

@@ -1,4 +1,4 @@
-import { Input, Label, Switch, XStack, YStack } from 'hanzogui'
+import { Input, Label, Switch, XStack, YStack } from '@hanzo/gui'
 
 export function LabelDemo() {
   return (

apps/demos/src/LinearGradientDemo.tsx

@@ -1,4 +1,4 @@
-import { XStack } from 'hanzogui'
+import { XStack } from '@hanzo/gui'
 import { LinearGradient } from '@hanzogui/linear-gradient'
 
 export function LinearGradientDemo() {

apps/demos/src/ListItemDemo.tsx

@@ -1,5 +1,5 @@
 import { ChevronRight, Cloud, Moon, Star, Sun } from '@hanzogui/lucide-icons-2'
-import { ListItem, Separator, Theme, XStack, YGroup } from 'hanzogui'
+import { ListItem, Separator, Theme, XStack, YGroup } from '@hanzo/gui'
 
 export function ListItemDemo() {
   return (

apps/demos/src/LucideIconsDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import * as LucideIcons from '@hanzogui/lucide-icons-2'
 
 import { ScrollView } from 'react-native'
-import { Input, Paragraph, Spacer, YStack, useDebounceValue } from 'hanzogui'
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from '@hanzo/gui'
 
 import { Grid } from './Grid'
 

apps/demos/src/MenuDemo.tsx

@@ -9,7 +9,7 @@ import {
 } from '@hanzogui/lucide-icons-2'
 import { Menu } from '@hanzogui/menu'
 import React from 'react'
-import { Button } from 'hanzogui'
+import { Button } from '@hanzo/gui'
 
 /**
  * Menu Demo using Gui Menu component.

apps/demos/src/NewInputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Button, Theme, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Button, Theme, XStack, YStack } from '@hanzo/gui'
 import { Input, TextArea } from '@hanzogui/input'
 
 export function NewInputsDemo() {

apps/demos/src/PopoverDemo.tsx

@@ -5,7 +5,7 @@ import {
   ChevronUp,
 } from '@hanzogui/lucide-icons-2'
 import { useState } from 'react'
-import type { PopoverProps } from 'hanzogui'
+import type { PopoverProps } from '@hanzo/gui'
 import {
   Adapt,
   Button,
@@ -17,7 +17,7 @@ import {
   styled,
   XStack,
   YStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 export function PopoverDemo() {
   const [shouldAdapt, setShouldAdapt] = useState(true)

apps/demos/src/ProgressDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from 'hanzogui'
+import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from '@hanzo/gui'
 import { Play, RotateCcw } from '@hanzogui/lucide-icons-2'
 
 export function ProgressDemo() {

apps/demos/src/RadioGroupDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Label, RadioGroup, Theme, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Label, RadioGroup, Theme, XStack, YStack } from '@hanzo/gui'
 
 export function RadioGroupDemo() {
   return (

apps/demos/src/RadioGroupHeadlessDemo.tsx

@@ -10,7 +10,7 @@ import {
 import { RovingFocusGroup } from '@hanzogui/roving-focus'
 import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { isWeb, useTheme } from 'hanzogui'
+import { isWeb, useTheme } from '@hanzo/gui'
 
 const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({

apps/demos/src/RadioGroupUnstyledDemo.tsx

@@ -1,4 +1,4 @@
-import { Label, XStack, YStack, styled } from 'hanzogui'
+import { Label, XStack, YStack, styled } from '@hanzo/gui'
 
 import { createRadioGroup } from '@hanzogui/radio-group'
 

apps/demos/src/ReplaceThemeDemo.tsx

@@ -9,7 +9,7 @@ import {
   YStack,
   useForceUpdate,
   useIsomorphicLayoutEffect,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 export function ReplaceThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

apps/demos/src/ScrollViewDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, ScrollView, Square, XStack } from 'hanzogui'
+import { Circle, ScrollView, Square, XStack } from '@hanzo/gui'
 
 export function ScrollViewDemo() {
   return (

apps/demos/src/SelectDemo.tsx

@@ -1,9 +1,9 @@
 import { Check, ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import React from 'react'
 
-import type { FontSizeTokens, SelectProps } from 'hanzogui'
-import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from 'hanzogui'
-import { LinearGradient } from 'hanzogui/linear-gradient'
+import type { FontSizeTokens, SelectProps } from '@hanzo/gui'
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from '@hanzo/gui'
+import { LinearGradient } from '@hanzo/gui/linear-gradient'
 
 export function SelectDemo() {
   return (

apps/demos/src/SeparatorDemo.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, Separator, XStack, YStack } from 'hanzogui'
+import { Paragraph, Separator, XStack, YStack } from '@hanzo/gui'
 
 export function SeparatorDemo() {
   return (

apps/demos/src/ShapesDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, Square, XStack } from 'hanzogui'
+import { Circle, Square, XStack } from '@hanzo/gui'
 
 export function ShapesDemo() {
   return (

apps/demos/src/SheetDemo.tsx

@@ -2,7 +2,7 @@ import { ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import type { SheetProps } from '@hanzogui/sheet'
 import { Sheet } from '@hanzogui/sheet'
 import React, { memo } from 'react'
-import { Button, H2, Input, Paragraph, XStack, YStack } from 'hanzogui'
+import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
 
 const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 

apps/demos/src/SliderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SliderProps } from 'hanzogui'
-import { Slider, Theme, XStack } from 'hanzogui'
+import type { SliderProps } from '@hanzo/gui'
+import { Slider, Theme, XStack } from '@hanzo/gui'
 
 export function SliderDemo() {
   return (

apps/demos/src/SpinnerDemo.tsx

@@ -1,4 +1,4 @@
-import { Spinner, YStack } from 'hanzogui'
+import { Spinner, YStack } from '@hanzo/gui'
 
 export function SpinnerDemo() {
   return (

apps/demos/src/StacksDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { XStack, YStack, ZStack } from 'hanzogui'
+import { XStack, YStack, ZStack } from '@hanzo/gui'
 
 export function StacksDemo() {
   return (

apps/demos/src/SwitchDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Label, Separator, Switch, Theme, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Label, Separator, Switch, Theme, XStack, YStack } from '@hanzo/gui'
 
 export function SwitchDemo() {
   return (

apps/demos/src/SwitchHeadlessDemo.tsx

@@ -4,7 +4,7 @@ import { useSwitch } from '@hanzogui/switch-headless'
 
 import type { View } from 'react-native'
 import { Animated, Pressable } from 'react-native'
-import { Label, XStack, YStack } from 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 export function SwitchHeadlessDemo() {
   return (

apps/demos/src/SwitchUnstyledDemo.tsx

@@ -1,6 +1,6 @@
 import { View, styled } from '@hanzogui/core'
 import { createSwitch } from '@hanzogui/switch'
-import { Label, XStack, YStack } from 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 const Frame = styled(View, {
   width: 40,

apps/demos/src/TabsAdvancedDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ViewProps, TabLayout, TabsTabProps } from 'hanzogui'
+import type { ViewProps, TabLayout, TabsTabProps } from '@hanzo/gui'
 import {
   AnimatePresence,
   Button,
@@ -9,7 +9,7 @@ import {
   XStack,
   YStack,
   styled,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 const demos = ['background', 'underline'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {

apps/demos/src/TabsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { TabsContentProps } from 'hanzogui'
+import type { TabsContentProps } from '@hanzo/gui'
 import {
   Button,
   H5,
@@ -10,7 +10,7 @@ import {
   YStack,
   isWeb,
   useWindowDimensions,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 const demos = ['horizontal', 'vertical'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {

apps/demos/src/TabsHeadlessDemo.tsx

@@ -7,7 +7,7 @@ import {
   YStack,
   isWeb,
   styled,
-} from 'hanzogui'
+} from '@hanzo/gui'
 import { createTabs } from '@hanzogui/tabs'
 import { getButtonSized } from '@hanzogui/get-button-sized'
 

apps/demos/src/TextDemo.tsx

@@ -1,4 +1,4 @@
-import { Em, Paragraph, SizableText, Span, Strong, YStack } from 'hanzogui'
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from '@hanzo/gui'
 
 export function TextDemo() {
   return (

apps/demos/src/ThemeBuilderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SquareProps, ThemeName } from 'hanzogui'
-import { Square, XStack, YStack } from 'hanzogui'
+import type { SquareProps, ThemeName } from '@hanzo/gui'
+import { Square, XStack, YStack } from '@hanzo/gui'
 
 export function ThemeBuilderDemo() {
   return (

apps/demos/src/ThemeInverseDemo.tsx

@@ -1,4 +1,4 @@
-import { Button, H5, Theme, XStack, YStack } from 'hanzogui'
+import { Button, H5, Theme, XStack, YStack } from '@hanzo/gui'
 
 export function ThemeInverseDemo() {
   return (

apps/demos/src/ToastDemo.tsx

@@ -1,4 +1,4 @@
-import { isWeb } from 'hanzogui'
+import { isWeb } from '@hanzo/gui'
 import {
   Toast,
   toast,
@@ -15,7 +15,7 @@ import {
   ArrowUpRight,
 } from '@hanzogui/lucide-icons-2'
 import { useRef, useState } from 'react'
-import { Button, Label, SizableText, Slider, XStack, YStack } from 'hanzogui'
+import { Button, Label, SizableText, Slider, XStack, YStack } from '@hanzo/gui'
 
 export const ToastDemo = () => {
   const [position, setPosition] = useState<ToastPosition>('bottom-right')

apps/demos/src/ToastDuplicateDemo.tsx

@@ -1,6 +1,6 @@
 import { CheckCircle2 } from '@hanzogui/lucide-icons-2'
 import { Toast, toast, useToasts } from '@hanzogui/toast/v2'
-import { Button, XStack, YStack } from 'hanzogui'
+import { Button, XStack, YStack } from '@hanzo/gui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.

apps/demos/src/ToastV1Demo.tsx

@@ -1,6 +1,6 @@
 import { Toast, useToastController, useToastState } from '@hanzogui/toast'
 import React from 'react'
-import { Button, Label, Switch, XStack, YStack } from 'hanzogui'
+import { Button, Label, Switch, XStack, YStack } from '@hanzo/gui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:

apps/demos/src/ToggleGroupDemo.tsx

@@ -1,5 +1,5 @@
 import { AlignCenter, AlignLeft, AlignRight } from '@hanzogui/lucide-icons-2'
-import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'hanzogui'
+import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from '@hanzo/gui'
 
 export function ToggleGroupDemo() {
   return (

apps/demos/src/TokensDemo.tsx

@@ -1,7 +1,7 @@
 import type { Tokens } from '@hanzogui/core'
 import { getConfig } from '@hanzogui/core'
 import React from 'react'
-import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from 'hanzogui'
+import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from '@hanzo/gui'
 
 type Section = 'spaceNegative' | keyof Tokens
 

apps/demos/src/TooltipDemo.tsx

@@ -5,8 +5,8 @@ import {
   ChevronUp,
   Circle,
 } from '@hanzogui/lucide-icons-2'
-import type { TooltipProps } from 'hanzogui'
-import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from 'hanzogui'
+import type { TooltipProps } from '@hanzo/gui'
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from '@hanzo/gui'
 
 export function TooltipDemo() {
   return (

apps/demos/src/UpdateThemeDemo.tsx

@@ -10,7 +10,7 @@ import {
   YStack,
   getVariableValue,
   useIsomorphicLayoutEffect,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 const colors = config.tokens.color
 const colorKeys = Object.keys(colors)

apps/demos/src/hanzogui.config.ts

@@ -1,5 +1,5 @@
 import { config } from '@hanzogui/dev-config'
-import { createGui } from 'hanzogui'
+import { createGui } from '@hanzo/gui'
 
 const tamaConf = createGui(config)
 

apps/demos/src/useOnIntersecting.tsx

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react'
 import { useEffect, useState } from 'react'
-import { isWeb, useEvent } from 'hanzogui'
+import { isWeb, useEvent } from '@hanzo/gui'
 
 type DisposeFn = () => void
 

apps/demos/tests/zstack.snapshot.test.tsx

@@ -1,4 +1,4 @@
-import { Separator, ZStack } from 'hanzogui'
+import { Separator, ZStack } from '@hanzo/gui'
 
 export const Crosshairs = () => {
   return (

apps/gui.hanzo.ai/app/(site)/(blog)/blog/index.tsx

@@ -1,5 +1,5 @@
 import { useLoader } from 'one'
-import { H2, Paragraph, Spacer, XStack } from 'hanzogui'
+import { H2, Paragraph, Spacer, XStack } from '@hanzo/gui'
 import { ContainerLarge } from '~/components/Containers'
 import { Link } from '~/components/Link'
 import { GuiCard } from '~/components/GuiCard'

apps/gui.hanzo.ai/app/(site)/(docs)/_layout.tsx

@@ -1,6 +1,6 @@
 import { Slot } from 'one'
 import { ScrollView } from 'react-native'
-import { View, XStack, YStack } from 'hanzogui'
+import { View, XStack, YStack } from '@hanzo/gui'
 import { DocsMenuContents } from '~/features/docs/DocsMenuContents'
 import { Footer } from '~/features/site/Footer'
 import { ThemeNameEffect } from '~/features/site/theme/ThemeNameEffect'

apps/gui.hanzo.ai/app/(site)/(docs)/ui/[...subpath].tsx

@@ -1,5 +1,5 @@
 import { ThemeTint } from '@hanzogui/logo'
-import { Theme } from 'hanzogui'
+import { Theme } from '@hanzo/gui'
 import { getMDXComponent } from '@vxrn/mdx-rust/client'
 import React, { memo } from 'react'
 import type { LoaderProps } from 'one'

apps/gui.hanzo.ai/app/(site)/_layout.tsx

@@ -1,7 +1,7 @@
 import { ToastViewport } from '@hanzogui/toast'
 import { lazy, Suspense } from 'react'
 import { LoadProgressBar, Slot, usePathname } from 'one'
-import { Theme, YStack } from 'hanzogui'
+import { Theme, YStack } from '@hanzo/gui'
 import { PromoBanner } from '~/components/PromoBanner'
 import { Footer } from '~/features/site/Footer'
 import { Header } from '~/features/site/header/Header'

apps/gui.hanzo.ai/app/(site)/account.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'one'
 import { useEffect } from 'react'
-import { Spinner, YStack } from 'hanzogui'
+import { Spinner, YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { accountModal } from '~/features/site/purchase/accountModalStore'
 import { useUser } from '~/features/user/useUser'

apps/gui.hanzo.ai/app/(site)/bento/(home)/index.tsx

@@ -1,6 +1,6 @@
 import { Globe, Leaf, Puzzle } from '@hanzogui/lucide-icons-2'
 import { useStore } from '@hanzogui/use-store'
-import { Circle, H4, Paragraph, XStack, YStack } from 'hanzogui'
+import { Circle, H4, Paragraph, XStack, YStack } from '@hanzo/gui'
 import { BentoStore, ComponentSection } from '~/components/BentoComponentSection'
 import { ContainerLarge } from '~/components/Containers'
 import { HeadInfo } from '~/components/HeadInfo'

apps/gui.hanzo.ai/app/(site)/bento/[...parts]+spa.tsx

@@ -17,7 +17,7 @@ import {
   XStack,
   YStack,
   Theme,
-} from 'hanzogui'
+} from '@hanzo/gui'
 import { ContainerBento } from '~/components/Containers'
 import { HeadInfo } from '~/components/HeadInfo'
 import { BentoPageFrame } from '~/features/bento/BentoPageFrame'

apps/gui.hanzo.ai/app/(site)/bento/_layout.tsx

@@ -1,5 +1,5 @@
 import { Slot } from 'one'
-import { Theme, YStack } from 'hanzogui'
+import { Theme, YStack } from '@hanzo/gui'
 import { useBentoTheme } from '~/features/bento/useBentoTheme'
 import { Footer } from '~/features/site/Footer'
 import { ThemeNameEffect } from '~/features/site/theme/ThemeNameEffect'

apps/gui.hanzo.ai/app/(site)/chat.tsx

@@ -1,4 +1,4 @@
-import { H1, Paragraph, Separator, Spacer } from 'hanzogui'
+import { H1, Paragraph, Separator, Spacer } from '@hanzo/gui'
 import { Container } from '../../components/Containers'
 import { HeadInfo } from '../../components/HeadInfo'
 import { Link } from '../../components/Link'

apps/gui.hanzo.ai/app/(site)/community.tsx

@@ -13,7 +13,7 @@ import {
   Spacer,
   XStack,
   YStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 import { Card } from '~/components/Card'
 import { ContainerLarge } from '~/components/Containers'
 import { FlatBubbleCard } from '~/components/FlatBubbleCard'

apps/gui.hanzo.ai/app/(site)/index.tsx

@@ -1,7 +1,7 @@
 import { setTintIndex } from '@hanzogui/logo'
 import { useLoader } from 'one'
 import { useEffect } from 'react'
-import { YStack } from 'hanzogui'
+import { YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { HomeAnimations } from '~/features/site/home/HomeAnimations'
 import { HomeCommunity } from '~/features/site/home/HomeCommunity'

apps/gui.hanzo.ai/app/(site)/login.tsx

@@ -2,7 +2,7 @@ import type { Provider } from '@supabase/auth-js'
 import { LogoIcon } from '@hanzogui/logo'
 import type { FormEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
-import { Button, Input, Paragraph, Separator, Spinner, XStack, YStack } from 'hanzogui'
+import { Button, Input, Paragraph, Separator, Spinner, XStack, YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { Notice } from '~/components/Notice'
 import { useSupabase } from '~/features/auth/useSupabaseClient'

apps/gui.hanzo.ai/app/(site)/payment-finished.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'one'
 import { useEffect } from 'react'
-import { H1, H4, Paragraph, YStack } from 'hanzogui'
+import { H1, H4, Paragraph, YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { sendEvent } from '~/features/analytics/sendEvent'
 import { accountModal } from '~/features/site/purchase/accountModalStore'

apps/gui.hanzo.ai/app/(site)/pop/_layout.tsx

@@ -1,5 +1,5 @@
 import { Slot } from 'one'
-import { YStack } from 'hanzogui'
+import { YStack } from '@hanzo/gui'
 import { ThemeNameEffect } from '~/features/site/theme/ThemeNameEffect'
 
 // minimal layout for popup windows - no header, footer, or nav

apps/gui.hanzo.ai/app/(site)/pop/accept-invite.tsx

@@ -1,6 +1,6 @@
 import { useSearchParams } from 'one'
 import { useEffect, useState } from 'react'
-import { Button, H2, Paragraph, Spinner, YStack } from 'hanzogui'
+import { Button, H2, Paragraph, Spinner, YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { Link } from '~/components/Link'
 import { authFetch } from '~/features/api/authFetch'

apps/gui.hanzo.ai/app/(site)/pro-license.tsx

@@ -1,4 +1,4 @@
-import { YStack } from 'hanzogui'
+import { YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { ProLicense } from '~/features/pro/ProLicense'
 

apps/gui.hanzo.ai/app/(site)/pro/enable-v2-renewal.tsx

@@ -1,4 +1,4 @@
-import { Button, H1, Paragraph, YStack } from 'hanzogui'
+import { Button, H1, Paragraph, YStack } from '@hanzo/gui'
 import { Container } from '../../../components/Containers'
 import { HeadInfo } from '~/components/HeadInfo'
 import { Link } from '~/components/Link'

apps/gui.hanzo.ai/app/(site)/takeout.tsx

@@ -1,5 +1,5 @@
 import { ThemeTint, ThemeTintAlt } from '@hanzogui/logo'
-import { Image, YStack } from 'hanzogui'
+import { Image, YStack } from '@hanzo/gui'
 import { ContainerLarge } from '~/components/Containers'
 import { HeadInfo } from '~/components/HeadInfo'
 import { Footer } from '~/features/site/Footer'

apps/gui.hanzo.ai/app/+not-found.tsx

@@ -1,6 +1,6 @@
 import { LogoIcon } from '@hanzogui/logo'
 import { Container } from '../components/Containers'
-import { H1, YStack } from 'hanzogui'
+import { H1, YStack } from '@hanzo/gui'
 
 export default () => {
   return (

apps/gui.hanzo.ai/app/_layout.tsx

@@ -3,7 +3,7 @@ import '~/app.css'
 import '~/hanzogui.generated.css'
 
 import { LoadProgressBar, Slot } from 'one'
-import { setupPopper } from 'hanzogui'
+import { setupPopper } from '@hanzo/gui'
 import { Providers } from '../components/Providers'
 import { LoadCherryBomb } from '~/features/site/fonts/LoadFonts'
 

apps/gui.hanzo.ai/app/admin/user+spa.tsx

@@ -1,4 +1,4 @@
-import { H1 } from 'hanzogui'
+import { H1 } from '@hanzo/gui'
 import { ContainerLarge } from '~/components/Containers'
 
 export default function AdminUserPage() {

apps/gui.hanzo.ai/app/auth.tsx

@@ -1,6 +1,6 @@
 import { AuthClient } from '@supabase/auth-js'
 import { useLayoutEffect, useRef } from 'react'
-import { Spinner, Text, YStack } from 'hanzogui'
+import { Spinner, Text, YStack } from '@hanzo/gui'
 import {
   getSafeInternalPath,
   navigateToInternalPath,

apps/gui.hanzo.ai/app/demo/[name].tsx

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react'
 import { useParams } from 'one'
-import { YStack, H2, Theme, Paragraph } from 'hanzogui'
+import { YStack, H2, Theme, Paragraph } from '@hanzo/gui'
 import * as Demos from '~/features/docs/demos'
 
 // Type for demo components (exclude lazyDemo helper function)

apps/gui.hanzo.ai/app/invoice.tsx

@@ -1,4 +1,4 @@
-import { YStack, XStack, Text, H2, Spacer } from 'hanzogui'
+import { YStack, XStack, Text, H2, Spacer } from '@hanzo/gui'
 
 export const mode = 'spa'
 
@@ -142,7 +142,7 @@ export default function InvoicePage() {
 //   styled,
 //   useDidFinishSSR,
 //   withStaticProperties,
-// } from 'hanzogui'
+// } from '@hanzo/gui'
 // import { ThemeToggle } from '~/features/site/theme/ThemeToggle'
 
 // export default memo(() => {

apps/gui.hanzo.ai/app/reproductions/motion-bug/index.tsx

@@ -1,6 +1,6 @@
 import { setTintIndex } from '@hanzogui/logo'
 import { useEffect } from 'react'
-import { YStack } from 'hanzogui'
+import { YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { HomeCommunity } from '~/features/site/home/HomeCommunity'
 import { HomeFeaturesGrid } from '~/features/site/home/HomeFeaturesGrid'

apps/gui.hanzo.ai/app/responsive-demo.tsx

@@ -4,7 +4,7 @@ import img2 from '@hanzogui/demos/photo/photo2'
 import img3 from '@hanzogui/demos/photo/photo3'
 import { LinearGradient } from '@hanzogui/linear-gradient'
 import { MapPin, Star } from '@hanzogui/lucide-icons-2'
-import { H3, H4, H5, Image, Paragraph, Spacer, Theme, XStack, YStack } from 'hanzogui'
+import { H3, H4, H5, Image, Paragraph, Spacer, Theme, XStack, YStack } from '@hanzo/gui'
 
 export default function ResponsiveDemo() {
   const header = (

apps/gui.hanzo.ai/app/sandbox+spa.tsx

@@ -1,7 +1,7 @@
 import { setTintIndex } from '@hanzogui/logo'
 import { useLoader } from 'one'
 import { useEffect } from 'react'
-import { Button, YStack } from 'hanzogui'
+import { Button, YStack } from '@hanzo/gui'
 import { HeadInfo } from '~/components/HeadInfo'
 import { HomeAnimations } from '~/features/site/home/HomeAnimations'
 import { HomeCommunity } from '~/features/site/home/HomeCommunity'

apps/gui.hanzo.ai/components/ActiveCircle.tsx

@@ -1,5 +1,5 @@
-import type { CircleProps } from 'hanzogui'
-import { Circle, YStack } from 'hanzogui'
+import type { CircleProps } from '@hanzo/gui'
+import { Circle, YStack } from '@hanzo/gui'
 
 export const ActiveCircle = (props: CircleProps & { isActive?: boolean }) => {
   const { isActive, bg, opacity, ...rest } = props

apps/gui.hanzo.ai/components/AvatarCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ChevronRight } from '@hanzogui/lucide-icons-2'
-import { Avatar, Card, H5, Paragraph, XStack, YStack } from 'hanzogui'
+import { Avatar, Card, H5, Paragraph, XStack, YStack } from '@hanzo/gui'
 import { Link } from '~/components/Link'
 import { ThemeTintAlt } from '@hanzogui/logo'
 

apps/gui.hanzo.ai/components/BentoComponentItem.tsx

@@ -22,7 +22,7 @@ import {
   TextCursorInput,
   ToggleRight,
 } from '@hanzogui/lucide-icons-2'
-import { H4, H5, Image, YStack } from 'hanzogui'
+import { H4, H5, Image, YStack } from '@hanzo/gui'
 import { LinearGradient } from '@hanzogui/linear-gradient'
 import { Link } from '~/components/Link'
 import ComponentPreview from './ComponentPreview'

apps/gui.hanzo.ai/components/BentoComponentSection.tsx

@@ -1,7 +1,7 @@
 import { listingData } from './bento-showcase/data'
 import { useStore } from '@hanzogui/use-store'
 import { useMemo, useRef, useState } from 'react'
-import { H3, ScrollView, Spacer, XStack, YStack } from 'hanzogui'
+import { H3, ScrollView, Spacer, XStack, YStack } from '@hanzo/gui'
 import { ContainerLarge } from '~/components/Containers'
 import { ComponentItem } from './BentoComponentItem'
 

apps/gui.hanzo.ai/components/BentoHero.tsx

@@ -1,7 +1,7 @@
 // @ts-expect-error - bento component wildcard import
 import { LocationNotification } from '@hanzogui/bento/component/user/preferences/LocationNotification'
 import { ThemeTint, ThemeTintAlt } from '@hanzogui/logo'
-import { Button, Paragraph, Spacer, Theme, XStack, YStack } from 'hanzogui'
+import { Button, Paragraph, Spacer, Theme, XStack, YStack } from '@hanzo/gui'
 import { BentoLogo } from '../features/bento/BentoLogo'
 import { LoadCherryBomb } from '../features/site/fonts/LoadFonts'
 import { useSubscriptionModal } from '../features/site/purchase/useSubscriptionModal'

apps/gui.hanzo.ai/components/Card.tsx

@@ -1,4 +1,4 @@
-import { YStack, styled } from 'hanzogui'
+import { YStack, styled } from '@hanzo/gui'
 
 export const Card = styled(YStack, {
   name: 'Card',

apps/gui.hanzo.ai/components/Card3D.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from 'react'
-import type { GuiElement, ViewProps } from 'hanzogui'
-import { isWeb, View, withStaticProperties } from 'hanzogui'
+import type { GuiElement, ViewProps } from '@hanzo/gui'
+import { isWeb, View, withStaticProperties } from '@hanzo/gui'
 
 // 3D Card Context - shared hover state between container and items
 const MouseEnterContext = createContext<

apps/gui.hanzo.ai/components/CheckCircle.tsx

@@ -1,5 +1,5 @@
 import { Check } from '@hanzogui/lucide-icons-2'
-import { YStack } from 'hanzogui'
+import { YStack } from '@hanzo/gui'
 
 export const CheckCircle = () => (
   <YStack

apps/gui.hanzo.ai/components/Code.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, styled } from 'hanzogui'
+import { Paragraph, styled } from '@hanzo/gui'
 
 export const Code = styled(Paragraph, {
   name: 'Code',