top 8 feature

package-lock.json

@@ -8,6 +8,7 @@
       "name": "plspace",
       "version": "0.1.0",
       "dependencies": {
+        "@ruffle-rs/ruffle": "^0.4.0-nightly.2026.7.7",
         "dompurify": "^3.4.12"
       },
       "devDependencies": {
@@ -723,6 +724,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@ruffle-rs/ruffle": {
+      "version": "0.4.0-nightly.2026.7.7",
+      "resolved": "https://registry.npmjs.org/@ruffle-rs/ruffle/-/ruffle-0.4.0-nightly.2026.7.7.tgz",
+      "integrity": "sha512-VrTxTCYWRaArk4gMi4EAIGAH36AlWphQNiIlwvj5DGjurXxRvl4tcm4QKwA4b3DekYVtOMQPoVZBuENGAQsNwg==",
+      "license": "(MIT OR Apache-2.0)"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "vitest": "^4.1.10"
   },
   "dependencies": {
+    "@ruffle-rs/ruffle": "^0.4.0-nightly.2026.7.7",
     "dompurify": "^3.4.12"
   }
 }

src/components/blog/Attachments.svelte

@@ -7,15 +7,20 @@
    * can mix flagged and unflagged media.
    */
   import type { CustomEmoji, MediaAttachment } from '$lib/api/types'
+  import type { RuffleLoader } from '$lib/ruffle'
+  import { isFlashAttachment } from '$lib/util/flash'
   import EmojiText from '../common/EmojiText.svelte'
+  import FlashAttachment from './FlashAttachment.svelte'
 
   interface Props {
     attachments: MediaAttachment[]
     emojis?: CustomEmoji[]
     sensitive?: boolean
+    /** Injectable so Flash rendering remains backend- and network-free in tests. */
+    loadRuffle?: RuffleLoader
   }
 
-  let { attachments, emojis, sensitive = false }: Props = $props()
+  let { attachments, emojis, sensitive = false, loadRuffle }: Props = $props()
 
   let revealed = $state<Record<string, boolean>>({})
 
@@ -49,7 +54,15 @@
         data-revealed={isRevealed(media.id) ? 'true' : 'false'}
       >
         <figure class="attachment-figure">
-          {#if media.type === 'video' || media.type === 'gifv'}
+          {#if isFlashAttachment(media)}
+            {#if isRevealed(media.id)}
+              <FlashAttachment {media} {loadRuffle} />
+            {:else}
+              <div class="attachment-media flash-sensitive-placeholder">
+                Sensitive Flash attachment
+              </div>
+            {/if}
+          {:else if media.type === 'video' || media.type === 'gifv'}
             <video
               class="attachment-media"
               src={videoPreviewUrl(media.url)}

src/components/blog/Attachments.test.ts

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/svelte'
+import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it } from 'vitest'
 import type { MediaAttachment } from '$lib/api/types'
 import Attachments from './Attachments.svelte'
@@ -40,3 +40,36 @@ describe('Attachments raw-video previews', () => {
     expect(element).toHaveAttribute('loop')
   })
 })
+
+describe('Attachments Flash support', () => {
+  const flash: MediaAttachment = {
+    id: 'flash-1',
+    type: 'unknown',
+    url: 'https://media.example.test/movie.swf?download=1',
+    preview_url: null,
+    pleroma: { mime_type: 'application/x-shockwave-flash' },
+  }
+
+  it('offers unknown SWF attachments through the lazy Ruffle player', () => {
+    const loadRuffle = async () => {
+      throw new Error('should remain inert')
+    }
+    const view = render(Attachments, { attachments: [flash], loadRuffle })
+
+    expect(view.getByRole('button', { name: /Play Flash attachment/i })).toBeInTheDocument()
+    expect(view.getByRole('link', { name: 'Download original SWF' })).toHaveAttribute(
+      'href',
+      flash.url,
+    )
+  })
+
+  it('does not expose a player control until sensitive Flash is revealed', async () => {
+    const view = render(Attachments, { attachments: [flash], sensitive: true })
+
+    expect(view.queryByRole('button', { name: /Play Flash attachment/i })).not.toBeInTheDocument()
+    expect(view.getByText('Sensitive Flash attachment')).toBeInTheDocument()
+
+    await fireEvent.click(view.getByRole('button', { name: 'Show sensitive media' }))
+    expect(view.getByRole('button', { name: /Play Flash attachment/i })).toBeInTheDocument()
+  })
+})

src/components/blog/Composer.svelte

@@ -9,8 +9,18 @@
   import { untrack } from 'svelte'
   import type { MediaAttachment, Status, StatusVisibility } from '$lib/api/types'
   import { useAppServices } from '$lib/app-services'
+  import { isFlashAttachment } from '$lib/util/flash'
   import QuoteCard from './QuoteCard.svelte'
 
+  const MEDIA_ACCEPT = [
+    'image/*',
+    'video/*',
+    'audio/*',
+    '.swf',
+    'application/x-shockwave-flash',
+    'application/vnd.adobe.flash.movie',
+  ].join(',')
+
   interface Props {
     /** Set to reply to an existing entry. */
     inReplyTo?: Status | null
@@ -310,7 +320,19 @@
       <ul class="composer-attachments">
         {#each attachments as media (media.id)}
           <li class="composer-attachment">
-            <img src={media.preview_url ?? media.url} alt={media.description ?? ''} />
+            {#if media.type === 'image' || ((media.type === 'video' || media.type === 'gifv') && media.preview_url)}
+              <img src={media.preview_url ?? media.url} alt={media.description ?? ''} />
+            {:else}
+              <span class="composer-attachment-preview">
+                {isFlashAttachment(media)
+                  ? 'Flash (.swf)'
+                  : media.type === 'audio'
+                    ? 'Audio'
+                    : media.type === 'video' || media.type === 'gifv'
+                      ? 'Video'
+                      : 'Attachment'}
+              </span>
+            {/if}
             <button
               type="button"
               class="button button--small"
@@ -382,11 +404,11 @@
 
     <div class="composer-toolbar">
       <label class="button button--small composer-upload">
-        {uploading ? 'Uploading…' : 'Add photo'}
+        {uploading ? 'Uploading…' : 'Add media'}
         <input
           class="visually-hidden"
           type="file"
-          accept="image/*,video/*,audio/*"
+          accept={MEDIA_ACCEPT}
           multiple
           disabled={uploading || showPoll || attachments.length >= maxAttachments}
           onchange={onFiles}

src/components/blog/Composer.test.ts

@@ -183,6 +183,41 @@ describe('Composer', () => {
     expect(postStatus.mock.calls[0][1].media_ids).toEqual(['pasted-media'])
   })
 
+  it('offers common media and SWF files and uploads an SWF unchanged', async () => {
+    const swf = new File(['flash bytes'], 'animation.swf', {
+      type: 'application/x-shockwave-flash',
+    })
+    const uploadMedia = vi.fn().mockResolvedValue({
+      id: 'flash-media',
+      type: 'unknown',
+      url: 'https://media.example/animation.swf',
+      preview_url: null,
+      description: null,
+      pleroma: { mime_type: 'application/x-shockwave-flash' },
+    })
+    const services = testServices({
+      session: session({ token: 'token', me: account(), signedIn: true }),
+      endpoints: { uploadMedia },
+    })
+    const view = render(Composer, {
+      context: new Map([[APP_SERVICES, services]]),
+    })
+    const picker = view.container.querySelector<HTMLInputElement>('input[type="file"]')
+
+    expect(view.getByText('Add media')).toBeInTheDocument()
+    expect(picker?.accept).toContain('image/*')
+    expect(picker?.accept).toContain('video/*')
+    expect(picker?.accept).toContain('.swf')
+    expect(picker?.accept).toContain('application/x-shockwave-flash')
+
+    await fireEvent.change(picker!, { target: { files: [swf] } })
+    await waitFor(() => expect(uploadMedia).toHaveBeenCalledOnce())
+
+    expect(uploadMedia.mock.calls[0][1]).toBe(swf)
+    expect(view.getByText('Flash (.swf)')).toBeInTheDocument()
+    expect(view.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+  })
+
   it('leaves ordinary text-only paste alone', async () => {
     const uploadMedia = vi.fn()
     const services = testServices({

src/components/blog/FlashAttachment.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import type { MediaAttachment } from '$lib/api/types'
+  import {
+    loadRuffle as defaultLoadRuffle,
+    type RuffleLoader,
+    type RufflePlayerElement,
+  } from '$lib/ruffle'
+  import { flashAspectRatio } from '$lib/util/flash'
+
+  interface Props {
+    media: MediaAttachment
+    loadRuffle?: RuffleLoader
+  }
+
+  let { media, loadRuffle = defaultLoadRuffle }: Props = $props()
+  let container = $state<HTMLDivElement | null>(null)
+  let player: RufflePlayerElement | null = null
+  let playerState = $state<'idle' | 'loading' | 'playing' | 'error'>('idle')
+  let generation = 0
+  const aspectRatio = $derived(flashAspectRatio(media))
+
+  async function play(): Promise<void> {
+    if (playerState === 'loading' || playerState === 'playing') return
+    const currentGeneration = ++generation
+    playerState = 'loading'
+
+    try {
+      const ruffle = await loadRuffle()
+      if (currentGeneration !== generation || !container) return
+
+      const next = ruffle.newest().createPlayer()
+      next.className = 'flash-player'
+      next.style.width = '100%'
+      next.style.height = '100%'
+      next.config = {
+        letterbox: 'on',
+        allowScriptAccess: false,
+        allowNetworking: 'internal',
+        openUrlMode: 'confirm',
+      }
+      container.replaceChildren(next)
+      player = next
+      await next.ruffle().load({
+        url: media.url,
+        autoplay: 'on',
+        letterbox: 'on',
+        allowScriptAccess: false,
+        allowNetworking: 'internal',
+        openUrlMode: 'confirm',
+      })
+      if (currentGeneration === generation) playerState = 'playing'
+    } catch {
+      if (currentGeneration === generation) {
+        player?.remove()
+        player = null
+        playerState = 'error'
+      }
+    }
+  }
+
+  function stop(): void {
+    generation += 1
+    player?.remove()
+    player = null
+    container?.replaceChildren()
+    playerState = 'idle'
+  }
+
+  onDestroy(stop)
+</script>
+
+<div class="flash-attachment" data-state={playerState} style={`--flash-aspect-ratio: ${aspectRatio}`}>
+  <div class="flash-player-container" bind:this={container} hidden={playerState !== 'playing'}></div>
+
+  {#if playerState !== 'playing'}
+    <button
+      type="button"
+      class="flash-placeholder"
+      disabled={playerState === 'loading'}
+      onclick={() => void play()}
+    >
+      {#if playerState === 'loading'}
+        <strong>Loading Flash&hellip;</strong>
+      {:else if playerState === 'error'}
+        <strong>Flash content could not be loaded. Click to retry.</strong>
+      {:else}
+        <strong>Play Flash attachment with Ruffle</strong>
+        <span>Experimental: Flash content is arbitrary code. Only play attachments you trust.</span>
+      {/if}
+    </button>
+  {:else}
+    <button type="button" class="button button--small flash-stop" onclick={stop}>
+      Stop Flash player
+    </button>
+  {/if}
+
+  <a class="flash-download" href={media.url} target="_blank" rel="noopener noreferrer">
+    Download original SWF
+  </a>
+</div>

src/components/blog/FlashAttachment.test.ts

@@ -0,0 +1,64 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+import type { MediaAttachment } from '$lib/api/types'
+import type { RufflePlayerElement } from '$lib/ruffle'
+import FlashAttachment from './FlashAttachment.svelte'
+
+const media: MediaAttachment = {
+  id: 'flash-1',
+  type: 'unknown',
+  url: 'https://media.example.test/movie.swf',
+  preview_url: null,
+  description: 'A Flash movie',
+  meta: { original: { width: 640, height: 480 } },
+}
+
+describe('FlashAttachment', () => {
+  it('stays inert until clicked, loads securely through Ruffle, and can be stopped', async () => {
+    const load = vi.fn().mockResolvedValue(undefined)
+    const player = document.createElement('ruffle-player') as RufflePlayerElement
+    player.config = {}
+    player.ruffle = () => ({ load })
+    const createPlayer = vi.fn(() => player)
+    const loadRuffle = vi.fn().mockResolvedValue({
+      newest: () => ({ createPlayer }),
+    })
+    const view = render(FlashAttachment, { media, loadRuffle })
+
+    expect(loadRuffle).not.toHaveBeenCalled()
+    expect(view.getByText(/arbitrary code/i)).toBeInTheDocument()
+
+    await fireEvent.click(view.getByRole('button', { name: /Play Flash attachment/i }))
+    await waitFor(() => expect(load).toHaveBeenCalled())
+
+    expect(createPlayer).toHaveBeenCalledOnce()
+    expect(player.config).toMatchObject({
+      allowScriptAccess: false,
+      allowNetworking: 'internal',
+      openUrlMode: 'confirm',
+    })
+    expect(load).toHaveBeenCalledWith({
+      url: media.url,
+      autoplay: 'on',
+      letterbox: 'on',
+      allowScriptAccess: false,
+      allowNetworking: 'internal',
+      openUrlMode: 'confirm',
+    })
+    expect(view.container.querySelector('ruffle-player')).toBeInTheDocument()
+
+    await fireEvent.click(view.getByRole('button', { name: 'Stop Flash player' }))
+    expect(view.container.querySelector('ruffle-player')).not.toBeInTheDocument()
+    expect(view.getByRole('button', { name: /Play Flash attachment/i })).toBeInTheDocument()
+  })
+
+  it('shows a retry action after the runtime fails', async () => {
+    const loadRuffle = vi.fn().mockRejectedValue(new Error('no wasm'))
+    const view = render(FlashAttachment, { media, loadRuffle })
+
+    await fireEvent.click(view.getByRole('button', { name: /Play Flash attachment/i }))
+    expect(
+      await view.findByRole('button', { name: /could not be loaded.*retry/i }),
+    ).toBeInTheDocument()
+  })
+})

src/components/profile/PublicProfileEditor.svelte

@@ -4,11 +4,19 @@
    * in a separate settings editor.
    */
   import { untrack } from 'svelte'
-  import type { CredentialAccount } from '$lib/api/types'
+  import type { Account, CredentialAccount } from '$lib/api/types'
   import { isEgregoros, publicProfileCapabilities } from '$lib/api/capabilities'
   import { useAppServices } from '$lib/app-services'
   import { profileFieldLimits } from '$lib/stores/theme.svelte'
   import { toPlainText } from '$lib/util/html'
+  import { fullHandle } from '$lib/util/profile'
+  import { instanceDomain } from '$lib/api/endpoints'
+  import {
+    parseTopEightText,
+    profileBioLimit,
+    TOP_EIGHT_MAX,
+    withTopEight,
+  } from '$lib/util/top-eight'
 
   interface EditableField {
     id: number
@@ -40,8 +48,14 @@
   }
 
   const initial = untrack(() => session.me)
+  const initialBio = parseTopEightText(initial?.source?.note ?? toPlainText(initial?.note ?? ''))
   let displayName = $state(initial?.display_name ?? '')
-  let note = $state(initial?.source?.note ?? toPlainText(initial?.note ?? ''))
+  let note = $state(initialBio.bio)
+  let topEightHandles = $state<string[]>(initialBio.handles)
+  let topEightQuery = $state('')
+  let topEightResults = $state<Account[]>([])
+  let topEightSearching = $state(false)
+  let topEightSearchError = $state<string | null>(null)
   let fields = $state<EditableField[]>(publicFields(initial))
   let actorType = $state<'Person' | 'Service' | 'Group'>(
     initial?.source?.pleroma?.actor_type ?? (initial?.bot ? 'Service' : 'Person'),
@@ -69,6 +83,12 @@
   const isEgregorosServer = $derived(isEgregoros(session.instance))
   const capabilities = $derived(publicProfileCapabilities(session.instance))
   const limits = $derived(profileFieldLimits(session.instance))
+  const bioLimit = $derived(profileBioLimit(session.instance))
+  const savedNote = $derived(withTopEight(note, topEightHandles))
+  const bioCharactersLeft = $derived(bioLimit.value - savedNote.length)
+  const topEightAvailable = $derived(
+    topEightHandles.length > 0 || bioLimit.value - note.length >= 30,
+  )
   const reservedFields = $derived(internalFields(session.me).length)
   const availablePublicFields = $derived(
     capabilities.fields ? Math.max(0, limits.maxFields - reservedFields) : 0,
@@ -82,7 +102,12 @@
             field.name.length <= limits.nameLength && field.value.length <= limits.valueLength,
         )),
   )
-  const canSave = $derived(Boolean(displayName.trim()) && fieldsValid && !busy)
+  const canSave = $derived(
+    Boolean(displayName.trim()) &&
+      fieldsValid &&
+      (bioLimit.estimated || bioCharactersLeft >= 0) &&
+      !busy,
+  )
 
   function addField(): void {
     if (!canAddField) return
@@ -93,6 +118,49 @@
     fields = fields.filter((field) => field.id !== id)
   }
 
+  async function searchTopEight(): Promise<void> {
+    const query = topEightQuery.trim()
+    if (!query || topEightSearching) return
+    topEightSearching = true
+    topEightSearchError = null
+    try {
+      const found = await endpoints.search(session.api, query, { type: 'accounts', limit: 5 })
+      topEightResults = found.accounts.filter(
+        (candidate) => !topEightHandles.some(
+          (handle) => handle.toLowerCase() === fullHandle(candidate, instanceDomain(session.instance, session.host)).toLowerCase(),
+        ),
+      )
+      if (topEightResults.length === 0) topEightSearchError = 'No matching people found.'
+    } catch (cause) {
+      topEightSearchError = cause instanceof Error ? cause.message : 'Could not search for that person.'
+    } finally {
+      topEightSearching = false
+    }
+  }
+
+  function addTopEight(candidate: Account): void {
+    if (topEightHandles.length >= TOP_EIGHT_MAX) return
+    const handle = fullHandle(candidate, instanceDomain(session.instance, session.host))
+    if (!topEightHandles.some((item) => item.toLowerCase() === handle.toLowerCase())) {
+      topEightHandles = [...topEightHandles, handle]
+    }
+    topEightQuery = ''
+    topEightResults = []
+    topEightSearchError = null
+  }
+
+  function removeTopEight(index: number): void {
+    topEightHandles = topEightHandles.filter((_, itemIndex) => itemIndex !== index)
+  }
+
+  function moveTopEight(index: number, direction: -1 | 1): void {
+    const destination = index + direction
+    if (destination < 0 || destination >= topEightHandles.length) return
+    const reordered = [...topEightHandles]
+    ;[reordered[index], reordered[destination]] = [reordered[destination], reordered[index]]
+    topEightHandles = reordered
+  }
+
   function chooseImage(
     kind: 'avatar' | 'header' | 'background',
     event: Event,
@@ -118,8 +186,12 @@
   }
 
   function resetFrom(account: CredentialAccount): void {
+    const parsedBio = parseTopEightText(account.source?.note ?? toPlainText(account.note))
     displayName = account.display_name
-    note = account.source?.note ?? toPlainText(account.note)
+    note = parsedBio.bio
+    topEightHandles = parsedBio.handles
+    topEightQuery = ''
+    topEightResults = []
     fields = publicFields(account)
     actorType = account.source?.pleroma?.actor_type ?? (account.bot ? 'Service' : 'Person')
     birthday = account.pleroma?.birthday ?? ''
@@ -154,7 +226,7 @@
         : []
       const updated = await endpoints.updatePublicProfile(session.api, {
         displayName: displayName.trim(),
-        note,
+        note: savedNote,
         fields: capabilities.fields ? [...visible, ...hidden] : undefined,
         avatar: capabilities.avatar ? imageValue(avatarMode, avatarFile) : undefined,
         header: capabilities.header ? imageValue(headerMode, headerFile) : undefined,
@@ -208,9 +280,84 @@
     <div class="field">
       <label class="field-label" for="profile-bio">About me / bio</label>
       <textarea id="profile-bio" class="field-input profile-editor-bio" bind:value={note} rows="7"></textarea>
-      <p class="field-hint">Your server may support plain text, Markdown or other formatting here.</p>
+      <p class="field-hint">
+        Your server may support plain text, Markdown or other formatting here.
+        {savedNote.length.toLocaleString()} of about {bioLimit.value.toLocaleString()} characters used{bioLimit.estimated ? ' (estimated)' : ''}.
+      </p>
     </div>
 
+    {#if topEightAvailable}
+      <fieldset class="profile-editor-top-eight">
+        <legend>My Top 8</legend>
+        <p class="field-hint">
+          plspace stores this as a readable <code>My top 8:</code> section in your public bio.
+          Other clients will see the list as text; plspace visitors get the full picture grid.
+          Saving this form preserves your published CSS fields.
+          {#if reservedFields > 0}
+            Your plspace CSS currently uses {reservedFields} of {limits.maxFields} profile-field slots,
+            but it does not consume bio characters.
+          {/if}
+        </p>
+
+        {#if topEightHandles.length > 0}
+          <ol class="top-eight-editor-list">
+            {#each topEightHandles as handle, index (handle)}
+              <li>
+                <code>{handle}</code>
+                <span class="top-eight-editor-actions">
+                  <button type="button" class="button button--small" aria-label={`Move ${handle} up`} disabled={index === 0} onclick={() => moveTopEight(index, -1)}>Up</button>
+                  <button type="button" class="button button--small" aria-label={`Move ${handle} down`} disabled={index === topEightHandles.length - 1} onclick={() => moveTopEight(index, 1)}>Down</button>
+                  <button type="button" class="button button--small" aria-label={`Remove ${handle} from Top 8`} onclick={() => removeTopEight(index)}>Remove</button>
+                </span>
+              </li>
+            {/each}
+          </ol>
+        {:else}
+          <p class="empty-note">You have not picked a Top 8 yet.</p>
+        {/if}
+
+        {#if topEightHandles.length < TOP_EIGHT_MAX}
+          <div class="top-eight-search">
+            <label class="visually-hidden" for="top-eight-search">Find someone for your Top 8</label>
+            <input id="top-eight-search" class="field-input" type="search" bind:value={topEightQuery} placeholder="@friend@server.example" />
+            <button type="button" class="button" disabled={topEightSearching || !topEightQuery.trim()} onclick={() => void searchTopEight()}>{topEightSearching ? 'Finding…' : 'Find person'}</button>
+          </div>
+          {#if topEightSearchError}<p class="error-note" role="alert">{topEightSearchError}</p>{/if}
+          {#if topEightResults.length > 0}
+            <ul class="top-eight-search-results">
+              {#each topEightResults as candidate (candidate.id)}
+                <li>
+                  <button type="button" class="top-eight-result" onclick={() => addTopEight(candidate)}>
+                    <img src={candidate.avatar_static || candidate.avatar} alt="" />
+                    <span><strong>{candidate.display_name || candidate.username}</strong><br /><code>{fullHandle(candidate, instanceDomain(session.instance, session.host))}</code></span>
+                    <span>Add</span>
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+
+        <p class:field-error={bioCharactersLeft < 0} class="field-hint">
+          {topEightHandles.length} of {TOP_EIGHT_MAX} selected.
+          {#if bioCharactersLeft >= 0}
+            About {bioCharactersLeft.toLocaleString()} bio characters remain.
+          {:else}
+            {#if bioLimit.estimated}
+              This is about {Math.abs(bioCharactersLeft).toLocaleString()} characters over plspace's estimate;
+              your server will make the final decision when you save.
+            {:else}
+              Shorten your bio or Top 8 by {Math.abs(bioCharactersLeft).toLocaleString()} characters before saving.
+            {/if}
+          {/if}
+        </p>
+      </fieldset>
+    {:else}
+      <p class="notice">
+        Top 8 editing is unavailable because your existing bio leaves too little room under this server's estimated profile limit.
+      </p>
+    {/if}
+
     <fieldset class="profile-editor-images">
       <legend>Profile images</legend>
 

src/components/profile/PublicProfileEditor.test.ts

@@ -136,6 +136,41 @@ describe('PublicProfileEditor', () => {
     expect(await view.findByText('Your public profile was updated.')).toBeInTheDocument()
   })
 
+  it('searches for Top 8 people and stores the portable list in the bio', async () => {
+    const me = credential()
+    const candidate = account({
+      id: 'friend',
+      username: 'friend',
+      acct: 'friend@remote.test',
+      display_name: 'Best Friend',
+      avatar_static: 'https://media.example/friend.png',
+    })
+    const search = vi.fn().mockResolvedValue({ accounts: [candidate], statuses: [], hashtags: [] })
+    const updatePublicProfile = vi.fn(async (_api, update: PublicProfileUpdate) => ({
+      ...me,
+      source: { ...me.source!, note: update.note ?? '', fields: update.fields ?? me.source!.fields },
+    }))
+    const services = testServices({
+      session: session({ token: 'token', me, signedIn: true }),
+      endpoints: { search, updatePublicProfile },
+    })
+    const view = render(PublicProfileEditor, {
+      context: new Map([[APP_SERVICES, services]]),
+    })
+
+    await fireEvent.input(view.getByLabelText('Find someone for your Top 8'), {
+      target: { value: '@friend@remote.test' },
+    })
+    await fireEvent.click(view.getByRole('button', { name: 'Find person' }))
+    await fireEvent.click(await view.findByRole('button', { name: /Best Friend/ }))
+    await fireEvent.click(view.getByRole('button', { name: 'Save public profile' }))
+
+    await waitFor(() => expect(updatePublicProfile).toHaveBeenCalledOnce())
+    expect(updatePublicProfile.mock.calls[0][1].note).toBe(
+      'Old bio\n\nMy top 8:\n1. @friend@remote.test',
+    )
+  })
+
   it('shows and submits only the profile fields Egregoros exposes through its API', async () => {
     const me = credential()
     const updatePublicProfile = vi.fn().mockResolvedValue(me)

src/components/profile/TopEightSpace.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Account, CustomEmoji } from '$lib/api/types'
+  import { displayNameOf, profilePath } from '$lib/util/profile'
+  import Module from '../common/Module.svelte'
+  import Avatar from '../common/Avatar.svelte'
+  import EmojiText from '../common/EmojiText.svelte'
+
+  interface Props {
+    ownerName: string
+    ownerEmojis?: CustomEmoji[]
+    accounts: Account[]
+    viewAllHref: string
+    missing?: string[]
+    loading?: boolean
+  }
+
+  let {
+    ownerName,
+    ownerEmojis,
+    accounts,
+    viewAllHref,
+    missing = [],
+    loading = false,
+  }: Props = $props()
+</script>
+
+<Module title={`${ownerName}'s Top 8`} titleEmojis={ownerEmojis} variant="band" class="top-eight-space">
+  {#if loading && accounts.length === 0}
+    <p class="loading-note">Putting the Top 8 together&hellip;</p>
+  {:else}
+    <ul class="friend-grid friend-grid--compact top-eight-grid">
+      {#each accounts as friend (friend.id)}
+        <li class="friend-card" data-account={friend.acct}>
+          <a class="friend-card-link" href={profilePath(friend)}>
+            <EmojiText class="friend-card-name" text={displayNameOf(friend)} emojis={friend.emojis} />
+            <Avatar account={friend} plain size="friend" class="friend-card-photo" />
+          </a>
+        </li>
+      {/each}
+    </ul>
+    {#if missing.length > 0}
+      <p class="top-eight-missing muted">
+        Could not find {missing.join(', ')} from this server.
+      </p>
+    {/if}
+  {/if}
+
+  <p class="top-eight-view-all">
+    <a href={viewAllHref}>View All of <EmojiText text={ownerName} emojis={ownerEmojis} />'s Friends</a>
+  </p>
+</Module>

src/lib/api/endpoints.test.ts

@@ -5,6 +5,7 @@ import {
   fetchQuotes,
   postStatus,
   setEmojiReaction,
+  uploadMedia,
   updateProfileFields,
   updatePublicProfile,
   votePoll,
@@ -97,6 +98,39 @@ describe('updatePublicProfile', () => {
   })
 })
 
+describe('media uploads', () => {
+  it('preserves an SWF file and its MIME type in the multipart upload', async () => {
+    const swf = new File(['flash bytes'], 'animation.swf', {
+      type: 'application/x-shockwave-flash',
+    })
+    const fetchMock = vi.fn(async (_url: string, init?: RequestInit) => {
+      const form = init?.body as FormData
+      expect(init?.method).toBe('POST')
+      expect(form.get('file')).toBe(swf)
+      expect((form.get('file') as File).name).toBe('animation.swf')
+      expect((form.get('file') as File).type).toBe('application/x-shockwave-flash')
+      return new Response(
+        JSON.stringify({
+          id: 'flash-1',
+          type: 'unknown',
+          url: 'https://media.example.test/animation.swf',
+          preview_url: null,
+          pleroma: { mime_type: 'application/x-shockwave-flash' },
+        }),
+        { status: 200, headers: { 'Content-Type': 'application/json' } },
+      )
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await uploadMedia(new ApiClient('example.test', 'token'), swf)
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://example.test/api/v1/media',
+      expect.any(Object),
+    )
+  })
+})
+
 describe('poll endpoints', () => {
   it('submits selected poll option indexes as JSON', async () => {
     const fetchMock = vi.fn(async (_url: string, init?: RequestInit) => {

src/lib/api/types.ts

@@ -110,7 +110,7 @@ export interface CredentialAccount extends Account {
 
 export interface MediaAttachment {
   id: string
-  type: 'unknown' | 'image' | 'gifv' | 'video' | 'audio'
+  type: 'unknown' | 'image' | 'gifv' | 'video' | 'audio' | 'flash'
   url: string
   preview_url: string | null
   remote_url?: string | null
@@ -121,6 +121,12 @@ export interface MediaAttachment {
     small?: { width?: number; height?: number; aspect?: number }
     [key: string]: unknown
   }
+  /** Pleroma/Akkoma preserve the original attachment MIME type here. */
+  pleroma?: {
+    mime_type?: string | null
+    name?: string | null
+    [key: string]: unknown
+  }
 }
 
 export interface StatusMention {
@@ -344,6 +350,8 @@ export interface InstanceInfo {
     }
     accounts?: {
       max_profile_fields?: number
+      /** Mastodon 4.6+ bio limit. */
+      max_note_length?: number
       /** Pleroma v2 names. */
       profile_field_name_limit?: number
       profile_field_value_limit?: number

src/lib/ruffle.ts

@@ -0,0 +1,78 @@
+export interface RufflePlayerApi {
+  load(options: RuffleLoadOptions | string): Promise<void>
+}
+
+export interface RuffleLoadOptions {
+  url: string
+  autoplay?: 'on' | 'off' | 'auto'
+  letterbox?: 'on' | 'off' | 'fullscreen'
+  allowScriptAccess?: boolean
+  allowNetworking?: 'all' | 'internal' | 'none'
+  openUrlMode?: 'allow' | 'confirm' | 'deny'
+}
+
+export interface RufflePlayerElement extends HTMLElement {
+  config: Partial<RuffleLoadOptions>
+  ruffle(version?: 1): RufflePlayerApi
+}
+
+export interface RuffleSource {
+  createPlayer(): RufflePlayerElement
+}
+
+export interface RufflePublicApi {
+  config?: Record<string, unknown>
+  newest(): RuffleSource
+}
+
+export type RuffleLoader = () => Promise<RufflePublicApi>
+
+declare global {
+  interface Window {
+    RufflePlayer?: Partial<RufflePublicApi>
+  }
+}
+
+let loading: Promise<RufflePublicApi> | null = null
+
+function installedRuffle(): RufflePublicApi | null {
+  return typeof window.RufflePlayer?.newest === 'function'
+    ? (window.RufflePlayer as RufflePublicApi)
+    : null
+}
+
+/** Lazy-load the bundled self-hosted runtime once for every Flash attachment. */
+export const loadRuffle: RuffleLoader = async () => {
+  const installed = installedRuffle()
+  if (installed) return installed
+  if (loading) return loading
+
+  loading = new Promise<RufflePublicApi>((resolve, reject) => {
+    const publicPath = new URL(`${import.meta.env.BASE_URL}ruffle/`, document.baseURI).href
+    window.RufflePlayer = {
+      ...(window.RufflePlayer ?? {}),
+      config: {
+        ...(window.RufflePlayer?.config ?? {}),
+        polyfills: false,
+        publicPath,
+      },
+    }
+
+    const script = document.createElement('script')
+    script.src = new URL('ruffle.js', publicPath).href
+    script.async = true
+    script.dataset.plspaceRuffle = 'true'
+    script.onload = () => {
+      const api = installedRuffle()
+      if (api) resolve(api)
+      else reject(new Error('Ruffle loaded without installing its player API.'))
+    }
+    script.onerror = () => reject(new Error('Could not load the bundled Ruffle runtime.'))
+    document.head.appendChild(script)
+  }).catch((cause) => {
+    loading = null
+    throw cause
+  })
+
+  return loading
+}

src/lib/util/flash.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import type { MediaAttachment } from '$lib/api/types'
+import { flashAspectRatio, isFlashAttachment } from './flash'
+
+function attachment(overrides: Partial<MediaAttachment> = {}): MediaAttachment {
+  return {
+    id: 'file-1',
+    type: 'unknown',
+    url: 'https://media.example.test/file.bin',
+    preview_url: null,
+    ...overrides,
+  }
+}
+
+describe('Flash attachment detection', () => {
+  it('recognizes Pleroma MIME metadata and explicit Flash types', () => {
+    expect(
+      isFlashAttachment(
+        attachment({ pleroma: { mime_type: 'application/x-shockwave-flash' } }),
+      ),
+    ).toBe(true)
+    expect(isFlashAttachment(attachment({ type: 'flash' }))).toBe(true)
+  })
+
+  it('recognizes case-insensitive SWF paths despite query strings or fragments', () => {
+    expect(
+      isFlashAttachment(
+        attachment({ url: 'https://media.example.test/games/MOVIE.SWF?download=1#play' }),
+      ),
+    ).toBe(true)
+    expect(
+      isFlashAttachment(attachment({ url: 'https://media.example.test/movie.swf.png' })),
+    ).toBe(false)
+  })
+
+  it('uses bounded intrinsic dimensions and a safe fallback', () => {
+    expect(
+      flashAspectRatio(
+        attachment({ meta: { original: { width: 1920, height: 1080 } } }),
+      ),
+    ).toBeCloseTo(16 / 9)
+    expect(
+      flashAspectRatio(attachment({ meta: { original: { width: 10000, height: 1 } } })),
+    ).toBeCloseTo(4 / 3)
+  })
+})

src/lib/util/flash.ts

@@ -0,0 +1,25 @@
+import type { MediaAttachment } from '../api/types'
+
+/** Detect Pleroma's Flash MIME extension and Mastodon-compatible `.swf` URLs. */
+export function isFlashAttachment(media: MediaAttachment): boolean {
+  if (media.type === 'flash') return true
+  if (/flash/i.test(media.pleroma?.mime_type ?? '')) return true
+
+  for (const value of [media.url, media.remote_url]) {
+    if (!value) continue
+    try {
+      if (/\.swf$/i.test(new URL(value, window.location.href).pathname)) return true
+    } catch {
+      if (/\.swf(?:[?#]|$)/i.test(value)) return true
+    }
+  }
+  return false
+}
+
+/** Use trustworthy server dimensions, while preventing pathological layouts. */
+export function flashAspectRatio(media: MediaAttachment): number {
+  const width = media.meta?.original?.width
+  const height = media.meta?.original?.height
+  const ratio = width && height ? width / height : Number.NaN
+  return Number.isFinite(ratio) && ratio >= 0.25 && ratio <= 4 ? ratio : 4 / 3
+}

src/lib/util/profile.ts

@@ -15,6 +15,7 @@
 
 import type { Account } from '../api/types'
 import { renderHtml, toPlainText } from './html'
+import { topEightFromHtml } from './top-eight'
 
 /** The interest rows a MySpace profile shipped with, in their original order. */
 export const INTEREST_ROWS = ['General', 'Music', 'Movies', 'Television', 'Books', 'Heroes'] as const
@@ -70,6 +71,8 @@ export interface ProfileView {
   about: string
   /** "Who I'd like to meet" blurb, sanitized HTML. Empty when the user wrote none. */
   wantsToMeet: string
+  /** Fully-qualified handles declared in the portable bio section. */
+  topEightHandles: string[]
   interests: InterestEntry[]
   details: ProfileField[]
 }
@@ -124,7 +127,9 @@ export function fallbackMood(seed: string): string {
 }
 
 export function buildProfileView(account: Account): ProfileView {
-  const noteHtml = renderHtml(account.note, { emojis: account.emojis })
+  const renderedNote = renderHtml(account.note, { emojis: account.emojis })
+  const topEight = topEightFromHtml(renderedNote)
+  const noteHtml = topEight.html
   const { about, meet } = splitBio(noteHtml)
 
   const interests: InterestEntry[] = []
@@ -155,7 +160,7 @@ export function buildProfileView(account: Account): ProfileView {
   interests.sort((a, b) => INTEREST_ROWS.indexOf(a.row) - INTEREST_ROWS.indexOf(b.row))
 
   const headlineField = findField(account, ['headline', 'status'])
-  const headline = headlineField ?? firstSentence(toPlainText(account.note)) ?? '"..."'
+  const headline = headlineField ?? firstSentence(toPlainText(noteHtml)) ?? '"..."'
 
   const ageField = findField(account, ['age'])
   const parsedAge = ageField ? Number.parseInt(ageField, 10) : Number.NaN
@@ -169,6 +174,7 @@ export function buildProfileView(account: Account): ProfileView {
     age: Number.isFinite(parsedAge) ? parsedAge : null,
     about,
     wantsToMeet: meet,
+    topEightHandles: topEight.handles,
     interests,
     details,
   }

src/lib/util/top-eight.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { parseTopEightText, topEightFromHtml, withTopEight } from './top-eight'
+
+describe('Top 8 profile bio format', () => {
+  it('detects numbered and unnumbered fully-qualified handles', () => {
+    expect(parseTopEightText([
+      'I like old websites.',
+      '',
+      'My top 8:',
+      '1. @alice@example.test',
+      'bob@remote.test',
+      '3. @carol@social.example',
+      '',
+      'This remains in the bio.',
+    ].join('\n'))).toEqual({
+      handles: ['@alice@example.test', '@bob@remote.test', '@carol@social.example'],
+      bio: 'I like old websites.\n\nThis remains in the bio.',
+    })
+  })
+
+  it('accepts local-only @handles in manually written profile lists', () => {
+    expect(parseTopEightText([
+      'About me',
+      'My top 8:',
+      '1. @localfriend',
+      '2. @remote@social.example',
+      '3. @another_local',
+    ].join('\n'))).toEqual({
+      handles: ['@localfriend', '@remote@social.example', '@another_local'],
+      bio: 'About me',
+    })
+  })
+
+  it('ignores headings without at least one qualified handle', () => {
+    expect(parseTopEightText('My top 8:\nAlice\nBob')).toEqual({
+      handles: [],
+      bio: 'My top 8:\nAlice\nBob',
+    })
+  })
+
+  it('replaces an existing section and caps it at eight unique handles', () => {
+    const next = withTopEight(
+      'Bio\n\nMy top 8:\n@old@example.test',
+      Array.from({ length: 10 }, (_, index) => `friend${index}@example.test`),
+    )
+    expect(next).toContain('Bio\n\nMy top 8:\n1. @friend0@example.test')
+    expect(next).toContain('8. @friend7@example.test')
+    expect(next).not.toContain('friend8')
+    expect(next).not.toContain('@old@example.test')
+  })
+
+  it('removes the section from HTML without flattening the rest of the bio', () => {
+    const result = topEightFromHtml(
+      '<p><strong>Hello!</strong><br>My top 8:<br>1. <a href="https://example.test/@alice">@alice@example.test</a><br>@bob@remote.test</p><p><em>Still here.</em></p>',
+    )
+    expect(result.handles).toEqual(['@alice@example.test', '@bob@remote.test'])
+    expect(result.html).toContain('<strong>Hello!</strong>')
+    expect(result.html).toContain('<em>Still here.</em>')
+    expect(result.html).not.toContain('My top 8')
+    expect(result.html).not.toContain('@alice@example.test')
+  })
+})

src/lib/util/top-eight.ts

@@ -0,0 +1,180 @@
+import DOMPurify from 'dompurify'
+import type { Account, InstanceInfo } from '../api/types'
+
+export const TOP_EIGHT_HEADING = 'My top 8:'
+export const TOP_EIGHT_MAX = 8
+
+const HEADING_PATTERN = /^\s*my\s+top\s+8\s*:\s*$/i
+const HANDLE_PATTERN = /^\s*(?:[1-8]\.\s*)?((?:@[a-z0-9_][a-z0-9_.-]*)(?:@[a-z0-9](?:[a-z0-9.-]*[a-z0-9])?(?::\d+)?)?|(?:[a-z0-9_][a-z0-9_.-]*@[a-z0-9](?:[a-z0-9.-]*[a-z0-9])?(?::\d+)?))\s*$/i
+
+export interface ParsedTopEight {
+  handles: string[]
+  /** The bio with only the recognized Top 8 section removed. */
+  bio: string
+}
+
+function normalizedHandle(value: string): string | null {
+  const match = HANDLE_PATTERN.exec(value)
+  if (!match) return null
+  return `@${match[1].replace(/^@/, '')}`
+}
+
+/** Local-only handles are accepted when reading, but picker-written handles are qualified. */
+export function topEightHandleMatchesAccount(handle: string, account: Account, localHost: string): boolean {
+  const normalized = handle.toLowerCase()
+  return normalized === `@${account.acct}`.toLowerCase() ||
+    normalized === `@${account.username}`.toLowerCase() ||
+    normalized === `@${account.username}@${localHost}`.toLowerCase()
+}
+
+/** Parse the portable, human-readable representation used in profile bios. */
+export function parseTopEightText(source: string): ParsedTopEight {
+  const normalized = source.replace(/\r\n?/g, '\n')
+  const lines = normalized.split('\n')
+
+  for (let heading = 0; heading < lines.length; heading += 1) {
+    if (!HEADING_PATTERN.test(lines[heading])) continue
+    const handles: string[] = []
+    let end = heading + 1
+    while (end < lines.length && handles.length < TOP_EIGHT_MAX) {
+      const handle = normalizedHandle(lines[end])
+      if (!handle) break
+      handles.push(handle)
+      end += 1
+    }
+    if (handles.length === 0) continue
+
+    const before = lines.slice(0, heading)
+    const after = lines.slice(end)
+    return {
+      handles,
+      bio: [...before, ...after].join('\n').replace(/\n{3,}/g, '\n\n').trim(),
+    }
+  }
+
+  return { handles: [], bio: normalized.trim() }
+}
+
+/** Replace an existing section without disturbing the user's ordinary bio. */
+export function withTopEight(source: string, handles: string[]): string {
+  const base = parseTopEightText(source).bio
+  const unique = Array.from(
+    new Set(handles.map((handle) => normalizedHandle(handle)).filter((handle): handle is string => Boolean(handle))),
+  ).slice(0, TOP_EIGHT_MAX)
+  if (unique.length === 0) return base
+  const section = [TOP_EIGHT_HEADING, ...unique.map((handle, index) => `${index + 1}. ${handle}`)].join('\n')
+  return base ? `${base}\n\n${section}` : section
+}
+
+interface ProjectedLine {
+  text: string
+  textNodes: Text[]
+  breaks: HTMLBRElement[]
+}
+
+/**
+ * Project an HTML bio into lines while retaining the nodes that formed them.
+ * This lets us remove the portable section without flattening links, emphasis,
+ * custom emoji, or any other formatting in the rest of the bio.
+ */
+function projectedLines(container: HTMLElement): ProjectedLine[] {
+  const lines: ProjectedLine[] = [{ text: '', textNodes: [], breaks: [] }]
+  const current = () => lines[lines.length - 1]
+  const newline = (br?: HTMLBRElement) => {
+    if (br) current().breaks.push(br)
+    if (current().text || current().textNodes.length || current().breaks.length) {
+      lines.push({ text: '', textNodes: [], breaks: [] })
+    }
+  }
+  const blocks = new Set(['P', 'DIV', 'LI', 'BLOCKQUOTE', 'PRE', 'H1', 'H2', 'H3', 'H4'])
+
+  const visit = (node: Node): void => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent ?? ''
+      const parts = text.split('\n')
+      parts.forEach((part, index) => {
+        if (part) {
+          current().text += part
+          current().textNodes.push(node as Text)
+        }
+        if (index < parts.length - 1) newline()
+      })
+      return
+    }
+    if (!(node instanceof HTMLElement)) return
+    if (node.tagName === 'BR') {
+      newline(node as HTMLBRElement)
+      return
+    }
+    const block = blocks.has(node.tagName)
+    if (block && current().text.trim()) newline()
+    for (const child of Array.from(node.childNodes)) visit(child)
+    if (block && current().text.trim()) newline()
+  }
+
+  for (const child of Array.from(container.childNodes)) visit(child)
+  return lines
+}
+
+export function topEightFromHtml(source: string): { handles: string[]; html: string } {
+  const container = document.createElement('div')
+  container.innerHTML = DOMPurify.sanitize(source)
+  const lines = projectedLines(container)
+
+  for (let heading = 0; heading < lines.length; heading += 1) {
+    if (!HEADING_PATTERN.test(lines[heading].text)) continue
+    const handles: string[] = []
+    let end = heading + 1
+    while (end < lines.length && handles.length < TOP_EIGHT_MAX) {
+      const handle = normalizedHandle(lines[end].text)
+      if (!handle) break
+      handles.push(handle)
+      end += 1
+    }
+    if (handles.length === 0) continue
+
+    for (const line of lines.slice(heading, end)) {
+      for (const node of new Set(line.textNodes)) node.textContent = ''
+      for (const br of line.breaks) br.remove()
+    }
+    for (const empty of Array.from(container.querySelectorAll('p, div, li, blockquote, pre'))) {
+      if (!(empty.textContent ?? '').trim() && !empty.querySelector('img')) empty.remove()
+    }
+    return { handles, html: container.innerHTML.trim() }
+  }
+  return { handles: [], html: container.innerHTML.trim() }
+}
+
+/** Best available limit. Pleroma does not currently advertise user_bio_length. */
+export function profileBioLimit(instance: InstanceInfo | null): { value: number; estimated: boolean } {
+  const advertised = instance?.configuration?.accounts?.max_note_length
+  if (typeof advertised === 'number' && advertised > 0) return { value: advertised, estimated: false }
+  if (instance?.pleroma) return { value: 5000, estimated: true }
+  return { value: 500, estimated: true }
+}
+
+const CACHE_PREFIX = 'plspace:top-eight:v1:'
+const CACHE_TTL = 24 * 60 * 60 * 1000
+
+export function readTopEightCache(host: string, ownerId: string, handles: string[]): Account[] | null {
+  try {
+    const raw = localStorage.getItem(`${CACHE_PREFIX}${host}:${ownerId}`)
+    if (!raw) return null
+    const cached = JSON.parse(raw) as { savedAt: number; handles: string[]; accounts: Account[] }
+    if (Date.now() - cached.savedAt > CACHE_TTL || cached.handles.join('\n') !== handles.join('\n')) return null
+    return cached.accounts
+  } catch {
+    return null
+  }
+}
+
+export function writeTopEightCache(host: string, ownerId: string, handles: string[], accounts: Account[]): void {
+  try {
+    localStorage.setItem(
+      `${CACHE_PREFIX}${host}:${ownerId}`,
+      JSON.stringify({ savedAt: Date.now(), handles, accounts }),
+    )
+  } catch {
+    // Private browsing and storage quotas should never break a public profile.
+  }
+}

src/routes/Profile.svelte

@@ -24,6 +24,11 @@
     formatCount,
   } from '$lib/util/profile'
   import { toPlainText } from '$lib/util/html'
+  import {
+    readTopEightCache,
+    topEightHandleMatchesAccount,
+    writeTopEightCache,
+  } from '$lib/util/top-eight'
   import Module from '$components/common/Module.svelte'
   import EmojiText from '$components/common/EmojiText.svelte'
   import ProfileIdentity from '$components/profile/ProfileIdentity.svelte'
@@ -31,6 +36,7 @@
   import InterestsTable from '$components/profile/InterestsTable.svelte'
   import DetailsTable from '$components/profile/DetailsTable.svelte'
   import FriendSpace from '$components/profile/FriendSpace.svelte'
+  import TopEightSpace from '$components/profile/TopEightSpace.svelte'
   import PicStream from '$components/profile/PicStream.svelte'
   import BlogEntry from '$components/blog/BlogEntry.svelte'
   import Pager from '$components/common/Pager.svelte'
@@ -52,6 +58,9 @@
 
   let friends = $state<Account[]>([])
   let friendsLoading = $state(false)
+  let topEightAccounts = $state<Account[]>([])
+  let topEightMissing = $state<string[]>([])
+  let topEightLoading = $state(false)
   let loadGeneration = 0
 
   // Recreated whenever the account changes, so the feed never shows one
@@ -105,6 +114,9 @@
     relationship = null
     friends = []
     friendsLoading = false
+    topEightAccounts = []
+    topEightMissing = []
+    topEightLoading = false
 
     try {
       const found = await endpoints.lookupAccount(session.api, handle)
@@ -145,6 +157,7 @@
       )
       void entries.reload()
 
+      void loadTopEight(found, generation)
       void loadFriends(found, currentView, generation)
       void loadRelationship(found, generation)
     } catch (cause) {
@@ -155,6 +168,30 @@
     }
   }
 
+  async function loadTopEight(target: Account, generation: number): Promise<void> {
+    const handles = buildProfileView(target).topEightHandles
+    if (handles.length === 0) return
+
+    const cached = readTopEightCache(session.host, target.id, handles)
+    if (cached) {
+      topEightAccounts = cached
+      topEightMissing = handles.filter(
+        (handle) => !cached.some((item) => topEightHandleMatchesAccount(handle, item, session.host)),
+      )
+      return
+    }
+
+    topEightLoading = true
+    const settled = await Promise.allSettled(
+      handles.map((handle) => endpoints.lookupAccount(session.api, handle)),
+    )
+    if (generation !== loadGeneration || account?.id !== target.id) return
+    topEightAccounts = settled.flatMap((result) => result.status === 'fulfilled' ? [result.value] : [])
+    topEightMissing = handles.filter((_, index) => settled[index].status === 'rejected')
+    writeTopEightCache(session.host, target.id, handles, topEightAccounts)
+    topEightLoading = false
+  }
+
   async function loadFriends(
     target: Account,
     currentView: Props['view'],
@@ -394,6 +431,17 @@
             {/if}
           </Module>
 
+          {#if profile.topEightHandles.length > 0}
+            <TopEightSpace
+              ownerName={firstName}
+              ownerEmojis={account.emojis}
+              accounts={topEightAccounts}
+              viewAllHref={`#/@${account.acct}/friends`}
+              missing={topEightMissing}
+              loading={topEightLoading}
+            />
+          {/if}
+
           <FriendSpace
             title={`${firstName}'s Friend Space`}
             ownerName={firstName}

src/routes/Profile.test.ts

@@ -113,6 +113,46 @@ describe('Profile', () => {
     expect(view.queryByText('A reply')).not.toBeInTheDocument()
   })
 
+  it('turns a portable bio list into a Top 8 grid and hides its source text', async () => {
+    const owner = account({
+      id: 'owner',
+      note: '<p>Hello from my profile.<br>My top 8:<br>1. @bob<br>@carol@social.test</p>',
+    })
+    const bob = account({ id: 'bob', username: 'bob', acct: 'bob@remote.test', display_name: 'Bob' })
+    const carol = account({ id: 'carol', username: 'carol', acct: 'carol@social.test', display_name: 'Carol' })
+    const lookupAccount = vi.fn(async (_api, handle: string) => {
+      if (handle === 'alice') return owner
+      if (handle === '@bob') return bob
+      if (handle === '@carol@social.test') return carol
+      throw new Error('not found')
+    })
+    const services = testServices({
+      session: session(),
+      theme: theme(),
+      endpoints: {
+        lookupAccount,
+        fetchAccountStatuses: vi.fn().mockResolvedValue({ items: [], links: {} }),
+        fetchFollowers: vi.fn().mockResolvedValue({ items: [], links: {} }),
+      },
+    })
+    const view = render(Profile, {
+      props: { acct: 'alice' },
+      context: new Map([[APP_SERVICES, services]]),
+    })
+
+    expect(await view.findByRole('heading', { name: "Alice's Top 8" })).toBeInTheDocument()
+    expect(await view.findByText('Bob')).toBeInTheDocument()
+    expect(await view.findByText('Carol')).toBeInTheDocument()
+    expect(view.container.querySelector('.top-eight-space .friend-count')).not.toBeInTheDocument()
+    expect(view.getByRole('link', { name: "View All of Alice's Friends" })).toHaveAttribute(
+      'href',
+      '#/@alice/friends',
+    )
+    expect(view.getAllByText('Hello from my profile.').length).toBeGreaterThan(0)
+    expect(view.queryByText('My top 8:')).not.toBeInTheDocument()
+    expect(view.queryByText('@bob@remote.test')).not.toBeInTheDocument()
+  })
+
   it('builds Pics from the account’s own image attachments', async () => {
     const ownPicture = status({
       id: 'picture-entry',

src/styles/blog.css

@@ -148,6 +148,10 @@
   overflow: hidden;
 }
 
+.attachment-figure {
+  margin: 0;
+}
+
 .attachment-media {
   display: block;
   width: 100%;
@@ -177,6 +181,68 @@
   font-size: var(--ms-font-size-small);
 }
 
+/* Flash remains inert until explicitly started with the bundled Ruffle player. */
+.flash-attachment {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--flash-aspect-ratio, 4 / 3);
+  min-height: 180px;
+  background: #000;
+}
+
+.flash-player-container,
+.flash-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.flash-player-container[hidden] {
+  display: none;
+}
+
+.flash-placeholder {
+  display: grid;
+  place-content: center;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: 14px;
+  border: 0;
+  color: var(--ms-link);
+  background: var(--ms-table-stripe-bg);
+  text-align: center;
+  white-space: normal;
+  cursor: pointer;
+}
+
+.flash-placeholder span {
+  color: var(--ms-muted-fg);
+  font-size: var(--ms-font-size-small);
+}
+
+.flash-stop {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+}
+
+.flash-download {
+  position: absolute;
+  right: 5px;
+  bottom: 4px;
+  z-index: 2;
+  padding: 2px 4px;
+  background: var(--ms-page-bg);
+  font-size: var(--ms-font-size-small);
+}
+
+.flash-sensitive-placeholder {
+  display: grid;
+  min-height: 180px;
+  place-items: center;
+  font-weight: 700;
+}
+
 /* YouTube links become privacy-enhanced players in the attachment space. */
 .youtube-attachment-list {
   grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));

src/styles/forms.css

@@ -176,13 +176,28 @@ textarea {
   border: 1px solid var(--ms-avatar-border);
 }
 
-.composer-attachment img {
+.composer-attachment img,
+.composer-attachment-preview {
   display: block;
   width: 78px;
   height: 78px;
+}
+
+.composer-attachment img {
   object-fit: cover;
 }
 
+.composer-attachment-preview {
+  display: grid;
+  place-items: center;
+  padding: 4px;
+  background: var(--ms-table-stripe-bg);
+  color: var(--ms-muted-fg);
+  font-size: var(--ms-font-size-small);
+  font-weight: 700;
+  text-align: center;
+}
+
 .composer-body {
   width: 100%;
 }
@@ -306,6 +321,71 @@ textarea {
   gap: 5px;
 }
 
+.profile-editor-top-eight {
+  display: grid;
+  gap: 7px;
+}
+
+.top-eight-editor-list,
+.top-eight-search-results {
+  margin: 0;
+  padding-left: 28px;
+}
+
+.top-eight-editor-list li {
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.top-eight-editor-actions {
+  display: flex;
+  gap: 3px;
+}
+
+.top-eight-search {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 5px;
+}
+
+.top-eight-search-results {
+  list-style: none;
+  padding: 0;
+}
+
+.top-eight-result {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  padding: 4px;
+  border: 1px solid var(--ms-module-border);
+  background: var(--ms-canvas-bg);
+  color: var(--ms-page-fg);
+  text-align: left;
+  cursor: pointer;
+}
+
+.top-eight-result:hover,
+.top-eight-result:focus-visible {
+  background: var(--ms-table-stripe-bg);
+}
+
+.top-eight-result img {
+  width: 42px;
+  height: 42px;
+  object-fit: cover;
+}
+
+.field-error {
+  color: var(--ms-error-fg, #a00000);
+  font-weight: 700;
+}
+
 .profile-editor-field {
   display: grid;
   grid-template-columns: minmax(100px, 1fr) minmax(160px, 2fr) auto;

src/styles/profile.css

@@ -232,6 +232,46 @@
   white-space: nowrap;
 }
 
+.top-eight-space {
+  margin-bottom: var(--ms-module-gap);
+}
+
+.top-eight-grid {
+  grid-template-columns: repeat(4, minmax(64px, 1fr));
+  gap: 28px 18px;
+  padding: 12px 0 4px;
+}
+
+.top-eight-grid .friend-card-name {
+  min-height: 2.4em;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: normal;
+  line-height: 1.15;
+}
+
+.top-eight-grid .friend-card-photo {
+  border: 2px solid var(--ms-link-color);
+}
+
+.top-eight-missing {
+  margin: 8px 0 0;
+  font-size: var(--ms-font-size-small);
+}
+
+.top-eight-view-all {
+  margin: 22px 0 2px;
+  text-align: right;
+  font-weight: 700;
+}
+
+@media (max-width: 520px) {
+  .top-eight-grid {
+    grid-template-columns: repeat(2, minmax(64px, 1fr));
+  }
+}
+
 /* ------------------------------------------------------------- pics stream */
 
 .pic-stream-intro {

vite.config.ts

@@ -2,12 +2,56 @@ import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { svelteTesting } from '@testing-library/svelte/vite'
 import { fileURLToPath, URL } from 'node:url'
+import { readFileSync, readdirSync } from 'node:fs'
+import type { Plugin } from 'vite'
+
+const RUFFLE_DIRECTORY = fileURLToPath(
+  new URL('./node_modules/@ruffle-rs/ruffle/', import.meta.url),
+)
+const RUFFLE_ASSET_PATTERN = /^(?:ruffle\.js|core\.ruffle\..+\.js|.+\.wasm|LICENSE_(?:MIT|APACHE))$/
+
+/** Serve and emit the pinned self-hosted runtime without a third-party CDN. */
+function ruffleAssets(): Plugin {
+  const files = readdirSync(RUFFLE_DIRECTORY).filter((name) => RUFFLE_ASSET_PATTERN.test(name))
+  let building = false
+
+  return {
+    name: 'plspace-ruffle-assets',
+    configResolved(config) {
+      building = config.command === 'build'
+    },
+    buildStart() {
+      if (!building) return
+      for (const name of files) {
+        this.emitFile({
+          type: 'asset',
+          fileName: `ruffle/${name}`,
+          source: readFileSync(`${RUFFLE_DIRECTORY}/${name}`),
+        })
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use('/ruffle', (request, response, next) => {
+        const name = decodeURIComponent((request.url ?? '').replace(/^\//, '').split('?')[0])
+        if (!files.includes(name)) {
+          next()
+          return
+        }
+        response.setHeader(
+          'Content-Type',
+          name.endsWith('.wasm') ? 'application/wasm' : name.endsWith('.js') ? 'text/javascript' : 'text/plain',
+        )
+        response.end(readFileSync(`${RUFFLE_DIRECTORY}/${name}`))
+      })
+    },
+  }
+}
 
 // Fully static output: the app talks to a Mastodon/Pleroma server directly from
 // the browser, so `dist/` can be dropped on any static host (or file://-ish CDN).
 export default defineConfig({
   base: './',
-  plugins: [svelte(), svelteTesting()],
+  plugins: [svelte(), svelteTesting(), ruffleAssets()],
   resolve: {
     alias: {
       $lib: fileURLToPath(new URL('./src/lib', import.meta.url)),