Add .env.local and .mcp.json to .gitignore

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 node_modules/*
 .next
-next-env.d.ts
+next-env.d.ts
+.env.local
+.mcp.json

app/page.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@/components/elements"
+import { Typography } from "@/components/elements/Typography"
 
 const Home: React.FC = () => {
   return (

components/elements/Button.tsx

@@ -20,7 +20,11 @@ export interface ButtonProps
 }
 
 function Button({ variant = "default", size = "default", ...props }: ButtonProps) {
-  return <ShadcnButton variant={variant} size={size} {...props} />
+  return (
+    <span className="inline-block">
+      <ShadcnButton variant={variant} size={size} {...props} />
+    </span>
+  )
 }
 
 export { Button }

components/elements/Card.config.tsx

@@ -17,14 +17,8 @@ export const CardConfig: ElementConfig = {
         label: "Subtitle",
       },
       tags: {
-        type: "array",
+        type: "tags",
         label: "Tags",
-        arrayFields: {
-          tag: {
-            type: "text",
-            label: "Tag",
-          },
-        },
       },
     },
   },

components/elements/Card.tsx

@@ -10,15 +10,11 @@ import { cn } from "@/lib/utils"
 import { Image } from "./Image"
 import { Typography } from "./Typography"
 
-export interface CardTag {
-  tag: string
-}
-
 export interface CardProps extends React.ComponentProps<typeof ShadcnCard> {
   image?: string
   title?: string
   subtitle?: string
-  tags?: CardTag[]
+  tags?: string[]
 }
 
 function Card({
@@ -31,7 +27,6 @@ function Card({
 }: CardProps) {
   return (
     <ShadcnCard
-      data-slot="element-card"
       className={cn("overflow-hidden pt-0", className)}
       {...props}
     >
@@ -59,9 +54,9 @@ function Card({
 
       {tags && tags.length > 0 ? (
         <CardContent className="flex flex-wrap gap-2">
-          {tags.map((item, index) => (
+          {tags.map((tag, index) => (
-            <Badge key={`${item.tag}-${index}`} variant="secondary">
+            <Badge key={`${tag}-${index}`} variant="secondary">
-              {item.tag}
+              {tag}
             </Badge>
           ))}
         </CardContent>

components/elements/Image.config.tsx

@@ -5,7 +5,7 @@ export const ImageConfig: ElementConfig = {
     label: "Image",
     fields: {
       src: {
-        type: "text",
+        type: "image",
         label: "Source URL",
       },
       alt: {
@@ -28,11 +28,11 @@ export const ImageConfig: ElementConfig = {
         label: "Circle",
       },
       width: {
-        type: "text",
+        type: "number",
         label: "Width",
       },
       height: {
-        type: "text",
+        type: "number",
         label: "Height",
       },
     },

components/elements/Image.tsx

@@ -38,18 +38,19 @@ function Image({
   className,
 }: ImageProps) {
   return (
-    <NextImage
+    <span className="inline-block">
-      data-slot="image"
+      <NextImage
-      src={src}
+        src={src}
-      alt={alt}
+        alt={alt}
-      height={height}
+        height={height}
-      width={width}
+        width={width}
-      className={cn(
+        className={cn(
-        objectFitStyles[objectFit],
+          objectFitStyles[objectFit],
-        circle ? "rounded-full" : "rounded-md",
+          circle ? "rounded-full" : "rounded-md",
-        className
+          className
-      )}
+        )}
-    />
+      />
+    </span>
   )
 }
 

components/elements/Typography.tsx

@@ -102,7 +102,6 @@ function Typography({
 
   return (
     <Comp
-      data-slot="typography"
       data-variant={variant}
       className={cn(
         variantStyles[variant],

components/elements/index.ts

@@ -1,26 +0,0 @@
-export * from "./types"
-
-export { Typography } from "./Typography"
-export type {
-  TypographyProps,
-  TypographyVariant,
-  TypographyAlign,
-  TypographyWeight,
-} from "./Typography"
-export { TypographyConfig } from "./Typography.config"
-
-export { Button } from "./Button"
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button"
-export { ButtonConfig } from "./Button.config"
-
-export { Image } from "./Image"
-export type { ImageProps, ObjectFit } from "./Image"
-export { ImageConfig } from "./Image.config"
-
-export { Icon } from "./Icon"
-export type { IconProps, IconName } from "./Icon"
-export { IconConfig } from "./Icon.config"
-
-export { Card } from "./Card"
-export type { CardProps, CardTag } from "./Card"
-export { CardConfig } from "./Card.config"

components/elements/types.ts

@@ -7,6 +7,9 @@ export type FieldType =
   | "object"
   | "boolean"
   | "select"
+  | "image"
+  | "number"
+  | "tags"
 
 export interface FieldOption {
   label: string