@ecomiq/storefront 1.1.9 → 2.0.1

package/src/runtime/head.ts

@@ -0,0 +1,126 @@
+/**
+ * Runtime interno: construcción del <head>.
+ * Mezcla el SEO global de ecomiq.config.js con el `meta` de cada página
+ * (la página siempre gana) y genera los scripts de analytics declarados.
+ */
+import type { PageMeta, PublicEcomiqConfig } from '../index'
+
+type MetaTag = Record<string, string>
+type LinkTag = Record<string, string>
+type ScriptTag = Record<string, string | boolean> & { children?: string }
+
+interface HeadResult {
+  meta?: MetaTag[]
+  links?: LinkTag[]
+  scripts?: ScriptTag[]
+}
+
+function serializeJsonLd(value: Record<string, unknown>) {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+}
+
+/** Aplica titleTemplate ('%s · Tienda') o cae al patrón `Título · Tienda`. */
+export function resolveTitle(pageTitle: string | undefined, config: PublicEcomiqConfig): string {
+  const seo = config.seo ?? {}
+  if (!pageTitle) return config.name
+  const template = seo.titleTemplate
+  return template ? template.replace('%s', pageTitle) : `${pageTitle} · ${config.name}`
+}
+
+/** Head global: charset, viewport, favicon, metas/links extra y analytics. Va en el root. */
+export function buildRootHead(config: PublicEcomiqConfig): HeadResult {
+  const seo = config.seo ?? {}
+
+  const meta: MetaTag[] = [
+    { charSet: 'utf-8' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ]
+  if (seo.keywords?.length) meta.push({ name: 'keywords', content: seo.keywords.join(', ') })
+  for (const extra of seo.meta ?? []) meta.push(extra)
+
+  const links: LinkTag[] = [{ rel: 'icon', href: seo.favicon ?? '/favicon.ico' }]
+  for (const extra of seo.links ?? []) links.push(extra)
+
+  return { meta, links, scripts: buildAnalyticsScripts(config) }
+}
+
+/** Head por página: title (con plantilla), description, OG/Twitter, robots, metas extra y JSON-LD. */
+export function buildPageHead(
+  pageMeta: PageMeta | undefined,
+  config: PublicEcomiqConfig,
+): HeadResult {
+  const seo = config.seo ?? {}
+  const title = resolveTitle(pageMeta?.title, config)
+  const description = pageMeta?.description ?? config.description
+  const ogImage = pageMeta?.ogImage ?? seo.ogImage
+
+  const meta: MetaTag[] = [{ title }]
+  if (description) meta.push({ name: 'description', content: description })
+  if (pageMeta?.noIndex) meta.push({ name: 'robots', content: 'noindex, nofollow' })
+
+  // Open Graph + Twitter con fallbacks razonables
+  meta.push({ property: 'og:title', content: title })
+  meta.push({ property: 'og:type', content: 'website' })
+  meta.push({ property: 'og:site_name', content: config.name })
+  if (description) meta.push({ property: 'og:description', content: description })
+  if (ogImage) {
+    meta.push({ property: 'og:image', content: ogImage })
+    meta.push({ name: 'twitter:card', content: seo.twitterCard ?? 'summary_large_image' })
+    meta.push({ name: 'twitter:image', content: ogImage })
+  }
+
+  for (const extra of pageMeta?.meta ?? []) meta.push(extra as MetaTag)
+
+  const scripts: ScriptTag[] = []
+  if (pageMeta?.jsonLd) {
+    scripts.push({ type: 'application/ld+json', children: serializeJsonLd(pageMeta.jsonLd) })
+  }
+
+  return { meta, ...(scripts.length ? { scripts } : {}) }
+}
+
+/** Traduce el bloque `analytics` del config a etiquetas <script>. */
+export function buildAnalyticsScripts(config: PublicEcomiqConfig): ScriptTag[] {
+  const analytics = config.analytics ?? {}
+  const scripts: ScriptTag[] = []
+
+  if (analytics.googleAnalytics) {
+    const id = analytics.googleAnalytics
+    scripts.push({ src: `https://www.googletagmanager.com/gtag/js?id=${id}`, async: true })
+    scripts.push({
+      children: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)};gtag('js',new Date());gtag('config','${id}');`,
+    })
+  }
+
+  if (analytics.plausible) {
+    scripts.push({
+      src: 'https://plausible.io/js/script.js',
+      defer: true,
+      'data-domain': analytics.plausible,
+    })
+  }
+
+  if (analytics.metaPixel) {
+    const id = analytics.metaPixel
+    scripts.push({
+      children: `!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init','${id}');fbq('track','PageView');`,
+    })
+  }
+
+  for (const custom of analytics.scripts ?? []) {
+    if (custom.src) {
+      scripts.push({
+        src: custom.src,
+        ...(custom.defer ? { defer: true } : {}),
+        ...(custom.async ? { async: true } : {}),
+      })
+    } else if (custom.inline) {
+      scripts.push({ children: custom.inline })
+    }
+  }
+
+  return scripts
+}

package/src/runtime/page.tsx

@@ -0,0 +1,82 @@
+/**
+ * Runtime interno de Ecomiq (solo lo importa el código generado en .ecomiq).
+ * Traduce el contrato público `definePage` a las opciones del router interno.
+ */
+import type { EcomiqPage, PublicEcomiqConfig } from '../index'
+import { StorefrontError } from '../ui/storefront-error'
+import { buildPageHead } from './head'
+
+export function pageToRouteOptions<
+  TData,
+  TParams extends Record<string, string>,
+  TSearch extends Record<string, unknown>,
+>(
+  page: EcomiqPage<TData, TParams, TSearch>,
+  config: PublicEcomiqConfig,
+) {
+  const readSearch = page.validateSearch ?? ((raw: Record<string, unknown>) => raw as TSearch)
+  const reloadOnSearch = page.reloadOnSearch !== false
+  const stableLoaderDeps: Record<string, never> = {}
+
+  return {
+    preload: page.preload,
+    shouldReload: reloadOnSearch ? undefined : false,
+    validateSearch: readSearch,
+    loaderDeps: ({ search }: { search: TSearch }) => reloadOnSearch ? search : stableLoaderDeps,
+    loader: page.loader
+      ? ({ params, deps, location }: {
+          params: TParams
+          deps: TSearch | Record<string, never>
+          location?: { search?: Record<string, unknown> }
+        }) => {
+          let search = readSearch(location?.search ?? {})
+          if (reloadOnSearch) {
+            search = deps as TSearch
+          }
+          return page.loader!({
+            params,
+            search,
+            config,
+          })
+        }
+      : undefined,
+    head: ({ loaderData, params, match }: {
+      loaderData: TData
+      params: TParams
+      match: { search: TSearch }
+    }) => buildPageHead(
+      loaderData === undefined
+        ? undefined
+        : page.meta?.({
+            data: loaderData,
+            params,
+            search: match.search,
+            config,
+          }),
+      config,
+    ),
+    pendingComponent: page.loading,
+    errorComponent: page.error
+      ? ({ error, reset }: { error: Error; reset: () => void }) => page.error!({ error, reset })
+      : ({ reset }: { error: Error; reset: () => void }) => <StorefrontError onRetry={reset} />,
+  }
+}
+
+export function PageBoundary<
+  TData,
+  TParams extends Record<string, string>,
+  TSearch extends Record<string, unknown>,
+>({
+  page,
+  data,
+  params,
+  search,
+}: {
+  page: EcomiqPage<TData, TParams, TSearch>
+  data: TData
+  params: TParams
+  search: TSearch
+}) {
+  const Component = page.component
+  return <Component data={data} params={params} search={search} />
+}

package/src/runtime/postcss-browser-stub.mjs

@@ -0,0 +1,5 @@
+export function parse() {
+  throw new Error('El storefront no admite estilos inline en HTML enriquecido.')
+}
+
+export default { parse }

package/src/server-config-store.ts

@@ -0,0 +1,26 @@
+import type { CreateApiOptions } from '@ecomiq/core'
+import { createServerOnlyFn } from '@tanstack/react-start'
+
+export interface ServerEcomiqConfig {
+  slug: string
+  api?: CreateApiOptions
+}
+
+const serverConfigKey = Symbol.for('@ecomiq/storefront/server-config')
+const serverGlobal = globalThis as typeof globalThis & {
+  [key: symbol]: ServerEcomiqConfig | undefined
+}
+
+export const registerServerConfig = createServerOnlyFn((config: ServerEcomiqConfig): void => {
+  serverGlobal[serverConfigKey] = config
+})
+
+export const getServerConfig = createServerOnlyFn((): ServerEcomiqConfig => {
+  const registered = serverGlobal[serverConfigKey]
+  if (!registered) {
+    throw new Error(
+      'Config server de Ecomiq no disponible. Ejecuta la app mediante `ecomiq dev|build`.',
+    )
+  }
+  return registered
+})

package/src/server.ts

@@ -0,0 +1,279 @@
+/**
+ * API storefront que solo corre en el servidor (TanStack Start RPC).
+ * En SSR ejecuta el handler localmente; en el cliente llama al Worker.
+ *
+ * ```ts
+ * import { definePage, serverApi } from '@ecomiq/storefront'
+ *
+ * export default definePage({
+ *   loader: () => serverApi.getProducts({ page: 1, pageSize: 12 }),
+ *   component: ({ data }) => …,
+ * })
+ * ```
+ *
+ * Nota: cada `createServerFn` debe vivir en el top-level del módulo
+ * (el compilador de Start asigna IDs estables por call-site).
+ * El cliente storefront es singleton → el cache de settings se reutiliza.
+ */
+import { createServerFn } from '@tanstack/react-start'
+import {
+  AddCartItemParamsSchema,
+  CartAddressesParamsSchema,
+  CartBuyerParamsSchema,
+  CartCheckoutParamsSchema,
+  CartCheckoutReadParamsSchema,
+  CartPromotionCodeParamsSchema,
+  CreateProductReviewParamsSchema,
+  GetCartParamsSchema,
+  GetDepartmentsParamsSchema,
+  GetDistrictsParamsSchema,
+  GetProvincesParamsSchema,
+  GetShippingOptionsParamsSchema,
+  ListProductReviewsParamsSchema,
+  ProductAutocompleteParamsSchema,
+  ProductDetailParamsSchema,
+  ProductsParamsSchema,
+  PutShippingMethodParamsSchema,
+  RelatedProductsParamsSchema,
+  RemoveCartItemParamsSchema,
+  UpdateCartItemQuantityParamsSchema,
+  type AddCartItemParams,
+  type CartAddressesParams,
+  type CartBuyerParams,
+  type CartCheckoutParams,
+  type CartCheckoutReadParams,
+  type CartPromotionCodeParams,
+  type CreateProductReviewParams,
+  type GetCartParams,
+  type GetDepartmentsParams,
+  type GetDistrictsParams,
+  type GetProvincesParams,
+  type GetShippingOptionsParams,
+  type ListProductReviewsParams,
+  type ProductAutocompleteParams,
+  type ProductDetailParams,
+  type ProductsParamsInput,
+  type PutShippingMethodParams,
+  type RelatedProductsParams,
+  type RemoveCartItemParams,
+  type UpdateCartItemQuantityParams,
+  type UploadPaymentReceiptParams,
+} from '@ecomiq/core'
+import { z } from 'zod'
+import { getStorefrontClient } from './client'
+import {
+  loadActiveCart,
+  submitCartItemQuantity,
+  submitCartItemRemoval,
+  submitProductToCart,
+  type AddProductToCartInput,
+} from './cart-session'
+import { submitProductReview } from './review-submission'
+
+const getSettingsFn = createServerFn({ method: 'GET' }).handler(() =>
+  getStorefrontClient().getSettings(),
+)
+
+const getStoreIdFn = createServerFn({ method: 'GET' }).handler(() =>
+  getStorefrontClient().getStoreId(),
+)
+
+const getCollectionsFn = createServerFn({ method: 'GET' }).handler(() =>
+  getStorefrontClient().getCollections(),
+)
+
+const getCollectionBySlugFn = createServerFn({ method: 'GET' })
+  .validator(z.object({ slug: z.string().min(1) }))
+  .handler(({ data }) => getStorefrontClient().getCollectionBySlug(data.slug))
+
+const getProductsFn = createServerFn({ method: 'GET' })
+  .validator(ProductsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getProducts(data))
+
+const ProductBySlugServerParamsSchema = ProductDetailParamsSchema.extend({
+  slug: z.string().min(1),
+})
+
+const getProductBySlugFn = createServerFn({ method: 'GET' })
+  .validator(ProductBySlugServerParamsSchema)
+  .handler(({ data }) =>
+    getStorefrontClient().getProductBySlug(data.slug, { sellerId: data.sellerId }),
+  )
+
+const getRelatedProductsFn = createServerFn({ method: 'GET' })
+  .validator(RelatedProductsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getRelatedProducts(data))
+
+const autocompleteProductsFn = createServerFn({ method: 'GET' })
+  .validator(ProductAutocompleteParamsSchema)
+  .handler(({ data }) => getStorefrontClient().autocompleteProducts(data))
+
+const listProductReviewsFn = createServerFn({ method: 'GET' })
+  .validator(ListProductReviewsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().listProductReviews(data))
+
+const submitProductReviewFn = createServerFn({ method: 'POST' })
+  .validator(CreateProductReviewParamsSchema)
+  .handler(({ data }) => submitProductReview(getStorefrontClient(), data))
+
+const loadCartFn = createServerFn({ method: 'POST' })
+  .validator(GetCartParamsSchema)
+  .handler(({ data }) => loadActiveCart(getStorefrontClient(), data))
+
+const setCartItemQuantityFn = createServerFn({ method: 'POST' })
+  .validator(UpdateCartItemQuantityParamsSchema)
+  .handler(({ data }) => submitCartItemQuantity(getStorefrontClient(), data))
+
+const removeCartItemFn = createServerFn({ method: 'POST' })
+  .validator(RemoveCartItemParamsSchema)
+  .handler(({ data }) => submitCartItemRemoval(getStorefrontClient(), data))
+
+const AddProductToCartServerSchema = z.object({
+  cartId: z.string().uuid().optional(),
+  currencyCode: z.string().length(3),
+  variantId: z.string().regex(/^[1-9]\d*$/),
+  quantity: z.number().int().positive(),
+})
+
+const addProductToCartFn = createServerFn({ method: 'POST' })
+  .validator(AddProductToCartServerSchema)
+  .handler(({ data }) => submitProductToCart(getStorefrontClient(), data))
+
+const addCartItemFn = createServerFn({ method: 'POST' })
+  .validator(AddCartItemParamsSchema)
+  .handler(({ data }) => getStorefrontClient().addCartItem(data))
+
+const getCartCheckoutFn = createServerFn({ method: 'GET' })
+  .validator(CartCheckoutReadParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getCartCheckout(data))
+
+const getShippingOptionsFn = createServerFn({ method: 'GET' })
+  .validator(GetShippingOptionsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getShippingOptions(data))
+
+const putCartShippingMethodFn = createServerFn({ method: 'POST' })
+  .validator(PutShippingMethodParamsSchema)
+  .handler(({ data }) => getStorefrontClient().putCartShippingMethod(data))
+
+const patchCartBuyerFn = createServerFn({ method: 'POST' })
+  .validator(CartBuyerParamsSchema)
+  .handler(({ data }) => getStorefrontClient().patchCartBuyer(data))
+
+const patchCartAddressesFn = createServerFn({ method: 'POST' })
+  .validator(CartAddressesParamsSchema)
+  .handler(({ data }) => getStorefrontClient().patchCartAddresses(data))
+
+const checkoutCartFn = createServerFn({ method: 'POST' })
+  .validator(CartCheckoutParamsSchema)
+  .handler(({ data }) => getStorefrontClient().checkoutCart(data))
+
+const CartPaymentReceiptServerSchema = z.object({
+  cartId: z.string().uuid(),
+  fileBase64: z.string().min(1),
+  fileName: z.string().min(1),
+  mimeType: z.string().min(1).optional(),
+})
+
+const uploadPaymentReceiptFn = createServerFn({ method: 'POST' })
+  .validator(CartPaymentReceiptServerSchema)
+  .handler(({ data }) => {
+    const binary = Uint8Array.from(atob(data.fileBase64), (c) => c.charCodeAt(0))
+    const file = new Blob([binary], { type: data.mimeType ?? 'application/octet-stream' })
+    return getStorefrontClient().uploadPaymentReceipt({
+      cartId: data.cartId,
+      file,
+      fileName: data.fileName,
+    })
+  })
+
+const addCartPromotionCodeFn = createServerFn({ method: 'POST' })
+  .validator(CartPromotionCodeParamsSchema)
+  .handler(({ data }) => getStorefrontClient().addCartPromotionCode(data))
+
+const removeCartPromotionCodeFn = createServerFn({ method: 'POST' })
+  .validator(CartPromotionCodeParamsSchema)
+  .handler(({ data }) => getStorefrontClient().removeCartPromotionCode(data))
+
+const getCountriesFn = createServerFn({ method: 'GET' }).handler(() =>
+  getStorefrontClient().getCountries(),
+)
+
+const getDepartmentsFn = createServerFn({ method: 'GET' })
+  .validator(GetDepartmentsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getDepartments(data))
+
+const getProvincesFn = createServerFn({ method: 'GET' })
+  .validator(GetProvincesParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getProvinces(data))
+
+const getDistrictsFn = createServerFn({ method: 'GET' })
+  .validator(GetDistrictsParamsSchema)
+  .handler(({ data }) => getStorefrontClient().getDistricts(data))
+
+/**
+ * Cliente storefront server-only. Misma superficie útil que `createClient()`,
+ * pero cada método es una server function reutilizable desde cualquier página.
+ */
+export const serverApi = {
+  getSettings: () => getSettingsFn(),
+  getStoreId: () => getStoreIdFn(),
+  getCollections: () => getCollectionsFn(),
+  getCollectionBySlug: (slug: string) => getCollectionBySlugFn({ data: { slug } }),
+  getProducts: (
+    params: ProductsParamsInput = {},
+    options: { signal?: AbortSignal } = {},
+  ) => getProductsFn({ data: params, signal: options.signal }),
+  getProductBySlug: (slug: string, params: ProductDetailParams = {}) =>
+    getProductBySlugFn({ data: { slug, ...params } }),
+  getRelatedProducts: (params: RelatedProductsParams) =>
+    getRelatedProductsFn({ data: params }),
+  autocompleteProducts: (params: ProductAutocompleteParams) =>
+    autocompleteProductsFn({ data: params }),
+  listProductReviews: (params: ListProductReviewsParams) =>
+    listProductReviewsFn({ data: params }),
+  submitProductReview: (params: CreateProductReviewParams) =>
+    submitProductReviewFn({ data: params }),
+  loadCart: (params: GetCartParams) => loadCartFn({ data: params }),
+  setCartItemQuantity: (params: UpdateCartItemQuantityParams) =>
+    setCartItemQuantityFn({ data: params }),
+  removeCartItem: (params: RemoveCartItemParams) =>
+    removeCartItemFn({ data: params }),
+  addProductToCart: (params: AddProductToCartInput) =>
+    addProductToCartFn({ data: params }),
+  addCartItem: (params: AddCartItemParams) => addCartItemFn({ data: params }),
+  getCartCheckout: (params: CartCheckoutReadParams) =>
+    getCartCheckoutFn({ data: params }),
+  getShippingOptions: (params: GetShippingOptionsParams) =>
+    getShippingOptionsFn({ data: params }),
+  putCartShippingMethod: (params: PutShippingMethodParams) =>
+    putCartShippingMethodFn({ data: params }),
+  patchCartBuyer: (params: CartBuyerParams) => patchCartBuyerFn({ data: params }),
+  patchCartAddresses: (params: CartAddressesParams) =>
+    patchCartAddressesFn({ data: params }),
+  checkoutCart: (params: CartCheckoutParams) => checkoutCartFn({ data: params }),
+  uploadPaymentReceipt: async (params: UploadPaymentReceiptParams) => {
+    const buffer = await params.file.arrayBuffer()
+    const bytes = new Uint8Array(buffer)
+    let binary = ''
+    for (const byte of bytes) binary += String.fromCharCode(byte)
+    return uploadPaymentReceiptFn({
+      data: {
+        cartId: params.cartId,
+        fileBase64: btoa(binary),
+        fileName:
+          params.fileName ??
+          (params.file instanceof File ? params.file.name : 'receipt'),
+        mimeType: params.file.type || undefined,
+      },
+    })
+  },
+  addCartPromotionCode: (params: CartPromotionCodeParams) =>
+    addCartPromotionCodeFn({ data: params }),
+  removeCartPromotionCode: (params: CartPromotionCodeParams) =>
+    removeCartPromotionCodeFn({ data: params }),
+  getCountries: () => getCountriesFn(),
+  getDepartments: (params: GetDepartmentsParams) =>
+    getDepartmentsFn({ data: params }),
+  getProvinces: (params: GetProvincesParams) => getProvincesFn({ data: params }),
+  getDistricts: (params: GetDistrictsParams) => getDistrictsFn({ data: params }),
+}

package/src/styles.css

@@ -0,0 +1,76 @@
+/* Design system de Ecomiq — Tailwind v4 + tokens estilo shadcn.
+ * `source(...)` fija el scan para que client y SSR generen el mismo CSS/hash. */
+@import 'tailwindcss' source('./');
+
+/* Escanear los componentes UI del propio framework */
+@source './ui';
+@source './components';
+@source './runtime';
+@source './pages';
+@source '../templates';
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+:root {
+  --background: oklch(0.99 0.003 90);
+  --foreground: oklch(0.2 0.02 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.02 260);
+  --primary: oklch(0.45 0.15 165);
+  --primary-foreground: oklch(0.98 0.01 165);
+  --secondary: oklch(0.96 0.01 165);
+  --secondary-foreground: oklch(0.3 0.05 165);
+  --muted: oklch(0.96 0.005 90);
+  --muted-foreground: oklch(0.5 0.02 260);
+  --accent: oklch(0.94 0.03 165);
+  --accent-foreground: oklch(0.3 0.05 165);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+  --border: oklch(0.91 0.005 90);
+  --input: oklch(0.91 0.005 90);
+  --ring: oklch(0.45 0.15 165);
+  --radius: 0.625rem;
+}
+
+* {
+  border-color: var(--border);
+}
+
+::selection {
+  background: var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/ui/badge.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from './cn'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'text-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+export interface BadgeProps
+  extends Omit<ComponentProps<'span'>, 'children'>,
+    VariantProps<typeof badgeVariants> {
+  children?: ReactNode
+}
+
+export function Badge({ className, variant, children, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props}>
+      {children}
+    </span>
+  )
+}

package/src/ui/button.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from './cn'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+)
+
+export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {}
+
+export function Button({ className, variant, size, type = 'button', ...props }: ButtonProps) {
+  return <button type={type} className={cn(buttonVariants({ variant, size }), className)} {...props} />
+}