Snippets prontos pra copiar

import { UserEffects, Card, Avatar, Name, Bio } from '@cee.bio/runtime';

export default function Profile() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <Card>
        <Avatar size={120} ring />
        <Name size="xl" gradient />
        <Bio italic />
      </Card>
      <UserEffects />
    </main>
  );
}

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useOverlayAnimations, Card } from '@cee.bio/runtime';

export default function Profile() {
  const [showOverlay, setShowOverlay] = useState(true);
  const { overlay, card, duration } = useOverlayAnimations();

  return (
    <main>
      <AnimatePresence>
        {showOverlay && (
          <motion.div
            variants={overlay}
            initial="initial" animate="animate" exit="exit"
            transition={{ duration }}
            onClick={() => setShowOverlay(false)}
            className="fixed inset-0 z-50 bg-black/90 cursor-pointer
                       flex items-center justify-center text-white text-2xl"
          >
            click to enter
          </motion.div>
        )}
      </AnimatePresence>

      {!showOverlay && (
        <motion.div variants={card} initial="initial" animate="animate" transition={{ duration }}>
          <Card>...content...</Card>
        </motion.div>
      )}
    </main>
  );
}

import { useCee, useUserCardStyle, Card, Avatar, Name } from '@cee.bio/runtime';

export default function Profile() {
  const { user } = useCee();
  const cardStyle = useUserCardStyle({ padding: 24, borderRadius: 16 });
  const adjustedBlur = Math.pow((user.cardBlur ?? 0) / 100, 0.5) * 20;

  return (
    <main>
      <Card style={{ ...cardStyle, position: 'relative', overflow: 'hidden' }}>
        {user.cardCover && (
          <div
            aria-hidden
            style={{
              position: 'absolute', inset: 0, borderRadius: 'inherit',
              overflow: 'hidden', pointerEvents: 'none',
              opacity: (user.cardOpacity ?? 100) / 100,
            }}
          >
            <div
              style={{
                position: 'absolute', inset: 0,
                backgroundImage: `url("${user.cardCover}")`,
                backgroundSize: 'cover', backgroundPosition: 'center',
                ...(adjustedBlur > 0 ? {
                  filter: `blur(${adjustedBlur}px)`,
                  transform: `scale(${1 + adjustedBlur / 60})`,
                } : {}),
              }}
            />
          </div>
        )}
        <Avatar size={96} />
        <Name />
      </Card>
    </main>
  );
}

import { defineDefaults } from '@cee.bio/runtime';

// Declarado no topo do arquivo (fora do componente).
// O CLI extrai via AST no `cee push`.
const defaults = defineDefaults({
  cardColor: '#0d0d0d',
  mainColor: '#6fe782',
  fontFamily: 'Plus Jakarta Sans',
  backgroundImage: 'https://cdn.cee.bio/templates/myslug/bg.jpg',
});

export default function Profile() {
  // No render normal — defineDefaults é só metadata.
  return <>...</>;
}

import { defineFields, useFields, Card, Name } from '@cee.bio/runtime';

const fields = defineFields([
  { key: 'tagline', type: 'string', label: 'Tagline', default: 'hello world' },
  { key: 'accent', type: 'color', label: 'Cor principal', default: '#ff66cc' },
]);

export default function Profile() {
  const f = useFields<typeof fields>();
  return (
    <main style={{ background: f.accent + '20' }}>
      <Card>
        <Name />
        <p style={{ color: f.accent }}>{f.tagline}</p>
      </Card>
    </main>
  );
}

import { useCee, badgeIconUrl } from '@cee.bio/runtime';

export default function Profile() {
  const { user } = useCee();
  const badges = (user.badges ?? []).filter((b) => b.isVisible !== false);

  return (
    <div className="flex gap-2">
      {badges.map((b) => {
        const url = b.iconUrl ?? badgeIconUrl(b.id, { color: b.color });
        if (!url) return null;
        return <img key={b.id} src={url} alt={b.name} width={20} height={20} />;
      })}
    </div>
  );
}

import { DiscordWidget } from '@cee.bio/runtime';

export default function Profile() {
  return (
    <main>
      <DiscordWidget
        discordId="1421289705626013769"
        discordStyle="card"
        showActivity
      />
    </main>
  );
}

# Sync simples
cee sync

# Forçando invalidação do cache server-side (TwoLayerCache + paired)
cee sync --force

# Out path customizado
cee sync --out src/data/user.json

# Modo silent (sem logs, só errors)
cee sync --quiet

# 1) Publicar template via dashboard
#    /dashboard/templates → "Publicar" → preenche nome, descrição, preview

# 2) Admin promove via UI no template detail
#    /dashboard/templates/<id> → painel amarelo "Admin · Layout community"
#    → digita slug (ex: neonpunk) → "Promover"

# 3) Auto-update via cee push
#    Qualquer 'cee push' do dono original propaga o source pros users
#    que escolheram esse layout no picker. Zero migration por user.