@gallop.software/studio 1.5.9 → 2.0.0

package/src/components/R2SetupModal.tsx

@@ -0,0 +1,400 @@
+/** @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

@@ -0,0 +1,115 @@
+/** @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

@@ -0,0 +1,200 @@
+/** @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>
+  )
+}