Design system refresh: Tabs, Panel, neutral badges, squircles + blog polish

package.json

@@ -110,6 +110,7 @@
     "drizzle-orm": "^0.45.2",
     "encoding-sniffer": "^0.2.1",
     "esbuild-wasm": "0.27.4",
+    "figma-squircle": "^1.1.0",
     "gifenc": "^1.0.3",
     "gray-matter": "^4.0.3",
     "iconv-lite": "^0.7.2",

src/components/ApplicationStarter.tsx

@@ -18,11 +18,7 @@ import type {
   ApplicationStarterContext,
   ApplicationStarterResult,
 } from '~/utils/application-starter'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '~/components/Collapsible'
+import { Panel, PanelContent, PanelTrigger } from '~/components/Panel'
 import {
   GeneratedPromptPreviewBody,
   GeneratedPromptPreviewHeader,
@@ -868,8 +864,8 @@ export function ApplicationStarter({
                 ) : null}
               </div>
 
-              <Collapsible open={showOptionsSection}>
-                <CollapsibleContent className="mt-3">
+              <Panel open={showOptionsSection}>
+                <PanelContent className="mt-3">
                   {showOptionsSection ? (
                     <StarterTooltipProvider>
                       <div className="space-y-2 rounded-lg border border-gray-200 bg-white px-3 py-3 dark:border-gray-800 dark:bg-gray-950">
@@ -946,8 +942,8 @@ export function ApplicationStarter({
                       </div>
                     </StarterTooltipProvider>
                   ) : null}
-                </CollapsibleContent>
-              </Collapsible>
+                </PanelContent>
+              </Panel>
             </>
           ) : (
             <>
@@ -964,7 +960,11 @@ export function ApplicationStarter({
                   // focus glow (an absolute child at -z-10) bleed out from behind
                   // the card; the inner wrapper below re-clips the card content.
                   isHomeStarter &&
-                    'overflow-visible rounded-[36px] [corner-shape:squircle] dark:border-transparent dark:bg-[#171717]',
+                    'overflow-visible rounded-[36px] [corner-shape:squircle] transition-colors dark:border-transparent dark:bg-[#171717]',
+                  // Light: a subtle recessed fill at rest that brightens to white
+                  // on focus (no shadow). Dark keeps its #171717 fill.
+                  isHomeStarter &&
+                    (isPromptFocused ? 'bg-white' : 'bg-gray-50'),
                 )}
               >
                 {/* Home: a warm terracotta glow that grows in from behind the card
@@ -1108,9 +1108,11 @@ export function ApplicationStarter({
                     ) : null}
 
                     {/* Home: the hint sits lateral to the prompt text (top-right);
-                        once the user types, the gradient Go CTA replaces it. */}
+                        once the user types, the gradient Go CTA replaces it. The
+                        h-6 box matches the prompt's first line (leading-6 at top-6)
+                        so the hint text is vertically centered on that line. */}
                     {isHomeStarter ? (
-                      <div className="absolute right-6 top-5 flex items-center">
+                      <div className="absolute right-6 top-6 flex h-6 items-center">
                         {showActionSection ? (
                           <Button
                             variant="ghost"
@@ -1170,8 +1172,8 @@ export function ApplicationStarter({
                     ) : null}
                   </div>
 
-                  <Collapsible open={showOptionsSection}>
-                    <CollapsibleContent
+                  <Panel open={showOptionsSection}>
+                    <PanelContent
                       className={twMerge(
                         isHomeStarter &&
                           'duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
@@ -1317,11 +1319,11 @@ export function ApplicationStarter({
                           ) : null}
                         </div>
                       ) : null}
-                    </CollapsibleContent>
-                  </Collapsible>
+                    </PanelContent>
+                  </Panel>
 
-                  <Collapsible open={showStagedActionSection}>
-                    <CollapsibleContent
+                  <Panel open={showStagedActionSection}>
+                    <PanelContent
                       className={twMerge(
                         isHomeStarter &&
                           'duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
@@ -1514,8 +1516,8 @@ export function ApplicationStarter({
                           </div>
                         </div>
                       ) : null}
-                    </CollapsibleContent>
-                  </Collapsible>
+                    </PanelContent>
+                  </Panel>
 
                   {showPromptPreview && hasGeneratedPrompt ? (
                     <div className="border-t border-gray-200 dark:border-gray-800">
@@ -1571,9 +1573,9 @@ function StarterCustomizationSection({
   title: string
 }) {
   return (
-    <Collapsible open={open} onOpenChange={onOpenChange}>
+    <Panel open={open} onOpenChange={onOpenChange}>
       <div className={twMerge(compact ? 'pt-1' : 'pt-4')}>
-        <CollapsibleTrigger
+        <PanelTrigger
           className={twMerge(
             starterEyebrowClassName,
             'inline-flex appearance-none items-center gap-1 border-0 bg-transparent p-0 text-left transition-colors hover:text-text-secondary',
@@ -1586,9 +1588,9 @@ function StarterCustomizationSection({
               open && 'rotate-180',
             )}
           />
-        </CollapsibleTrigger>
-        <CollapsibleContent>{open ? children : null}</CollapsibleContent>
+        </PanelTrigger>
+        <PanelContent>{open ? children : null}</PanelContent>
       </div>
-    </Collapsible>
+    </Panel>
   )
 }