@gallop.software/studio 2.0.1 → 2.0.3

package/src/components/R2SetupModal.tsx

@@ -1,400 +0,0 @@
-/** @jsxImportSource @emotion/react */
-'use client'
-
-import { useState } from 'react'
-import { css } from '@emotion/react'
-import { colors, fontSize } from './tokens'
-
-const ENV_TEMPLATE = `CLOUDFLARE_R2_ACCOUNT_ID=your_account_id
-CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key
-CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_key
-CLOUDFLARE_R2_BUCKET_NAME=your_bucket_name
-CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev
-NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev`
-
-interface R2SetupModalProps {
-  isOpen: boolean
-  onClose: () => void
-}
-
-const styles = {
-  overlay: css`
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1100;
-    padding: 20px;
-  `,
-  modal: css`
-    background: ${colors.surface};
-    border-radius: 12px;
-    max-width: 560px;
-    width: 100%;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-  `,
-  header: css`
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 20px 24px;
-    border-bottom: 1px solid ${colors.border};
-  `,
-  icon: css`
-    width: 32px;
-    height: 32px;
-    color: ${colors.primary};
-    flex-shrink: 0;
-  `,
-  title: css`
-    font-size: ${fontSize.xl};
-    font-weight: 600;
-    color: ${colors.text};
-    margin: 0;
-  `,
-  closeBtn: css`
-    margin-left: auto;
-    background: none;
-    border: none;
-    padding: 4px;
-    cursor: pointer;
-    color: ${colors.textMuted};
-    border-radius: 4px;
-    
-    &:hover {
-      color: ${colors.text};
-      background: ${colors.surfaceHover};
-    }
-  `,
-  closeIcon: css`
-    width: 20px;
-    height: 20px;
-  `,
-  content: css`
-    padding: 24px;
-  `,
-  intro: css`
-    font-size: ${fontSize.base};
-    color: ${colors.textSecondary};
-    margin: 0 0 20px 0;
-    line-height: 1.6;
-  `,
-  steps: css`
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  `,
-  step: css`
-    display: flex;
-    gap: 12px;
-  `,
-  stepNumber: css`
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: ${colors.primaryLight};
-    color: ${colors.primary};
-    font-size: ${fontSize.sm};
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  `,
-  stepContent: css`
-    flex: 1;
-    padding-top: 3px;
-  `,
-  stepTitle: css`
-    font-size: ${fontSize.base};
-    font-weight: 500;
-    color: ${colors.text};
-    margin: 0 0 4px 0;
-  `,
-  stepDesc: css`
-    font-size: ${fontSize.sm};
-    color: ${colors.textSecondary};
-    margin: 0;
-    line-height: 1.5;
-  `,
-  link: css`
-    color: ${colors.primary};
-    text-decoration: none;
-    font-weight: 500;
-    
-    &:hover {
-      text-decoration: underline;
-    }
-  `,
-  envVarsWrapper: css`
-    position: relative;
-    margin-top: 20px;
-  `,
-  envVars: css`
-    background: ${colors.background};
-    border: 1px solid ${colors.border};
-    border-radius: 8px;
-    padding: 16px;
-    padding-right: 48px;
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-    font-size: 13px;
-    line-height: 1.8;
-    color: ${colors.text};
-    overflow-x: auto;
-  `,
-  envVar: css`
-    display: block;
-  `,
-  envKey: css`
-    color: ${colors.primary};
-  `,
-  envValue: css`
-    color: ${colors.textSecondary};
-  `,
-  copyBtn: css`
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${colors.surface};
-    border: 1px solid ${colors.border};
-    border-radius: 6px;
-    cursor: pointer;
-    color: ${colors.textMuted};
-    transition: all 0.15s ease;
-    
-    &:hover {
-      background: ${colors.surfaceHover};
-      color: ${colors.text};
-      border-color: #d0d5dd;
-    }
-  `,
-  copyIcon: css`
-    width: 16px;
-    height: 16px;
-  `,
-  copiedTooltip: css`
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    transform: translateY(-50%);
-    background: #1a1f36;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    margin-right: 6px;
-    pointer-events: none;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      right: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-left: 4px solid #1a1f36;
-      border-top: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-    }
-  `,
-  footer: css`
-    padding: 16px 24px;
-    border-top: 1px solid ${colors.border};
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-  `,
-  docsBtn: css`
-    padding: 10px 16px;
-    border-radius: 6px;
-    font-size: ${fontSize.base};
-    font-weight: 500;
-    border: 1px solid ${colors.border};
-    background: ${colors.surface};
-    color: ${colors.text};
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    transition: all 0.15s ease;
-    
-    &:hover {
-      background: ${colors.surfaceHover};
-      border-color: #d0d5dd;
-    }
-  `,
-  doneBtn: css`
-    padding: 10px 20px;
-    border-radius: 6px;
-    font-size: ${fontSize.base};
-    font-weight: 500;
-    border: none;
-    background: ${colors.primary};
-    color: white;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    
-    &:hover {
-      background: ${colors.primaryHover};
-    }
-  `,
-  externalIcon: css`
-    width: 14px;
-    height: 14px;
-  `,
-}
-
-export function R2SetupModal({ isOpen, onClose }: R2SetupModalProps) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(ENV_TEMPLATE)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (error) {
-      console.error('Failed to copy:', error)
-    }
-  }
-
-  if (!isOpen) return null
-
-  return (
-    <div css={styles.overlay} onClick={onClose}>
-      <div css={styles.modal} onClick={(e) => e.stopPropagation()}>
-        <div css={styles.header}>
-          <svg css={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-          </svg>
-          <h2 css={styles.title}>Set Up CDN Storage</h2>
-          <button css={styles.closeBtn} onClick={onClose}>
-            <svg css={styles.closeIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        <div css={styles.content}>
-          <p css={styles.intro}>
-            Sync your images to Cloudflare R2 for faster global delivery. R2 offers generous free tier with no egress fees.
-          </p>
-
-          <ol css={styles.steps}>
-            <li css={styles.step}>
-              <span css={styles.stepNumber}>1</span>
-              <div css={styles.stepContent}>
-                <h4 css={styles.stepTitle}>Create a Cloudflare account</h4>
-                <p css={styles.stepDesc}>
-                  Sign up at{' '}
-                  <a css={styles.link} href="https://dash.cloudflare.com/sign-up" target="_blank" rel="noopener noreferrer">
-                    dash.cloudflare.com
-                  </a>
-                  {' '}if you don't have one already.
-                </p>
-              </div>
-            </li>
-
-            <li css={styles.step}>
-              <span css={styles.stepNumber}>2</span>
-              <div css={styles.stepContent}>
-                <h4 css={styles.stepTitle}>Create an R2 bucket</h4>
-                <p css={styles.stepDesc}>
-                  Go to R2 in your Cloudflare dashboard and create a new bucket. Choose a name like <code>my-images</code>.
-                </p>
-              </div>
-            </li>
-
-            <li css={styles.step}>
-              <span css={styles.stepNumber}>3</span>
-              <div css={styles.stepContent}>
-                <h4 css={styles.stepTitle}>Enable public access</h4>
-                <p css={styles.stepDesc}>
-                  In bucket settings, enable "Public Access" and copy the public URL (e.g., <code>https://pub-xxx.r2.dev</code>).
-                </p>
-              </div>
-            </li>
-
-            <li css={styles.step}>
-              <span css={styles.stepNumber}>4</span>
-              <div css={styles.stepContent}>
-                <h4 css={styles.stepTitle}>Create API token</h4>
-                <p css={styles.stepDesc}>
-                  Go to R2 → Manage R2 API Tokens → Create API Token. Select "Object Read & Write" permissions for your bucket.
-                </p>
-              </div>
-            </li>
-
-            <li css={styles.step}>
-              <span css={styles.stepNumber}>5</span>
-              <div css={styles.stepContent}>
-                <h4 css={styles.stepTitle}>Add environment variables</h4>
-                <p css={styles.stepDesc}>
-                  Add these to your <code>.env.local</code> file:
-                </p>
-              </div>
-            </li>
-          </ol>
-
-          <div css={styles.envVarsWrapper}>
-            <div css={styles.envVars}>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>CLOUDFLARE_R2_ACCOUNT_ID</span>=<span css={styles.envValue}>your_account_id</span>
-              </span>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>CLOUDFLARE_R2_ACCESS_KEY_ID</span>=<span css={styles.envValue}>your_access_key</span>
-              </span>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>CLOUDFLARE_R2_SECRET_ACCESS_KEY</span>=<span css={styles.envValue}>your_secret_key</span>
-              </span>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>CLOUDFLARE_R2_BUCKET_NAME</span>=<span css={styles.envValue}>your_bucket_name</span>
-              </span>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>CLOUDFLARE_R2_PUBLIC_URL</span>=<span css={styles.envValue}>https://pub-xxx.r2.dev</span>
-              </span>
-              <span css={styles.envVar}>
-                <span css={styles.envKey}>NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL</span>=<span css={styles.envValue}>https://pub-xxx.r2.dev</span>
-              </span>
-            </div>
-            <button css={styles.copyBtn} onClick={handleCopy} title="Copy to clipboard">
-              {copied && <span css={styles.copiedTooltip}>Copied!</span>}
-              <svg css={styles.copyIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <div css={styles.footer}>
-          <a
-            css={styles.docsBtn}
-            href="https://developers.cloudflare.com/r2/get-started/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            R2 Documentation
-            <svg css={styles.externalIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-            </svg>
-          </a>
-          <button css={styles.doneBtn} onClick={onClose}>
-            Got it
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/StudioBreadcrumb.tsx

@@ -1,115 +0,0 @@
-/** @jsxImportSource @emotion/react */
-'use client'
-
-import { css } from '@emotion/react'
-import { useStudio } from './StudioContext'
-import { colors, fontSize } from './tokens'
-
-const styles = {
-  container: css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 24px;
-    background-color: ${colors.surface};
-    border-bottom: 1px solid ${colors.borderLight};
-  `,
-  backBtn: css`
-    padding: 6px;
-    background: ${colors.surface};
-    border: 1px solid ${colors.border};
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    &:hover {
-      background-color: ${colors.surfaceHover};
-      border-color: ${colors.borderHover};
-    }
-  `,
-  backIcon: css`
-    width: 16px;
-    height: 16px;
-    color: ${colors.textSecondary};
-  `,
-  nav: css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: ${fontSize.base};
-  `,
-  item: css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  `,
-  separator: css`
-    color: ${colors.textMuted};
-    margin: 0 2px;
-  `,
-  btn: css`
-    padding: 4px 8px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-size: ${fontSize.base};
-    letter-spacing: -0.01em;
-    
-    &:hover {
-      background-color: ${colors.surfaceHover};
-    }
-  `,
-  btnActive: css`
-    color: ${colors.text};
-    font-weight: 600;
-  `,
-  btnInactive: css`
-    color: ${colors.textSecondary};
-    
-    &:hover {
-      color: ${colors.text};
-    }
-  `,
-}
-
-export function StudioBreadcrumb() {
-  const { currentPath, setCurrentPath, navigateUp } = useStudio()
-
-  const parts = currentPath.split('/').filter(Boolean)
-
-  const handleClick = (index: number) => {
-    const newPath = parts.slice(0, index + 1).join('/')
-    setCurrentPath(newPath)
-  }
-
-  return (
-    <div css={styles.container}>
-      {currentPath !== 'public' && (
-        <button css={styles.backBtn} onClick={navigateUp} aria-label="Go back">
-          <svg css={styles.backIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-      )}
-
-      <nav css={styles.nav}>
-        {parts.map((part, index) => (
-          <span key={index} css={styles.item}>
-            {index > 0 && <span css={styles.separator}>/</span>}
-            <button
-              css={[styles.btn, index === parts.length - 1 ? styles.btnActive : styles.btnInactive]}
-              onClick={() => handleClick(index)}
-            >
-              {part}
-            </button>
-          </span>
-        ))}
-      </nav>
-    </div>
-  )
-}

package/src/components/StudioButton.tsx

@@ -1,200 +0,0 @@
-/** @jsxImportSource @emotion/react */
-'use client'
-
-import { useState, useEffect, lazy, Suspense } from 'react'
-import { css, keyframes } from '@emotion/react'
-import { colors, fontStack, fontSize, baseReset } from './tokens'
-
-// Lazy load the full Studio UI to avoid bundling in production
-const StudioUI = lazy(() => import('./StudioUI'))
-
-const spin = keyframes`
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const styles = {
-  button: css`
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 9998;
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    background: ${colors.primary};
-    color: white;
-    box-shadow: 0 4px 12px ${colors.shadowDark}, 0 1px 3px ${colors.shadow};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-family: ${fontStack};
-    
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px ${colors.shadowDark}, 0 2px 6px ${colors.shadow};
-      background: ${colors.primaryHover};
-    }
-    
-    &:active {
-      transform: translateY(0);
-    }
-  `,
-  buttonIcon: css`
-    width: 24px;
-    height: 24px;
-  `,
-  overlay: css`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9999;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-  `,
-  overlayHidden: css`
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  `,
-  backdrop: css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(26, 31, 54, 0.4);
-    backdrop-filter: blur(4px);
-  `,
-  modal: css`
-    ${baseReset}
-    position: absolute;
-    top: 24px;
-    right: 24px;
-    bottom: 24px;
-    left: 24px;
-    background-color: ${colors.surface};
-    border-radius: 12px;
-    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  `,
-  loading: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    background: ${colors.background};
-    font-family: ${fontStack};
-  `,
-  loadingContent: css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-  `,
-  spinner: css`
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 3px solid ${colors.border};
-    border-top-color: ${colors.primary};
-    animation: ${spin} 0.8s linear infinite;
-  `,
-  loadingText: css`
-    color: ${colors.textSecondary};
-    font-size: ${fontSize.base};
-    font-weight: 500;
-    margin: 0;
-    letter-spacing: -0.01em;
-  `,
-}
-
-/**
- * Floating button that opens the Studio modal.
- * Fixed position in bottom-right corner.
- * Only renders in development mode.
- */
-export function StudioButton() {
-  const [mounted, setMounted] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
-  const [hasBeenOpened, setHasBeenOpened] = useState(false)
-
-  // Only render on client to avoid hydration mismatch
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const handleOpen = () => {
-    setIsOpen(true)
-    setHasBeenOpened(true)
-  }
-
-  // Only render in development and on client
-  if (!mounted || process.env.NODE_ENV !== 'development') {
-    return null
-  }
-
-  return (
-    <>
-      {!isOpen && (
-        <button
-          css={styles.button}
-          onClick={handleOpen}
-          title="Open Studio"
-          aria-label="Open Studio media manager"
-        >
-          <ImageIcon />
-        </button>
-      )}
-
-      {/* Keep mounted once opened to preserve state */}
-      {hasBeenOpened && (
-        <div css={[styles.overlay, !isOpen && styles.overlayHidden]}>
-          <div css={styles.backdrop} onClick={() => setIsOpen(false)} />
-          <div css={styles.modal}>
-            <Suspense fallback={<LoadingState />}>
-              <StudioUI onClose={() => setIsOpen(false)} isVisible={isOpen} />
-            </Suspense>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-function ImageIcon() {
-  return (
-    <svg
-      css={styles.buttonIcon}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <polyline points="21 15 16 10 5 21" />
-    </svg>
-  )
-}
-
-function LoadingState() {
-  return (
-    <div css={styles.loading}>
-      <div css={styles.loadingContent}>
-        <div css={styles.spinner} />
-        <p css={styles.loadingText}>Loading Studio...</p>
-      </div>
-    </div>
-  )
-}