retail-design-system 1.0.0

package/apps/web/components/notion/notion.ts

@@ -0,0 +1,223 @@
+import { Client } from "@notionhq/client"
+
+const NOTION_API_KEY = "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"
+
+const NOTION_API_VERSION = "2025-09-03"
+
+export const notion = new Client({
+  auth: NOTION_API_KEY,
+  notionVersion: NOTION_API_VERSION,
+})
+
+export type NotionBlock =
+  | {
+      alt: string
+      type: "image"
+      url: string
+    }
+  | {
+      code: string
+      language: string
+      type: "code"
+    }
+  | {
+      segments: NotionRichTextSegment[]
+      type: "h2" | "h3" | "paragraph"
+    }
+
+export interface NotionPage {
+  blocks: NotionBlock[]
+  createdTime: string
+  lastEditedTime: string
+  tabs: NotionTab[]
+  title: string
+}
+
+export interface NotionRichTextSegment {
+  bold: boolean
+  code: boolean
+  href: null | string
+  italic: boolean
+  strikethrough: boolean
+  text: string
+  underline: boolean
+}
+
+export interface NotionTab {
+  href: string
+  label: string
+}
+
+interface NotionRichTextInput {
+  annotations: {
+    bold: boolean
+    code: boolean
+    italic: boolean
+    strikethrough: boolean
+    underline: boolean
+  }
+  href: null | string
+  plain_text: string
+}
+
+export async function getNotionPage(pageId: string): Promise<NotionPage> {
+  if (!NOTION_API_KEY) {
+    throw new Error("NOTION_API_KEY is required")
+  }
+
+  // Keep a stable fallback when page metadata is missing or unexpected.
+  const DEFAULT_EMPTY = {
+    blocks: [],
+    createdTime: "",
+    lastEditedTime: "",
+    tabs: [],
+    title: "",
+  }
+
+  const [metaContent, metaPage] = await Promise.all([
+    notion.blocks.children.list({ block_id: pageId }),
+    notion.pages.retrieve({ page_id: pageId }),
+  ])
+
+  if (!("properties" in metaPage)) {
+    return DEFAULT_EMPTY
+  }
+
+  const titleProperty = metaPage.properties.title
+
+  if (!titleProperty || titleProperty.type !== "title") {
+    return DEFAULT_EMPTY
+  }
+
+  let title = ""
+  const titleArray = titleProperty.title
+  if (titleArray.length > 0) {
+    title = titleArray[0].plain_text
+  }
+
+  const blocks: NotionBlock[] = []
+  const tabs: NotionTab[] = []
+
+  // Shared paragraph/heading handler: skip empty text and normalize segment shape.
+  function pushRichTextBlock(
+    richText: NotionRichTextInput[],
+    type: Extract<NotionBlock, { segments: NotionRichTextSegment[] }>["type"],
+  ): void {
+    if (richText.length === 0) {
+      return
+    }
+
+    blocks.push({
+      segments: toNotionRichTextSegments(richText),
+      type,
+    })
+  }
+
+  function pushTab(text: string): void {
+    const tab = toNotionTab(text)
+    if (tab) {
+      tabs.push(tab)
+    }
+  }
+
+  // Convert Notion API blocks into the small renderable union used by the UI.
+  for (const result of metaContent.results) {
+    if (!("type" in result)) {
+      return DEFAULT_EMPTY
+    }
+
+    if (result.type === "paragraph") {
+      pushRichTextBlock(result.paragraph.rich_text, "paragraph")
+    }
+
+    if (result.type === "heading_1") {
+      // Notion heading_1 is rendered as h2 for this page.
+      pushRichTextBlock(result.heading_1.rich_text, "h2")
+    }
+
+    if (result.type === "heading_2") {
+      pushRichTextBlock(result.heading_2.rich_text, "h3")
+    }
+
+    if (result.type === "image") {
+      const url =
+        result.image.type === "external" ? result.image.external.url : result.image.file.url
+
+      const alt = result.image.caption.map((textBlock) => textBlock.plain_text).join("")
+
+      blocks.push({ alt, type: "image", url })
+    }
+
+    if (result.type === "code") {
+      const code = result.code.rich_text.map((textBlock) => textBlock.plain_text).join("")
+      if (code.length > 0) {
+        blocks.push({ code, language: result.code.language, type: "code" })
+      }
+    }
+
+    if (result.type === "bulleted_list_item") {
+      const text = result.bulleted_list_item.rich_text
+        .map((textBlock) => textBlock.plain_text)
+        .join("")
+      pushTab(text)
+    }
+
+    if (result.type === "numbered_list_item") {
+      const text = result.numbered_list_item.rich_text
+        .map((textBlock) => textBlock.plain_text)
+        .join("")
+      pushTab(text)
+    }
+
+    if (result.type === "child_page") {
+      pushTab(result.child_page.title)
+    }
+  }
+
+  return {
+    blocks,
+    createdTime: metaPage.created_time,
+    lastEditedTime: metaPage.last_edited_time,
+    tabs,
+    title,
+  }
+}
+
+// Map Notion rich text objects to the formatting fields consumed by components.
+function toNotionRichTextSegments(richText: NotionRichTextInput[]): NotionRichTextSegment[] {
+  return richText.map((textBlock) => ({
+    bold: textBlock.annotations.bold,
+    code: textBlock.annotations.code,
+    href: textBlock.href,
+    italic: textBlock.annotations.italic,
+    strikethrough: textBlock.annotations.strikethrough,
+    text: textBlock.plain_text,
+    underline: textBlock.annotations.underline,
+  }))
+}
+
+function toNotionTab(text: string): NotionTab | undefined {
+  const separatorIndex = text.indexOf("::")
+  if (separatorIndex === -1) {
+    return undefined
+  }
+
+  const label = text.slice(0, separatorIndex).trim()
+  const rawHref = text.slice(separatorIndex + 2).trim()
+  if (!label || !rawHref) {
+    return undefined
+  }
+
+  return {
+    href: toNotionTabHref(rawHref),
+    label,
+  }
+}
+
+function toNotionTabHref(rawHref: string): string {
+  if (rawHref.startsWith("/") || rawHref.startsWith("http://") || rawHref.startsWith("https://")) {
+    return rawHref
+  }
+
+  return `/${rawHref}`
+}

package/apps/web/components/sidebar-client.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import Link, { type LinkProps } from "next/link"
+import { usePathname } from "next/navigation"
+import type { NotionRichTextSegment } from "@/components/notion/notion"
+import { NotionRichTextSegments } from "@/components/notion/notion-rich-text-segments"
+
+interface SidebarClientProps {
+  sections: SidebarSection[]
+}
+
+interface SidebarSection {
+  labelSegments: NotionRichTextSegment[]
+  links: {
+    href: LinkProps<string>["href"]
+    label: string
+  }[]
+}
+
+export function SidebarClient(props: SidebarClientProps) {
+  const { sections } = props
+
+  const pathname = usePathname()
+
+  return (
+    <aside className="bg-bg-primary sticky top-64 left-0 flex h-[calc(100dvh-64px)] shrink-0 flex-col">
+      <div className="flex flex-col gap-y-16 overflow-y-auto px-24">
+        {sections.map((section, sectionIndex) => (
+          <div className="flex flex-col gap-y-8" key={sectionIndex}>
+            {section.labelSegments.length > 0 && (
+              <p className="text-text-primary text-14 font-500 leading-none">
+                <NotionRichTextSegments
+                  blockIndex={sectionIndex}
+                  segments={section.labelSegments}
+                />
+              </p>
+            )}
+
+            <div className="flex flex-col gap-y-4">
+              {section.links.map((link, linkIndex) => {
+                const isActive = pathname === link.href
+
+                return (
+                  <Link
+                    className="text-14 font-500 data-[is-active=true]:text-text-accent hover:text-text-primary ml-8 w-fit transition-colors"
+                    data-is-active={isActive}
+                    href={link.href}
+                    key={`${sectionIndex}-${linkIndex}`}
+                  >
+                    {link.label}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </aside>
+  )
+}

package/apps/web/components/sidebar-server.tsx

@@ -0,0 +1,185 @@
+import { cacheTag } from "next/cache"
+import type { LinkProps } from "next/link"
+import { notion, type NotionRichTextSegment } from "@/components/notion/notion"
+import { SidebarClient } from "@/components/sidebar-client"
+
+const PUBLIC_NOTION_PAGE_ID = "325b76f65e6e801ca464dc9b9e944fd0"
+
+type SidebarBlock = Awaited<ReturnType<typeof notion.blocks.children.list>>["results"][number]
+
+interface SidebarLink {
+  href: LinkProps<string>["href"]
+  label: string
+}
+
+interface SidebarRichTextItem {
+  annotations: {
+    bold: boolean
+    code: boolean
+    italic: boolean
+    strikethrough: boolean
+    underline: boolean
+  }
+  href: null | string
+  plain_text: string
+}
+
+interface SidebarSection {
+  labelSegments: NotionRichTextSegment[]
+  links: SidebarLink[]
+}
+
+export async function SidebarServer() {
+  const sections = await getSidebarSectionsFromNotion()
+  return <SidebarClient sections={sections} />
+}
+
+async function getSidebarBlocksFromNotionPage(cursor?: string): Promise<SidebarBlock[]> {
+  const blocks = await notion.blocks.children.list({
+    block_id: PUBLIC_NOTION_PAGE_ID,
+    start_cursor: cursor,
+  })
+
+  if (!blocks.has_more || !blocks.next_cursor) {
+    return blocks.results
+  }
+
+  const nextBlocks = await getSidebarBlocksFromNotionPage(blocks.next_cursor)
+  return [...blocks.results, ...nextBlocks]
+}
+
+async function getSidebarSectionsFromNotion(): Promise<SidebarSection[]> {
+  "use cache"
+
+  cacheTag("notion")
+  cacheTag("notion-sidebar")
+
+  try {
+    const blocks = await getSidebarBlocksFromNotionPage()
+    return toSidebarSections(blocks)
+  } catch {
+    return []
+  }
+}
+
+function toSidebarHref(rawHref: string): LinkProps<string>["href"] {
+  if (rawHref.startsWith("/") || rawHref.startsWith("http://") || rawHref.startsWith("https://")) {
+    return rawHref as LinkProps<string>["href"]
+  }
+
+  return `/${rawHref}` as LinkProps<string>["href"]
+}
+
+function toSidebarLabelSegments(result: SidebarBlock): NotionRichTextSegment[] | undefined {
+  if (!("type" in result)) {
+    return
+  }
+
+  let richText: SidebarRichTextItem[] | undefined = undefined
+
+  if (result.type === "paragraph") {
+    richText = result.paragraph.rich_text
+  }
+
+  if (result.type === "heading_1") {
+    richText = result.heading_1.rich_text
+  }
+
+  if (result.type === "heading_2") {
+    richText = result.heading_2.rich_text
+  }
+
+  if (result.type === "heading_3") {
+    richText = result.heading_3.rich_text
+  }
+
+  if (!richText || richText.every((textBlock) => textBlock.plain_text.trim().length === 0)) {
+    return
+  }
+
+  return toSidebarRichTextSegments(richText)
+}
+
+function toSidebarLink(text: string): SidebarLink | undefined {
+  const separatorIndex = text.indexOf("::")
+  if (separatorIndex === -1) {
+    return undefined
+  }
+
+  const label = text.slice(0, separatorIndex).trim()
+  const hrefValue = text.slice(separatorIndex + 2).trim()
+
+  if (!label || !hrefValue) {
+    return undefined
+  }
+
+  return {
+    href: toSidebarHref(hrefValue),
+    label,
+  }
+}
+
+function toSidebarLinkFromBlock(result: SidebarBlock): SidebarLink | undefined {
+  if (!("type" in result)) {
+    return
+  }
+
+  let richText: SidebarRichTextItem[] | undefined = undefined
+
+  if (result.type === "bulleted_list_item") {
+    richText = result.bulleted_list_item.rich_text
+  }
+
+  if (result.type === "numbered_list_item") {
+    richText = result.numbered_list_item.rich_text
+  }
+
+  if (!richText) {
+    return
+  }
+
+  const text = richText.map((textBlock) => textBlock.plain_text).join("")
+  return toSidebarLink(text)
+}
+
+function toSidebarRichTextSegments(richText: SidebarRichTextItem[]): NotionRichTextSegment[] {
+  return richText.map((textBlock) => ({
+    bold: textBlock.annotations.bold,
+    code: textBlock.annotations.code,
+    href: textBlock.href,
+    italic: textBlock.annotations.italic,
+    strikethrough: textBlock.annotations.strikethrough,
+    text: textBlock.plain_text,
+    underline: textBlock.annotations.underline,
+  }))
+}
+
+function toSidebarSections(blocks: SidebarBlock[]): SidebarSection[] {
+  const sections: SidebarSection[] = []
+  let currentSection: SidebarSection | undefined = undefined
+
+  for (const block of blocks) {
+    const labelSegments = toSidebarLabelSegments(block)
+    const link = toSidebarLinkFromBlock(block)
+
+    if (labelSegments) {
+      currentSection = {
+        labelSegments,
+        links: [],
+      }
+      sections.push(currentSection)
+    } else if (link) {
+      if (!currentSection) {
+        currentSection = {
+          labelSegments: [],
+          links: [],
+        }
+        sections.push(currentSection)
+      }
+
+      currentSection.links.push(link)
+    }
+  }
+
+  return sections.filter((section) => section.labelSegments.length > 0 || section.links.length > 0)
+}

package/apps/web/components/tooltip.tsx

@@ -0,0 +1,53 @@
+// oxlint-disable react/no-multi-comp
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react"
+import type { ComponentProps } from "react"
+
+function Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {
+  const { ...rest } = props
+
+  return <TooltipPrimitive.Root data-slot="tooltip" {...rest} />
+}
+
+function TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Popup>) {
+  const { children, ...rest } = props
+
+  return (
+    <TooltipPrimitive.Popup
+      className="rounded-8 bg-zinc-50 px-8 py-4"
+      data-slot="tooltip-content"
+      {...rest}
+    >
+      {children}
+    </TooltipPrimitive.Popup>
+  )
+}
+
+function TooltipPositioner(props: ComponentProps<typeof TooltipPrimitive.Positioner>) {
+  const { ...rest } = props
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        className="z-50"
+        data-slot="tooltip-positioner"
+        sideOffset={8}
+        {...rest}
+      />
+    </TooltipPrimitive.Portal>
+  )
+}
+
+function TooltipProvider(props: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  const { ...rest } = props
+
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...rest} />
+}
+
+function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  const { ...rest } = props
+
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...rest} />
+}
+
+export { Tooltip, TooltipContent, TooltipPositioner, TooltipProvider, TooltipTrigger }

package/apps/web/components/topbar.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link"
+import { Logo } from "@/components/logo"
+
+export function Topbar() {
+  return (
+    <header className="bg-gray-1/90 sticky top-0 left-0 z-10 flex h-64 w-full px-24 backdrop-blur-[48px]">
+      <div className="flex size-full items-center justify-between">
+        <Link className="-ml-8 flex items-center p-8 transition-opacity hover:opacity-75" href="/">
+          <Logo />
+        </Link>
+      </div>
+    </header>
+  )
+}

package/apps/web/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next"
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+  reactCompiler: true,
+  reactStrictMode: false,
+  typedRoutes: true,
+}
+
+export default nextConfig

package/apps/web/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "web",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev --port 3001",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@base-ui/react": "catalog:",
+    "@mdx-js/mdx": "3.1.1",
+    "@nattui/tailwind-colors": "0.0.8",
+    "@nattui/tailwind-exact": "0.0.5",
+    "@notionhq/client": "5.13.0",
+    "@pump-fun/icons-filled": "catalog:",
+    "@pump-fun/icons-line": "catalog:",
+    "@pump-fun/retail-design-system": "workspace:*",
+    "@use-gesture/react": "10.3.1",
+    "motion": "12.36.0",
+    "next": "16.1.6",
+    "nuqs": "2.8.9",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "sugar-high": "0.9.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.2.1",
+    "@types/node": "25.5.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "babel-plugin-react-compiler": "1.0.0",
+    "tailwindcss": "4.2.1",
+    "typescript": "catalog:"
+  },
+  "ignoreScripts": [
+    "sharp",
+    "unrs-resolver"
+  ],
+  "trustedDependencies": [
+    "sharp",
+    "unrs-resolver"
+  ]
+}

package/apps/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+}
+
+export default config

package/apps/web/public/pump-logomark.svg

@@ -0,0 +1,7 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8855 184.247C-2.01603 162.076 -3.41853 124.726 18.753 100.824L94.7609 18.8855C116.932 -5.01605 154.282 -6.41855 178.184 15.7529C202.085 37.9244 203.488 75.274 181.316 99.1756L105.308 181.115C83.1367 205.016 45.7871 206.419 21.8855 184.247Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.753 100.824C-3.41853 124.726 -2.01603 162.076 21.8855 184.247C45.7871 206.419 83.1367 205.016 105.308 181.115L145.81 137.452L59.2549 57.1621L18.753 100.824ZM40.6908 123.847C41.4209 122.946 41.2828 121.625 40.3824 120.895C39.482 120.165 38.1603 120.303 37.4302 121.203L34.9463 124.267C34.2162 125.167 34.3543 126.489 35.2547 127.219C36.1551 127.949 37.4768 127.811 38.2068 126.91L40.6908 123.847ZM34.5525 135.781C34.7653 134.641 34.014 133.545 32.8745 133.332C31.735 133.12 30.6388 133.871 30.4261 135.01C29.2814 141.142 29.7013 147.239 31.4916 152.718C31.8516 153.82 33.0367 154.421 34.1385 154.061C35.2404 153.701 35.8417 152.516 35.4816 151.414C33.9159 146.623 33.5335 141.24 34.5525 135.781ZM39.6257 160.27C38.8184 159.438 37.4897 159.418 36.6578 160.225C35.8259 161.032 35.8059 162.361 36.6131 163.193L40.0892 166.775C40.8964 167.607 42.2252 167.627 43.0571 166.82C43.889 166.013 43.909 164.684 43.1018 163.852L39.6257 160.27Z" fill="#5FCB88"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.06623 138.152C5.76813 147.035 10.7861 155.343 18.084 162.112C40.0735 182.51 74.4351 181.22 94.8329 159.23L161.563 87.2934C181.961 65.304 180.67 30.9424 158.681 10.5446C153.808 6.02469 148.328 2.56968 142.527 0.168847C155.378 1.14043 168.001 6.30744 178.184 15.7529C202.085 37.9244 203.488 75.274 181.316 99.1756L105.308 181.115C83.1367 205.016 45.7871 206.419 21.8855 184.247C8.6076 171.93 2.27306 154.929 3.06623 138.152Z" fill="#629393" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.341 130.232L174.776 93.1092C193.598 72.8194 192.407 41.1138 172.117 22.2927C151.827 3.47151 120.122 4.66206 101.301 24.9518L66.8651 62.0744L140.341 130.232ZM181.316 99.1756C203.488 75.274 202.085 37.9244 178.184 15.7529C154.282 -6.41855 116.932 -5.01605 94.7609 18.8855L54.259 62.5478L140.814 142.838L181.316 99.1756Z" fill="#1D3934"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.2927 106.891L60.7988 68.6141L54.259 62.5478L18.753 100.824C-3.41853 124.726 -2.01603 162.076 21.8855 184.247C45.7871 206.419 83.1367 205.016 105.308 181.115L140.814 142.838L134.275 136.771L98.7685 175.048C79.9473 195.338 48.2417 196.528 27.9519 177.707C7.66214 158.886 6.47158 127.181 25.2927 106.891Z" fill="#1D3934"/>
+</svg>

package/apps/web/styles/custom.css

@@ -0,0 +1,31 @@
+/* Disable transitions */
+.no-transitions * {
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+/* Disable scrolling */
+.no-overscroll {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+/* Highlight */
+::-moz-selection {
+  color: var(--color-zinc-950);
+  background: var(--color-bg-accent);
+}
+::selection {
+  color: var(--color-zinc-950);
+  background: var(--color-bg-accent);
+}
+
+/* Input date */
+input::-webkit-datetime-edit-day-field:focus,
+input::-webkit-datetime-edit-month-field:focus,
+input::-webkit-datetime-edit-year-field:focus {
+  color: var(--color-zinc-950);
+  background: var(--color-bg-accent);
+}

package/apps/web/styles/font.css

@@ -0,0 +1,8 @@
+@theme {
+  --font-\*: initial;
+  --font-display: var(--font-display);
+  --font-handwriting: var(--font-handwriting);
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+}

package/apps/web/styles/global.css

@@ -0,0 +1,5 @@
+/* Order matters */
+@import "./tailwind.css";
+@import "./tailwind-reset.css";
+@import "./custom.css";
+@import "./font.css";