Fix: style 'new-york' + CSS exacto del manual shadcn-vue

- components.json: reka-nova → new-york
- style.css: reescrito según manual (orden @theme inline después de :root/.dark)
- color-destructive-foreground agregado a @theme inline
- Colores chart correctos (no grayscale), sidebar-border sólido, destructive tonos
- @layer base sin duplicados, font-sans vía CSS variable
- 130 componentes reinstalados con new-york variants

src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +10,7 @@ const props = defineProps<{
   <nav
     aria-label="breadcrumb"
     data-slot="breadcrumb"
-    :class="cn('', props.class)"
+    :class="props.class"
   >
     <slot />
   </nav>

src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-
-import { MoreHorizontalIcon } from '@lucide/vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -14,10 +13,10 @@ const props = defineProps<{
     data-slot="breadcrumb-ellipsis"
     role="presentation"
     aria-hidden="true"
-    :class="cn('size-5 [&>svg]:size-4 flex items-center justify-center', props.class)"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontalIcon />
+      <MoreHorizontal class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <li
     data-slot="breadcrumb-item"
-    :class="cn('gap-1 inline-flex items-center', props.class)"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
   >
     <slot />
   </li>

src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-  as: 'a',
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
 })
 </script>
 

src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word', props.class)"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
   >
     <slot />
   </ol>

src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 

src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-
-import { ChevronRightIcon } from '@lucide/vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "@lucide/vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -17,7 +16,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRightIcon class="cn-rtl-flip" />
+      <ChevronRight />
     </slot>
   </li>
 </template>

src/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from './Breadcrumb.vue'
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
-export { default as BreadcrumbList } from './BreadcrumbList.vue'
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"