@rubytech/create-maxy-code 0.1.484 → 0.1.486

package/payload/platform/plugins/cloudflare/mcp/__tests__/template-config.test.ts

@@ -144,3 +144,29 @@ describe('device binding', () => {
     expect(text).toMatch(/accountId\s+TEXT NOT NULL DEFAULT ''/)
   })
 })
+
+const portalJs = () => readFileSync(join(TEMPLATE, 'portal.js'), 'utf8')
+const indexHtml = () => readFileSync(join(TEMPLATE, 'index.html'), 'utf8')
+
+describe('login error surfacing and passcode reveal (Task 1872)', () => {
+  it('maps each auth failure to a distinct message, not one opaque string', () => {
+    const js = portalJs()
+    expect(js).not.toMatch(/That did not work\./)
+    expect(js).toContain('Too many attempts. Try again later.')
+    expect(js).toContain('Enter both your name and your passcode.')
+    expect(js).toContain('That name and passcode did not match.')
+    expect(js).toContain('Something went wrong. Please try again in a moment.')
+    expect(js).toContain('Could not reach the server. Check your connection and try again.')
+  })
+
+  it('logs the status and error on the auth failure path', () => {
+    expect(portalJs()).toMatch(/console\.error\(\s*'\[data-portal\] auth failed'/)
+  })
+
+  it('ships a reveal control bound to the passcode field', () => {
+    const html = indexHtml()
+    expect(html).toMatch(/id="dp-reveal"/)
+    expect(html).toMatch(/aria-controls="dp-passcode"/)
+    expect(portalJs()).toMatch(/dp-reveal/)
+  })
+})

package/payload/platform/plugins/cloudflare/skills/data-portal/SKILL.md

@@ -48,7 +48,7 @@ For each person:
 
 ```bash
 node platform/plugins/cloudflare/bin/portal-enrol.mjs --owner <ownerId> --name <name> \
-  --account <accountId> | npx wrangler d1 execute <portalDbName> --remote --file=-
+  --account <accountId> [--folders <a,b,c>] | npx wrangler d1 execute <portalDbName> --remote --file=-
 ```
 
 The script mints the passcode and prints it **once to stderr**, so it reaches the operator's terminal
@@ -66,6 +66,15 @@ a sub-account that genuinely has nothing to share, so the script refuses rather
 fails silently later. Anyone enrolled before this existed has no account bound and sees nothing; run
 enrolment again for them, which the upsert makes a re-run rather than a migration.
 
+`--folders` is optional and narrows what one person sees to a named set of top-level folders, comma
+separated (`--folders quotes,output`). Each name is a folder, never a path, and must match
+`[A-Za-z0-9_-]+`. Omitting it, or passing an empty value, grants the account's full exposed set,
+which is the existing behaviour, so people enrolled before this existed are unaffected. Two people on
+one account can hold different grants and each sees only their own. Re-enrolment replaces the grant,
+the same upsert that rotates the passcode. The grant lives only in the portal's D1, so it narrows
+below the account's exposed set and never widens past it: a portal compromise returns a person to the
+account set, which the install re-derives and enforces regardless.
+
 **A passcode is never stored in plaintext** — not in `data-portal.json`, not in a log line, nowhere
 on the device. The operator conveys it to the person out of band. Rotating a passcode is a re-run of
 the script for that person; there is no separate editor.
@@ -122,8 +131,16 @@ The portal shows the sub-account's deliverable folders as well as what the clien
 folder names and sizes live in D1, so the tree renders whether or not the device is up; the bytes do
 not, so opening a file has to reach the install. That needs two things the template cannot know.
 
-Fill `__PORTAL_INSTALL_ORIGIN__` in `wrangler.toml` with the install's public origin
-(`https://<tunnel-hostname>`), then mint one secret and set it on both ends:
+The shared tree has two row kinds. `renderEntries` in `portal.js` gives a `directory` entry a folder
+icon in the accent colour and a file entry a document icon in the muted grey, both inline lucide SVG,
+so a client tells a folder from a file at a glance.
+
+Fill `__PORTAL_INSTALL_ORIGIN__` in `wrangler.toml` with the install's PUBLIC origin
+(`https://<public-tunnel-hostname>`), never the admin or operator hostname. The admin
+origin is behind the remote-auth gate, so the edge's signed HEAD probe of a device file
+gets a 401 there and every download 503s. The public host admits `/api/portal/fetch` by
+allowlist and the route verifies the signature itself. Then mint one secret and set it on
+both ends:
 
 ```bash
 SECRET="$(node -e 'console.log([...crypto.getRandomValues(new Uint8Array(32))].map(b=>b.toString(16).padStart(2,"0")).join(""))')"
@@ -177,6 +194,28 @@ the folders you expect:
 `exposed=none` on an account that has deliverables means the schema was missing or its ontology
 region was absent — not that the walk found nothing.
 
+## How a client browses, downloads and uploads
+
+Signed in, the panel has a pinned header that stays put while the file lists
+scroll under it. The header carries the folder breadcrumbs, an up control that
+moves to the parent folder (disabled at the root), and an upload icon. Filenames
+render on one line: the stem truncates with an ellipsis and the extension stays
+pinned, so `.pdf` and `.html` on two same-named orders are still told apart.
+
+A shared (device-held) file downloads three ways, all through the same signed
+`/api/download?path=` route: a left click, a right-click that opens a one-item
+Download menu, and a drag out of the browser onto the desktop. The drag uses
+`/api/download?path=...&redirect=1`, which 302s to the signed link so the browser
+saves the file rather than a JSON body. The three download methods share the one
+`op=fetch-through` log line, so a broken method shows as a missing line under the
+same signal.
+
+Upload opens from the header icon into a dismissable modal holding the file
+picker and Upload button. It posts to `/api/upload` exactly as before; a kept
+upload refreshes the list and closes the modal. Dropping a file onto the modal's
+upload area uploads the same way. The modal dismisses on the close button, a
+click on the backdrop, or Escape.
+
 ## Deploy through site-deploy
 
 `storage-pages-deploy` refuses a project with no owner on record, so record the ownership first. In

package/payload/platform/plugins/cloudflare/skills/data-portal/schema.sql

@@ -24,13 +24,22 @@
 -- predates it — but an existing table will NOT gain the column, and a person
 -- whose row has the empty default sees an empty folder list. Re-enrol those
 -- people; the upsert on ownerId makes that a re-run, not a migration.
+--
+-- `folders` is a per-person allowlist of top-level folder names, comma
+-- separated, that narrows what this person sees below the account's exposed
+-- set. Empty (the default) means the full set, so an existing person keeps
+-- today's behaviour. Like `accountId`, IF NOT EXISTS will NOT add this column
+-- to a `people` table that predates it, and enrolment's INSERT names `folders`,
+-- so it fails loudly on such a table. Add it by hand in that case:
+--   ALTER TABLE people ADD COLUMN folders TEXT NOT NULL DEFAULT '';
 CREATE TABLE IF NOT EXISTS people (
   ownerId    TEXT PRIMARY KEY,
   name       TEXT NOT NULL,
   salt       TEXT NOT NULL,
   hash       TEXT NOT NULL,
   createdAt  TEXT NOT NULL,
-  accountId  TEXT NOT NULL DEFAULT ''
+  accountId  TEXT NOT NULL DEFAULT '',
+  folders    TEXT NOT NULL DEFAULT ''
 );
 
 -- `pcCheck` is a short digest of the person's passcode hash at mint time, and

package/payload/platform/plugins/cloudflare/skills/data-portal/template/functions/api/_lib/session.ts

@@ -54,11 +54,11 @@ export async function resolveSession(
   db: D1Database,
   sessionId: string,
   nowMs: number,
-): Promise<{ ownerId: string; accountId: string } | null> {
+): Promise<{ ownerId: string; accountId: string; folders: string[] } | null> {
   if (!sessionId) return null
   const row = await db
     .prepare(
-      `SELECT s.ownerId AS ownerId, p.accountId AS accountId
+      `SELECT s.ownerId AS ownerId, p.accountId AS accountId, p.folders AS folders
          FROM sessions s
          JOIN people p ON p.ownerId = s.ownerId
         WHERE s.sessionId = ?
@@ -66,12 +66,26 @@ export async function resolveSession(
           AND s.pcCheck = substr(p.hash, 1, 16)`,
     )
     .bind(sessionId, nowMs)
-    .first<{ ownerId: string; accountId: string }>()
+    .first<{ ownerId: string; accountId: string; folders: string }>()
   if (!row || typeof row.ownerId !== 'string') return null
   // A `people` row predating the accountId column resolves it as absent. Treat
-  // that as "no folders", never as "all folders" — the empty string reaches the
+  // that as "no folders", never as "all folders": the empty string reaches the
   // listing, which returns nothing rather than falling back to some default.
-  return { ownerId: row.ownerId, accountId: typeof row.accountId === 'string' ? row.accountId : '' }
+  const accountId = typeof row.accountId === 'string' ? row.accountId : ''
+  // `folders` is a comma-separated allowlist of top-level names. Absent or empty
+  // means no grant, which the two client surfaces read as no filter (full set).
+  const folders =
+    typeof row.folders === 'string' ? row.folders.split(',').map((s) => s.trim()).filter(Boolean) : []
+  return { ownerId: row.ownerId, accountId, folders }
+}
+
+/** Whether a person's folder grant admits `relPath`. An empty grant admits
+ *  everything (the full set, today's behaviour); otherwise the path's top-level
+ *  segment must be named in the grant. The test is on the whole segment, so
+ *  `quote` never matches `quotes`. One definition so the listing and the
+ *  download surface can never disagree on what is granted. */
+export function grantAllows(grant: string[], relPath: string): boolean {
+  return grant.length === 0 || grant.includes(relPath.split('/')[0])
 }
 
 export function readSessionCookie(header: string | null): string | null {

package/payload/platform/plugins/cloudflare/skills/data-portal/template/functions/api/download.ts

@@ -1,5 +1,5 @@
 import type { Handler, Logger, PortalEnv, R2ObjectBody } from './_lib/types'
-import { readSessionCookie, resolveSession } from './_lib/session'
+import { grantAllows, readSessionCookie, resolveSession } from './_lib/session'
 import { q } from './_lib/log'
 import { authorizeKey } from './_lib/authorize'
 import { buildSignedUrl, SIGNED_TTL_MS } from './_lib/portal-sign.mjs'
@@ -73,6 +73,16 @@ export async function processIndexedDownload(
     return { status: 404, payload: { ok: false, error: 'not found' } }
   }
 
+  if (!grantAllows(session.folders, relPath)) {
+    // Narrowed below the account set by the person's grant. Refused before the
+    // directory read and the device probe, so an out-of-grant path costs no
+    // work and is distinguishable in the log from a path simply not indexed.
+    log(
+      `[data-portal] op=fetch-through owner=${q(session.ownerId)} path=${q(relPath)} result=not-granted`,
+    )
+    return { status: 404, payload: { ok: false, error: 'not found' } }
+  }
+
   const row = await env.DB.prepare('SELECT relPath FROM directory WHERE accountId = ? AND relPath = ?')
     .bind(session.accountId, relPath)
     .first<{ relPath: string }>()
@@ -135,7 +145,7 @@ export async function onRequestGet(context: PagesContext): Promise<Response> {
   // below is untouched.
   const indexedPath = params.get('path')
   if (indexedPath) {
-    const { status, payload } = await processIndexedDownload(
+    const { status, payload, url } = await processIndexedDownload(
       sessionId,
       indexedPath,
       context.env,
@@ -143,6 +153,13 @@ export async function onRequestGet(context: PagesContext): Promise<Response> {
       Date.now(),
       fetch as unknown as HeadFetch,
     )
+    // Drag-out cannot read a JSON body: the browser follows a DownloadURL to a
+    // real response. When the file resolved, 302 the drag to the signed url so
+    // the browser downloads it; otherwise fall through to the same JSON the
+    // click path returns. Same op=fetch-through line for every method.
+    if (params.get('redirect') === '1' && status === 200 && url) {
+      return Response.redirect(url, 302)
+    }
     return Response.json(payload, { status })
   }
 

package/payload/platform/plugins/cloudflare/skills/data-portal/template/functions/api/files.ts

@@ -1,5 +1,5 @@
 import type { Handler, Logger, PortalEnv } from './_lib/types'
-import { readSessionCookie, resolveSession } from './_lib/session'
+import { grantAllows, readSessionCookie, resolveSession } from './_lib/session'
 import { q } from './_lib/log'
 
 interface DirRow {
@@ -86,17 +86,23 @@ export async function processFiles(
   // means no folders: an enrolment predating that column lands here, and the
   // empty `account=` field in the log line is what says so.
   let entries: DirEntry[] = []
+  const grant = session.folders
   if (session.accountId) {
     const dir = await env.DB.prepare(
       'SELECT relPath, sizeBytes, modifiedAt FROM directory WHERE accountId = ?',
     )
       .bind(session.accountId)
       .all<DirRow>()
-    entries = entriesUnder(dir.results ?? [], prefix)
+    // The grant narrows below the account's exposed set: keep only rows the
+    // grant admits. An empty grant admits everything, which is the full set and
+    // today's behaviour.
+    const rows = (dir.results ?? []).filter((row) => grantAllows(grant, row.relPath))
+    entries = entriesUnder(rows, prefix)
   }
 
   log(
     `[data-portal] op=list owner=${q(session.ownerId)} account=${q(session.accountId)} ` +
+      `granted=${grant.length === 0 ? 'full' : grant.length} ` +
       `prefix=${q(prefix)} files=${files.length} entries=${entries.length} result=ok`,
   )
   return { status: 200, payload: { ok: true, files, entries } }

package/payload/platform/plugins/cloudflare/skills/data-portal/template/index.html

@@ -18,22 +18,39 @@
         <label class="dp-label" for="dp-owner">Your name</label>
         <input class="dp-input" id="dp-owner" name="owner" autocomplete="username" required />
         <label class="dp-label" for="dp-passcode">Passcode</label>
-        <input
-          class="dp-input"
-          id="dp-passcode"
-          name="passcode"
-          type="password"
-          autocomplete="current-password"
-          required
-        />
+        <div class="dp-field">
+          <input
+            class="dp-input"
+            id="dp-passcode"
+            name="passcode"
+            type="password"
+            autocomplete="current-password"
+            required
+          />
+          <button
+            type="button"
+            class="dp-reveal"
+            id="dp-reveal"
+            aria-controls="dp-passcode"
+          >Show passcode</button>
+        </div>
         <button class="dp-btn" type="submit">Sign in</button>
       </form>
 
       <section id="dp-panel" class="dp-panel" hidden>
-        <form id="dp-upload" class="dp-upload">
-          <input class="dp-file" id="dp-file" type="file" required />
-          <button class="dp-btn" type="submit">Upload</button>
-        </form>
+        <!-- Pinned nav. Stays put while the lists below scroll, so the folder
+             path and the upload control are always in reach. The crumbs live
+             here rather than inside #dp-shared so the header is one row. -->
+        <header class="dp-header">
+          <button class="dp-iconbtn" id="dp-up" type="button" aria-label="Up one level" disabled>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
+          </button>
+          <nav id="dp-crumbs" class="dp-crumbs" aria-label="Folder path"></nav>
+          <button class="dp-iconbtn" id="dp-upload-open" type="button" aria-label="Upload a file">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+          </button>
+        </header>
+
         <ul id="dp-files" class="dp-files"></ul>
 
         <!-- Files we have prepared for you, published from the device. Hidden
@@ -41,9 +58,23 @@
              shows the upload list alone rather than an empty second heading. -->
         <section id="dp-shared" class="dp-shared" hidden>
           <h2 class="dp-subtitle">Shared with you</h2>
-          <nav id="dp-crumbs" class="dp-crumbs" aria-label="Folder path"></nav>
           <ul id="dp-entries" class="dp-files"></ul>
         </section>
+
+        <!-- Upload moved off the always-inline row into a modal opened by the
+             header icon, so browsing is not crowded by the picker. Hidden via
+             the `hidden` attribute, which [hidden]{display:none!important} keeps
+             authoritative over .dp-modal's display:flex. -->
+        <div class="dp-modal" id="dp-modal" hidden>
+          <div class="dp-modal-panel" role="dialog" aria-modal="true" aria-label="Upload a file">
+            <button class="dp-modal-close" id="dp-modal-close" type="button" aria-label="Close">&times;</button>
+            <h2 class="dp-subtitle">Upload a file</h2>
+            <form id="dp-upload" class="dp-upload">
+              <input class="dp-file" id="dp-file" type="file" required />
+              <button class="dp-btn" type="submit">Upload</button>
+            </form>
+          </div>
+        </div>
       </section>
     </main>
     <script src="/portal.js"></script>

package/payload/platform/plugins/cloudflare/skills/data-portal/template/portal.css

@@ -29,11 +29,11 @@ body {
   padding: 2rem 1rem;
   background: var(--dp-paper);
   color: var(--dp-ink);
-  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
 .dp-card {
-  max-width: 34rem;
+  max-width: 56rem;
   margin: 0 auto;
 }
 
@@ -98,16 +98,45 @@ body {
   border-bottom: 1px solid var(--dp-rule);
 }
 
+/* One line per name, never wrapped. The name splits into a stem that
+   ellipsis-truncates and an extension that never shrinks, so `.pdf` vs `.html`
+   on two same-named orders stays visible. flex:1 + min-width:0 lets the name
+   give up width to the Delete button beside it. */
 .dp-file-name {
   color: var(--dp-accent);
   text-decoration: none;
-  word-break: break-all;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .dp-file-name:hover {
   text-decoration: underline;
 }
 
+/* The two-span name block. No gap between stem and extension so they read as
+   one filename; the stem clips with an ellipsis, the extension is pinned. */
+.dp-name {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.dp-name-main {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.dp-name-ext {
+  flex: none;
+  white-space: nowrap;
+}
+
 .dp-del {
   border: 1px solid var(--dp-rule);
   border-radius: 0.375rem;
@@ -140,10 +169,15 @@ body {
   color: var(--dp-ink);
 }
 
+/* In the pinned header the crumbs are the flexible middle: they take the space
+   the up/upload buttons leave and clip on one line when a path runs deep. */
 .dp-crumbs {
   font-size: 13px;
   color: var(--dp-muted);
-  margin-bottom: 10px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 /* Crumbs and folder rows are buttons (navigation is a fetch, not a page load),
@@ -166,10 +200,19 @@ body {
 
 .dp-folder-name {
   font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
-/* The file rows inside the tree are buttons too — same reset, but they must
-   match .dp-file-name's weight so the two lists read as one surface. */
+/* The file rows inside the tree are buttons too — same reset. The layout (flex,
+   flex:1, min-width:0, overflow) comes from the base .dp-file-name, so these
+   truncate the same way; only the button chrome and left-align are added here.
+   The row-kind icon plus its colour (below) is what tells a folder from a file,
+   so these no longer match .dp-folder-name's weight. */
 .dp-shared .dp-file-name {
   background: none;
   border: 0;
@@ -178,3 +221,174 @@ body {
   cursor: pointer;
   text-align: left;
 }
+
+/* Row-kind icon: sized to the text, never shrinks, stroke follows the span's
+   colour. Folder takes the accent, file the muted grey — both existing vars, so
+   the :root rewrite in portal-brand-css.mjs leaves the distinction intact. */
+.dp-icon {
+  flex: none;
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+}
+
+.dp-icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+
+.dp-icon-folder {
+  color: var(--dp-accent);
+}
+
+.dp-icon-file {
+  color: var(--dp-muted);
+}
+
+/* Passcode field with its reveal control. The passcode is transcribed out of
+   band, so being able to check what was typed is the point of the toggle.
+   Reuses existing variables and declares no new :root value, which
+   portal-brand-css.mjs would drop. */
+.dp-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.dp-field .dp-input {
+  flex: 1;
+}
+
+.dp-reveal {
+  border: 1px solid var(--dp-rule);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--dp-muted);
+  padding: 0.375rem 0.625rem;
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+/* Right-click Download menu for a shared file. Reuses existing variables and
+   declares no new :root value, which portal-brand-css.mjs would drop. */
+.dp-menu {
+  position: fixed;
+  z-index: 10;
+  background: var(--dp-paper);
+  border: 1px solid var(--dp-rule);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  padding: 0.25rem;
+  min-width: 8.75rem;
+}
+
+.dp-menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font: inherit;
+  color: var(--dp-ink);
+}
+
+.dp-menu-item:hover,
+.dp-menu-item:focus {
+  background: var(--dp-rule);
+}
+
+/* The upload area while a file is dragged over it. */
+.dp-upload.dp-dropping {
+  outline: 2px dashed var(--dp-accent);
+  outline-offset: 3px;
+}
+
+/* Pinned nav row. position:sticky keeps it in flow, so it reserves its own
+   height and never overlaps the first file row (which position:fixed would). An
+   opaque paper background hides the rows that scroll under it. Reuses existing
+   variables and declares no new :root value, which portal-brand-css.mjs drops. */
+.dp-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+  background: var(--dp-paper);
+  border-bottom: 1px solid var(--dp-rule);
+}
+
+/* The up and upload controls that flank the crumbs. Square, muted chrome so the
+   filenames stay the loudest thing on the row. */
+.dp-iconbtn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+  border: 1px solid var(--dp-rule);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--dp-muted);
+  cursor: pointer;
+}
+
+.dp-iconbtn svg {
+  width: 1.1em;
+  height: 1.1em;
+}
+
+/* Disabled up control at the tree root: dimmed and inert, so it reads as "no
+   parent from here" rather than a dead button. */
+.dp-iconbtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Upload modal. [hidden]{display:none!important} keeps this off screen until the
+   header icon clears the attribute; display:flex then centres the panel. The
+   backdrop is a non-themed literal, same as .dp-menu's shadow. */
+.dp-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.dp-modal-panel {
+  position: relative;
+  width: 100%;
+  max-width: 24rem;
+  padding: 1.5rem;
+  background: var(--dp-paper);
+  border: 1px solid var(--dp-rule);
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.dp-modal-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  background: transparent;
+  color: var(--dp-muted);
+  font: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}