From c7ead3bb6ae5aa9444c15d0d9f17d12cab25892b Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 1 Sep 2026 23:24:28 +0000 Subject: [PATCH 1/7] Add a dependency-free marketing site ForgeDialog had a README and a manual test page but nothing to point people at. site/ is a landing page with an interactive appearance playground, written in plain HTML, CSS, and browser JavaScript so the site carries no dependencies of its own, matching the library it advertises. The page runs the build from this checkout rather than a CDN: scripts/build-site.mjs copies dist/index.global.js and dist/index.css into site/vendor/, which is git-ignored. It uses only Node built-ins and rewrites no source files. The version badge reads the library's own VERSION export at runtime, so nothing has to be kept in sync by hand. The playground calls instance.update() on every control change, so the dialog restyles while it is open, and it prints the matching source alongside, so the demo doubles as documentation for the appearance API. site/_headers ships a strict CSP for Cloudflare Pages limited to same-origin scripts and styles, which the library already satisfies: test:csp enforces that dist contains no eval or new Function. docs/website.md covers local use and the Cloudflare build settings. Verified in Chromium: no console errors or failed requests, the alert traps focus and returns it to the trigger on Escape, the playground applies a 30px radius and casts its shadow right at 90 degrees, live updates reach an open dialog, and the theme toggle drives the library and the page together. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4 --- .gitignore | 1 + README.md | 7 + docs/website.md | 60 +++++++ package.json | 2 + scripts/build-site.mjs | 20 +++ site/_headers | 8 + site/index.html | 279 ++++++++++++++++++++++++++++ site/site.js | 168 +++++++++++++++++ site/styles.css | 400 +++++++++++++++++++++++++++++++++++++++++ 9 files changed, 945 insertions(+) create mode 100644 docs/website.md create mode 100644 scripts/build-site.mjs create mode 100644 site/_headers create mode 100644 site/index.html create mode 100644 site/site.js create mode 100644 site/styles.css diff --git a/.gitignore b/.gitignore index b99dd22..674b271 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ temp # Claude Code .claude/ CLAUDE.md +site/vendor diff --git a/README.md b/README.md index d74c8b5..36b1d78 100644 --- a/README.md +++ b/README.md @@ -257,6 +257,7 @@ npm run test:consumers # build Vite, Webpack, and Node CJS fixtures npm run validate # run every non-browser quality and packaging gate npm run validate:all # run validate plus the cross-browser suite npm run demo # build and serve the demo/ page +npm run site # build and serve the marketing site in site/ ``` Releases use Changesets (`npm run changeset`) and the protected GitHub release workflow. The @@ -267,6 +268,12 @@ it depends on, are in [docs/releasing.md](docs/releasing.md). Supported baselines are Chrome/Edge 88+, Firefox 78+, Safari 15.4+, and Node.js 20+ for package tooling and SSR imports. +## Website + +`site/` holds a dependency-free landing page with an interactive appearance playground, built and +served with `npm run site`. Deployment and Cloudflare Pages settings are in +[docs/website.md](docs/website.md). + ## Contributing Setup, the checks CI runs, and the gotchas worth knowing are in diff --git a/docs/website.md b/docs/website.md new file mode 100644 index 0000000..12301f4 --- /dev/null +++ b/docs/website.md @@ -0,0 +1,60 @@ +# Website + +The marketing site lives in `site/`. It is hand-written HTML, CSS, and browser JavaScript with no +dependencies and no framework, matching the library it advertises. + +## Running it locally + +```sh +npm run site +``` + +That builds the library, copies `dist/index.global.js` and `dist/index.css` into `site/vendor/`, and +serves `site/`. Use `npm run site:build` on its own if you only need the files. + +`site/vendor/` is generated and git-ignored: the page runs the code from this checkout rather than a +CDN, so what you see is always the build you have. + +## How it is put together + +| File | Role | +| ----------------- | -------------------------------------------------------------------- | +| `site/index.html` | The page. No templating, no placeholders to substitute. | +| `site/styles.css` | Site styling. Its dark mode reads the same `data-fd-theme` attribute | +| | that the library's `setTheme()` sets, so both switch together. | +| `site/site.js` | Demos, the appearance playground, copy buttons, theme toggle. | +| `site/_headers` | Cloudflare Pages response headers, including a strict CSP. | + +The version badge is read from the library's own `VERSION` export at runtime, so nothing has to be +kept in sync by hand and no build step rewrites source files. + +The playground calls `instance.update()` on every control change, which is why the dialog restyles +while it is open rather than needing to be reopened. + +## Deploying to Cloudflare Pages + +Connect the repository in the Cloudflare dashboard (**Workers & Pages → Create → Pages → Connect to +Git**) and use: + +| Setting | Value | +| ---------------------- | -------------------- | +| Framework preset | None | +| Build command | `npm run site:build` | +| Build output directory | `site` | +| Node version | `20` or newer | + +Cloudflare runs `npm ci` before the build command, so no install step is needed. Set the Node +version through a `NODE_VERSION` environment variable if the default is older than 20, which the +package's `engines` field requires. + +The build runs the library's own `npm run build` first, so a broken build fails the deploy rather +than shipping a stale `site/vendor/`. + +### Response headers + +`site/_headers` sets `X-Content-Type-Options`, `Referrer-Policy`, `X-Frame-Options`, and a strict +`Content-Security-Policy` limited to same-origin scripts and styles. The library contains no `eval` +or `new Function` — `npm run test:csp` enforces that — so it runs cleanly under that policy. + +If you add a third-party script, an analytics snippet, or a web font, the CSP has to be widened to +match or the browser will silently block it. diff --git a/package.json b/package.json index 89a272f..b4723d6 100644 --- a/package.json +++ b/package.json @@ -226,6 +226,8 @@ "validate": "npm run typecheck && npm run lint && npm run test:coverage && npm run size && npm run test:treeshake && npm run check:package && npm run api:check && npm run api:subpaths && npm run test:consumers && npm run test:capabilities && npm run test:csp && npm run package:size", "validate:all": "npm run validate && npm run test:e2e", "demo": "npm run build && serve .", + "site:build": "npm run build && node scripts/build-site.mjs", + "site": "npm run site:build && serve site", "prepublishOnly": "npm run build" }, "keywords": [ diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs new file mode 100644 index 0000000..b51a117 --- /dev/null +++ b/scripts/build-site.mjs @@ -0,0 +1,20 @@ +import { copyFile, mkdir, readFile } from 'node:fs/promises'; + +/** + * Copies the built library into the static site so the page runs the code from + * this checkout rather than a CDN. Uses only Node built-ins: the site + * deliberately has no dependencies of its own. + * + * The page reads its version from the library's own `VERSION` export at + * runtime, so nothing here rewrites source files. + */ +const root = new URL('../', import.meta.url); +const vendor = new URL('site/vendor/', root); +const pkg = JSON.parse(await readFile(new URL('package.json', root), 'utf8')); + +await mkdir(vendor, { recursive: true }); +for (const file of ['index.global.js', 'index.css']) { + await copyFile(new URL(`dist/${file}`, root), new URL(file, vendor)); +} + +console.log(`site: vendored ${pkg.name}@${pkg.version} into site/vendor`); diff --git a/site/_headers b/site/_headers new file mode 100644 index 0000000..667fa39 --- /dev/null +++ b/site/_headers @@ -0,0 +1,8 @@ +/* + X-Content-Type-Options: nosniff + Referrer-Policy: strict-origin-when-cross-origin + X-Frame-Options: DENY + Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; base-uri 'none'; form-action 'none'; frame-ancestors 'none' + +/vendor/* + Cache-Control: public, max-age=3600 diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..0e93fa5 --- /dev/null +++ b/site/index.html @@ -0,0 +1,279 @@ + + + + + + ForgeDialog — accessible, dependency-free dialogs for the web + + + + + + + + + +
+
+ + ForgeDialog + … + + Features + Playground + Examples + GitHub + +
+
+ +
+
+

Dialogs that behave themselves.

+

+ A dependency-free TypeScript dialog library built on the native + <dialog> element. Accessible by default, themeable down to individual + components, and small enough that an alert-only bundle stays under 6 KB gzipped. +

+ +
+ + + + +
+ +
+ npm install forgedialog + +
+
+ +
+
+

What you get

+

+ Everything below is in the published package — no plugins to install, no peer + dependencies to satisfy. +

+ +
+
+

Accessible by default

+

+ Focus is trapped and restored, Escape and backdrop clicks are wired up, and ARIA + roles are set for you. Focus detection skips targets that only look focusable. +

+
+
+

Styled per component

+

+ Colour and opacity for the surface, title, body, and border. Corner radius per + corner. Shadows composed from an angle, distance, blur, and strength. +

+
+
+

Hover, drag, and gestures

+

+ Opt-in hover restyling with lift and scale. Draggable dialogs with axis locks, + bounds, keyboard movement, and persisted positions. Swipe-to-dismiss sheets. +

+
+
+

More than alerts

+

+ Drawers, bottom sheets, lightboxes, loading states, toasts, a command palette, and + persisted branching wizards — all from the same core. +

+
+
+

Honest bundles

+

+ Tree-shakable entry points with enforced gzip budgets. Import + forgedialog/alert and you pay for an alert, not the whole library. +

+
+
+

Fits your stack

+

+ ESM, CJS, and a browser global, with adapters for React, Vue, Svelte, and Web + Components. Typed throughout, SSR-safe, and clean under a strict CSP. +

+
+
+
+
+ +
+
+

Playground

+

+ Change anything below and the dialog restyles live. The code updates with it — copy it + and you have the same dialog in your app. +

+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+ +
+ +
+
+
+
+
+ +
+
+

Examples

+

+ The everyday calls. Each returns a promise, so there is no callback nesting. +

+ +
+
+

Replace the browser built-ins

+
+ + 
import { alert, confirm, prompt } from 'forgedialog';
+import 'forgedialog/style.css';
+
+await alert('Saved successfully.', { title: 'Success' });
+
+const ok = await confirm('Delete this item?');
+
+const name = await prompt('What is your name?', {
+  validate: (value) => value.trim() ? true : 'Name is required',
+});
+
+
+ +
+

Build your own dialog

+
+ + 
import { open } from 'forgedialog';
+
+const dialog = open({
+  title: 'Custom dialog',
+  content: (container) => container.append(renderForm()),
+  buttons: [
+    { text: 'Cancel', onClick: (i) => i.close(null) },
+    { text: 'Save', role: 'primary', onClick: (i) => i.close(read()) },
+  ],
+});
+
+const result = await dialog.whenClosed();
+
+
+ +
+

Pay only for what you use

+
+ + 
// Just an alert, and nothing else.
+import { alert } from 'forgedialog/alert';
+import 'forgedialog/style/core.css';
+
+// Opt into the richer appearance options on a focused entry.
+import 'forgedialog/appearance';
+
+
+ +
+

Beyond dialogs

+
+ + 
import { drawer, toast, wizard } from 'forgedialog';
+
+// A duration of 0 keeps the toast until dismiss() is called.
+const upload = toast('Uploading…', { duration: 0 });
+
+drawer({ title: 'Settings', side: 'right', content: renderSettings });
+
+const data = await wizard({ steps }).result;
+
+
+
+
+
+
+ +
+
+ MIT licensed. Built with no runtime dependencies. + + GitHub · + npm · + Changelog + +
+
+ + + + + diff --git a/site/site.js b/site/site.js new file mode 100644 index 0000000..bb9ebab --- /dev/null +++ b/site/site.js @@ -0,0 +1,168 @@ +/* ForgeDialog site behaviour. Plain browser JS against the global build. */ +/* global ForgeDialog */ + +(() => { + const { alert, confirm, prompt, open, setTheme, VERSION } = ForgeDialog; + const $ = (selector) => document.querySelector(selector); + + $('#version').textContent = `v${VERSION}`; + + /* Theme ---------------------------------------------------------------- */ + + const themeToggle = $('#theme-toggle'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + function applyTheme(dark) { + // setTheme drives the library's own tokens; the attribute it sets on + // is the same hook this page's stylesheet reads, so both stay in step. + setTheme(dark ? 'dark' : 'light'); + themeToggle.textContent = dark ? 'Light' : 'Dark'; + themeToggle.setAttribute('aria-pressed', String(dark)); + } + + applyTheme(prefersDark.matches); + themeToggle.addEventListener('click', () => { + applyTheme(themeToggle.getAttribute('aria-pressed') !== 'true'); + }); + + /* Copy buttons --------------------------------------------------------- */ + + for (const button of document.querySelectorAll('.copy')) { + button.addEventListener('click', async () => { + const text = $(button.dataset.copy).textContent; + const original = button.textContent; + try { + await navigator.clipboard.writeText(text); + button.textContent = 'Copied'; + } catch { + // Clipboard access can be refused; say so rather than looking broken. + button.textContent = 'Press Ctrl+C'; + } + setTimeout(() => { + button.textContent = original; + }, 1600); + }); + } + + /* Hero demos ----------------------------------------------------------- */ + + $('#try-alert').addEventListener('click', () => { + void alert('Focus is trapped here, and returns to the button when this closes.', { + title: 'Heads up', + }); + }); + + $('#try-confirm').addEventListener('click', async () => { + const result = await confirm('Escape and the backdrop both resolve this to false.', { + title: 'Please confirm', + }); + void alert(`confirm() resolved ${result}.`, { title: 'Result' }); + }); + + $('#try-prompt').addEventListener('click', async () => { + const value = await prompt('Try submitting it empty.', { + title: 'What should we call you?', + defaultValue: 'Ada Lovelace', + validate: (input) => (input.trim() ? true : 'A name is required'), + }); + if (value !== null) void alert(`Nice to meet you, ${value}.`, { title: 'Result' }); + }); + + $('#try-wizard').addEventListener('click', () => openPlayground()); + + /* Playground ----------------------------------------------------------- */ + + const controls = { + surface: $('#c-surface'), + title: $('#c-title'), + titleBg: $('#c-title-bg'), + titleBgOn: $('#c-title-bg-on'), + border: $('#c-border'), + borderWidth: $('#c-border-width'), + radius: $('#c-radius'), + angle: $('#c-angle'), + distance: $('#c-distance'), + strength: $('#c-strength'), + hover: $('#c-hover'), + draggable: $('#c-draggable'), + }; + + const outputs = { + borderWidth: $('#o-border-width'), + radius: $('#o-radius'), + angle: $('#o-angle'), + distance: $('#o-distance'), + strength: $('#o-strength'), + }; + + function readOptions() { + const appearance = { + surfaceColor: controls.surface.value, + titleColor: controls.title.value, + borderColor: controls.border.value, + borderWidth: Number(controls.borderWidth.value), + radius: Number(controls.radius.value), + shadow: { + angle: Number(controls.angle.value), + distance: Number(controls.distance.value), + blur: 48, + opacity: Number(controls.strength.value), + }, + }; + + if (controls.titleBgOn.checked) appearance.titleBackground = controls.titleBg.value; + if (controls.hover.checked) { + appearance.hover = { + borderColor: '#ff9f1c', + titleColor: '#ff9f1c', + lift: 6, + scale: 1.02, + shadow: 'xl', + }; + } + + return { + title: 'Styled with the appearance API', + message: + 'Every colour, the corner radius, and the shadow direction come from the controls on the left. Drag me by the header.', + appearance, + draggable: controls.draggable.checked ? { bounds: 'viewport' } : false, + buttons: [{ text: 'Close', role: 'primary', closesDialog: true }], + }; + } + + function toSource(options) { + // JSON gives stable, readable output; the small fixups below turn it into + // something that can be pasted straight into a source file. + const body = JSON.stringify(options, null, 2) + .replace(/"([A-Za-z][A-Za-z0-9]*)":/g, '$1:') + .replace(/"/g, "'"); + return `import { open } from 'forgedialog';\nimport 'forgedialog/style.css';\n\nopen(${body});`; + } + + let preview; + + function refresh() { + outputs.borderWidth.textContent = `${controls.borderWidth.value}px`; + outputs.radius.textContent = `${controls.radius.value}px`; + outputs.angle.textContent = `${controls.angle.value}°`; + outputs.distance.textContent = `${controls.distance.value}px`; + outputs.strength.textContent = Number(controls.strength.value).toFixed(2); + + const options = readOptions(); + $('#playground-code').textContent = toSource(options); + preview?.update(options); + } + + function openPlayground() { + if (preview?.isOpen()) return; + preview = open(readOptions()); + preview.whenClosed().then(() => { + preview = undefined; + }); + } + + $('#controls').addEventListener('input', refresh); + $('#open-playground').addEventListener('click', openPlayground); + refresh(); +})(); diff --git a/site/styles.css b/site/styles.css new file mode 100644 index 0000000..0fbdfe1 --- /dev/null +++ b/site/styles.css @@ -0,0 +1,400 @@ +/* ForgeDialog site. Hand-written, no build step, no dependencies. */ + +:root { + color-scheme: light dark; + + --page: #f6f7f9; + --surface: #ffffff; + --surface-2: #f0f2f5; + --text: #14171c; + --muted: #5b6270; + --border: #e0e3e9; + --accent: #4c5fd7; + --accent-text: #ffffff; + --code-bg: #14161d; + --code-text: #e6e8ef; + --radius: 12px; + --wrap: 1080px; + --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-fd-theme='light']) { + --page: #0e1014; + --surface: #171a21; + --surface-2: #1f232c; + --text: #eceef3; + --muted: #9aa1ad; + --border: #2b303a; + --accent: #8896ff; + --accent-text: #0e1014; + } +} + +:root[data-fd-theme='dark'] { + --page: #0e1014; + --surface: #171a21; + --surface-2: #1f232c; + --text: #eceef3; + --muted: #9aa1ad; + --border: #2b303a; + --accent: #8896ff; + --accent-text: #0e1014; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font); + color: var(--text); + background: var(--page); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +a { + color: inherit; +} + +.wrap { + width: 100%; + max-width: var(--wrap); + margin-inline: auto; + padding-inline: 20px; +} + +/* Header ------------------------------------------------------------------ */ + +.site-header { + position: sticky; + top: 0; + z-index: 10; + background: color-mix(in srgb, var(--page) 88%, transparent); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); +} + +.site-header .wrap { + display: flex; + align-items: center; + gap: 16px; + min-height: 60px; +} + +.brand { + display: flex; + align-items: baseline; + gap: 8px; + font-weight: 700; + font-size: 1.05rem; + text-decoration: none; + margin-inline-end: auto; +} + +.version { + font: 600 0.72rem/1 var(--mono); + color: var(--muted); + padding: 4px 7px; + border: 1px solid var(--border); + border-radius: 999px; +} + +.nav-link { + color: var(--muted); + text-decoration: none; + font-size: 0.92rem; +} + +.nav-link:hover, +.nav-link:focus-visible { + color: var(--text); +} + +/* Buttons ----------------------------------------------------------------- */ + +.btn { + font: inherit; + font-size: 0.92rem; + padding: 9px 16px; + border-radius: 9px; + border: 1px solid var(--border); + background: var(--surface); + color: var(--text); + cursor: pointer; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + transition: + background-color 140ms ease, + border-color 140ms ease; +} + +.btn:hover { + background: var(--surface-2); +} + +.btn--primary { + background: var(--accent); + border-color: var(--accent); + color: var(--accent-text); + font-weight: 600; +} + +.btn--primary:hover { + filter: brightness(1.08); + background: var(--accent); +} + +.btn--sm { + padding: 6px 11px; + font-size: 0.85rem; +} + +/* Hero -------------------------------------------------------------------- */ + +.hero { + padding: 72px 0 56px; + text-align: center; +} + +.hero h1 { + font-size: clamp(2.1rem, 6vw, 3.3rem); + line-height: 1.12; + letter-spacing: -0.02em; + margin: 0 0 16px; +} + +.hero p.lead { + font-size: clamp(1rem, 2.4vw, 1.18rem); + color: var(--muted); + max-width: 62ch; + margin: 0 auto 28px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-bottom: 28px; +} + +.install { + display: inline-flex; + align-items: center; + gap: 12px; + background: var(--code-bg); + color: var(--code-text); + font: 0.92rem/1 var(--mono); + padding: 12px 12px 12px 18px; + border-radius: 10px; +} + +.install code { + font: inherit; +} + +.copy { + font: inherit; + font-size: 0.78rem; + padding: 6px 10px; + border-radius: 6px; + border: 1px solid #3a3f4d; + background: #232833; + color: var(--code-text); + cursor: pointer; +} + +.copy:hover { + background: #2d323e; +} + +/* Sections ---------------------------------------------------------------- */ + +section { + padding: 56px 0; + border-top: 1px solid var(--border); +} + +section h2 { + font-size: clamp(1.4rem, 3.4vw, 1.9rem); + letter-spacing: -0.01em; + margin: 0 0 8px; +} + +section p.section-lead { + color: var(--muted); + margin: 0 0 28px; + max-width: 66ch; +} + +/* Features ---------------------------------------------------------------- */ + +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 16px; +} + +.feature { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 20px; +} + +.feature h3 { + margin: 0 0 6px; + font-size: 1rem; +} + +.feature p { + margin: 0; + color: var(--muted); + font-size: 0.92rem; +} + +/* Playground -------------------------------------------------------------- */ + +.playground { + display: grid; + grid-template-columns: minmax(0, 320px) minmax(0, 1fr); + gap: 20px; + align-items: start; +} + +@media (max-width: 820px) { + .playground { + grid-template-columns: 1fr; + } +} + +.controls { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 18px; + display: grid; + gap: 14px; +} + +.control { + display: grid; + gap: 6px; + font-size: 0.85rem; +} + +.control label { + color: var(--muted); + display: flex; + justify-content: space-between; + gap: 10px; +} + +.control output { + font: 0.8rem/1 var(--mono); + color: var(--text); +} + +.control input[type='range'] { + width: 100%; + accent-color: var(--accent); +} + +.control input[type='color'] { + width: 100%; + height: 34px; + padding: 2px; + border: 1px solid var(--border); + border-radius: 7px; + background: var(--surface-2); + cursor: pointer; +} + +.control--row { + display: flex; + align-items: center; + gap: 9px; + font-size: 0.85rem; + color: var(--muted); +} + +.control--row input { + accent-color: var(--accent); +} + +pre { + margin: 0; + background: var(--code-bg); + color: var(--code-text); + padding: 18px; + border-radius: var(--radius); + overflow-x: auto; + font: 0.86rem/1.65 var(--mono); + tab-size: 2; +} + +pre code { + font: inherit; +} + +.snippet { + position: relative; +} + +.snippet .copy { + position: absolute; + top: 10px; + inset-inline-end: 10px; +} + +.examples { + display: grid; + gap: 18px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); +} + +.example h3 { + font-size: 0.95rem; + margin: 0 0 10px; +} + +/* Footer ------------------------------------------------------------------ */ + +.site-footer { + border-top: 1px solid var(--border); + padding: 32px 0 48px; + color: var(--muted); + font-size: 0.88rem; +} + +.site-footer .wrap { + display: flex; + flex-wrap: wrap; + gap: 12px 20px; + align-items: center; + justify-content: space-between; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@media (prefers-reduced-motion: reduce) { + * { + transition-duration: 1ms !important; + } +} From d9c567d4714399bb7a1655b492c469339f530bed Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 1 Sep 2026 23:55:17 +0000 Subject: [PATCH 2/7] Add site docs and icon, rename the product to Forge Dialog, and optimise for search and answer engines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The site had a landing page and an emoji favicon; it now has a full API reference, a real mark, and the metadata that search engines and answer engines read. Naming: the product is Forge Dialog, two words, and every page and document now says so. Identifiers keep the one-word spelling because that is what they are: the npm package (forgedialog), the browser global (ForgeDialog), the custom element (forge-dialog), and the repository. Nothing under src/ changed, so the published API and its runtime strings are untouched. Docs: site/docs.html is a 23-section reference written against the reviewed API report in etc/, covering every option, method, and entry point. The shared chrome (version badge, theme toggle, copy buttons) moved out of site.js into common.js so both pages use it without the landing page's demo wiring. Icon: site/icon.svg is the source of truth and the favicon browsers load. scripts/build-icons.mjs renders the committed apple-touch-icon.png and og-image.png from it through Chromium, which is already a dev dependency. The touch variant squares off the mark's ground because iOS applies its own mask. The first draft of the OG image used a gradient and cost 296 KB; a flat ground looks the same at preview size and costs 37 KB. SEO: canonical, og:url, and og:image are absolute. The canonical tag in index.html is the single source of truth for the domain — build-site.mjs reads it back to generate sitemap.xml, robots.txt, and llms.txt, so moving the site is an edit to the canonical tags and nothing else. Both pages carry JSON-LD; the FAQ entries are generated from the visible questions so the markup and the page cannot disagree. Answer engines: llms.txt follows the llmstxt.org convention and states the facts models most often get wrong, with the version read from package.json so it cannot drift. robots.txt names the AI crawlers explicitly rather than leaving them to the default, and deliberately does not disallow /vendor/ — blocking a site's own CSS and JS is what breaks rendering for crawlers. Two layout bugs found while measuring, both pre-existing: - The header never wrapped, so at 380px the page scrolled sideways by 102px. - The playground's grid track had an automatic minimum of min-content, which the long code lines inside .snippet pushed open — 812px of horizontal overflow at 320px. Capping the track at minmax(0, 1fr) and giving .snippet min-width: 0 fixes it. Both pages now fit at 320, 380, 480, and 768px with zero horizontal overflow. Verified in Chromium against the production CSP: no console errors and no failed requests on either page, the inline JSON-LD survives script-src 'self' (it is a data block, not an executable script), all 23 sidebar links resolve to real sections, scroll-spy tracks the section being read, the hero alert still gets role="alertdialog" with focus returning to its trigger, and robots.txt, sitemap.xml, llms.txt, and all three icons serve with the right content types. npm run validate and format:check pass. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4 --- .github/ISSUE_TEMPLATE/bug_report.yml | 4 +- .github/ISSUE_TEMPLATE/feature_request.yml | 4 +- .gitignore | 5 + .prettierignore | 4 + AGENTS.md | 4 +- CONTRIBUTING.md | 4 +- README.md | 16 +- SECURITY.md | 4 +- demo/index.html | 4 +- docs/architecture.md | 4 +- docs/migration-0.5.md | 2 +- docs/releasing.md | 4 +- docs/website.md | 83 +- package.json | 1 + scripts/build-icons.mjs | 73 + scripts/build-site.mjs | 115 +- site/apple-touch-icon.png | Bin 0 -> 7993 bytes site/common.js | 47 + site/docs.html | 1403 ++++++++++++++++++++ site/docs.js | 30 + site/icon.svg | 25 + site/index.html | 276 +++- site/og-image.png | Bin 0 -> 37622 bytes site/site.js | 44 +- site/styles.css | 248 +++- 25 files changed, 2310 insertions(+), 94 deletions(-) create mode 100644 scripts/build-icons.mjs create mode 100644 site/apple-touch-icon.png create mode 100644 site/common.js create mode 100644 site/docs.html create mode 100644 site/docs.js create mode 100644 site/icon.svg create mode 100644 site/og-image.png diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 529ad46..ee386a4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,5 +1,5 @@ name: Bug report -description: Something in ForgeDialog behaves differently than documented +description: Something in Forge Dialog behaves differently than documented labels: ['bug'] body: - type: markdown @@ -12,7 +12,7 @@ body: - type: input id: version attributes: - label: ForgeDialog version + label: Forge Dialog version placeholder: 0.7.0 validations: required: true diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index 7857d7e..95edaf8 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -1,5 +1,5 @@ name: Feature request -description: Suggest a capability ForgeDialog does not have yet +description: Suggest a capability Forge Dialog does not have yet labels: ['enhancement'] body: - type: textarea @@ -33,7 +33,7 @@ body: attributes: label: Does this fit the project's constraints? description: | - ForgeDialog is dependency-free, framework-agnostic, accessible by default, + Forge Dialog is dependency-free, framework-agnostic, accessible by default, and holds its bundles to gzip budgets. Proposals that conflict with those are still worth raising — just say so. options: diff --git a/.gitignore b/.gitignore index 674b271..c910341 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,8 @@ temp .claude/ CLAUDE.md site/vendor + +# Generated by scripts/build-site.mjs +site/robots.txt +site/sitemap.xml +site/llms.txt diff --git a/.prettierignore b/.prettierignore index acb948d..7fcc0a2 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,3 +6,7 @@ playwright-report test-results temp .consumer-builds +site/vendor +site/robots.txt +site/sitemap.xml +site/llms.txt diff --git a/AGENTS.md b/AGENTS.md index 2c5b715..a17277c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -2,7 +2,7 @@ ## Project Structure & Module Organization -ForgeDialog is a framework-agnostic TypeScript dialog library. Public exports begin in `src/index.ts`. High-level helpers live in `src/api/`, dialog behavior and accessibility primitives in `src/core/`, plugin support in `src/plugins/`, localization defaults in `src/i18n/`, and CSS plus theme helpers in `src/theme/`. Shared public types are in `src/types.ts`, while small internal helpers belong in `src/utils/`. +Forge Dialog is a framework-agnostic TypeScript dialog library. Public exports begin in `src/index.ts`. High-level helpers live in `src/api/`, dialog behavior and accessibility primitives in `src/core/`, plugin support in `src/plugins/`, localization defaults in `src/i18n/`, and CSS plus theme helpers in `src/theme/`. Shared public types are in `src/types.ts`, while small internal helpers belong in `src/utils/`. Tests mirror these areas under `tests/` and use the `*.test.ts` suffix. Global test setup is in `tests/setup.ts`. `demo/index.html` is the manual browser demo. Generated output goes to `dist/`; do not edit or commit generated files unless a release workflow explicitly requires it. @@ -28,4 +28,4 @@ Vitest runs in jsdom and discovers `tests/**/*.test.ts`. Place focused tests bes ## Commit & Pull Request Guidelines -Existing commits use concise, imperative summaries such as `Add ForgeDialog core: ...`. Keep each commit scoped and explain the user-visible outcome. Pull requests should include a clear description, relevant issue links, verification commands, and tests. Add screenshots or a short recording for visual, animation, or demo changes, and call out API or accessibility impacts explicitly. +Existing commits use concise, imperative summaries such as `Add Forge Dialog core: ...`. Keep each commit scoped and explain the user-visible outcome. Pull requests should include a clear description, relevant issue links, verification commands, and tests. Add screenshots or a short recording for visual, animation, or demo changes, and call out API or accessibility impacts explicitly. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e5f2003..9b58164 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ -# Contributing to ForgeDialog +# Contributing to Forge Dialog -Thanks for helping out. ForgeDialog is a dependency-free TypeScript dialog library, so most +Thanks for helping out. Forge Dialog is a dependency-free TypeScript dialog library, so most contributions touch `src/`, its tests, and the checks that keep the published package honest. ## Getting set up diff --git a/README.md b/README.md index 36b1d78..09c079c 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# ForgeDialog 0.7 +# Forge Dialog 0.7 _A modern, lightweight, and highly customizable JavaScript dialog library for alerts, confirmations, modals, drawers, and interactive workflows._ -ForgeDialog is a next-generation dialog component built for modern web applications. It provides beautiful animations, flexible layouts, accessibility, and a powerful API while remaining lightweight, dependency-free, and framework-agnostic. +Forge Dialog is a next-generation dialog component built for modern web applications. It provides beautiful animations, flexible layouts, accessibility, and a powerful API while remaining lightweight, dependency-free, and framework-agnostic. -Designed to replace traditional browser dialogs and heavy modal libraries, ForgeDialog makes it easy to build elegant user interactions — from simple alert boxes to complex multi-step workflows. +Designed to replace traditional browser dialogs and heavy modal libraries, Forge Dialog makes it easy to build elegant user interactions — from simple alert boxes to complex multi-step workflows. ## Highlights @@ -176,7 +176,7 @@ import { alert } from 'forgedialog/alert'; ## Advanced UI and workflows -ForgeDialog uses the native `` top layer and adds typed outcomes, close reasons, +Forge Dialog uses the native `` top layer and adds typed outcomes, close reasons, `AbortSignal`, drawers, bottom sheets, lightboxes, loading states, toast notifications, command palettes, and persisted branching wizards. @@ -258,6 +258,7 @@ npm run validate # run every non-browser quality and packaging gate npm run validate:all # run validate plus the cross-browser suite npm run demo # build and serve the demo/ page npm run site # build and serve the marketing site in site/ +npm run site:icons # re-render the site's PNG icons from site/icon.svg ``` Releases use Changesets (`npm run changeset`) and the protected GitHub release workflow. The @@ -270,9 +271,10 @@ tooling and SSR imports. ## Website -`site/` holds a dependency-free landing page with an interactive appearance playground, built and -served with `npm run site`. Deployment and Cloudflare Pages settings are in -[docs/website.md](docs/website.md). +`site/` holds a dependency-free landing page with an interactive appearance playground, plus a +full API reference at `site/docs.html`. Build and serve both with `npm run site`. The icon, the +generated `sitemap.xml` / `robots.txt` / `llms.txt`, the structured data, and the Cloudflare Pages +settings are covered in [docs/website.md](docs/website.md). ## Contributing diff --git a/SECURITY.md b/SECURITY.md index c9b67f8..c1d62ca 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -2,7 +2,7 @@ ## Supported versions -ForgeDialog is pre-1.0. Fixes land on the most recent minor line; older `0.x` lines are not +Forge Dialog is pre-1.0. Fixes land on the most recent minor line; older `0.x` lines are not patched. | Version | Supported | @@ -25,7 +25,7 @@ credited in the advisory unless you prefer otherwise. ## Scope -ForgeDialog renders UI in the browser and ships no server component, so most reports will concern +Forge Dialog renders UI in the browser and ships no server component, so most reports will concern how untrusted content reaches the DOM. **In scope** diff --git a/demo/index.html b/demo/index.html index 6b7f2c5..b66ca6a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ - ForgeDialog Demo + Forge Dialog Demo -

ForgeDialog Demo

+

Forge Dialog Demo

Manual verification page for alert / confirm / prompt / open() and stacking.

diff --git a/docs/architecture.md b/docs/architecture.md index a363251..45ec7d3 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -1,6 +1,6 @@ -# ForgeDialog Architecture +# Forge Dialog Architecture -ForgeDialog is split into a dependency-free runtime and optional presentation, workflow, and +Forge Dialog is split into a dependency-free runtime and optional presentation, workflow, and framework entry points. `src/core/Dialog.ts` owns the state machine and native `` lifecycle; `DialogStack` coordinates Escape handling and scroll locking. DOM construction remains isolated in `domBuilder` so render behavior can evolve independently from orchestration. diff --git a/docs/migration-0.5.md b/docs/migration-0.5.md index 6e97229..2cec58b 100644 --- a/docs/migration-0.5.md +++ b/docs/migration-0.5.md @@ -1,4 +1,4 @@ -# Migrating to ForgeDialog 0.5 +# Migrating to Forge Dialog 0.5 Version 0.5 keeps the main `forgedialog` entry backward compatible. Existing imports continue to include advanced dragging and animation presets, so most applications need no code changes. diff --git a/docs/releasing.md b/docs/releasing.md index ed98de7..a60310c 100644 --- a/docs/releasing.md +++ b/docs/releasing.md @@ -1,6 +1,6 @@ # Releasing -ForgeDialog publishes to npm from GitHub Actions using npm **trusted publishing** (OIDC), so no +Forge Dialog publishes to npm from GitHub Actions using npm **trusted publishing** (OIDC), so no `NPM_TOKEN` secret is stored in the repository. The workflow is `.github/workflows/release.yml`. ## One-time setup @@ -69,7 +69,7 @@ accident before you are ready. 4. Tag the merge commit and push the tag: ```sh - git tag -a v0.7.0 -m "ForgeDialog v0.7.0" + git tag -a v0.7.0 -m "Forge Dialog v0.7.0" git push origin v0.7.0 ``` diff --git a/docs/website.md b/docs/website.md index 12301f4..2b6d027 100644 --- a/docs/website.md +++ b/docs/website.md @@ -9,21 +9,26 @@ dependencies and no framework, matching the library it advertises. npm run site ``` -That builds the library, copies `dist/index.global.js` and `dist/index.css` into `site/vendor/`, and -serves `site/`. Use `npm run site:build` on its own if you only need the files. +That builds the library, copies `dist/index.global.js` and `dist/index.css` into `site/vendor/`, +writes `robots.txt`, `sitemap.xml`, and `llms.txt`, and serves `site/`. Use `npm run site:build` on +its own if you only need the files. `site/vendor/` is generated and git-ignored: the page runs the code from this checkout rather than a CDN, so what you see is always the build you have. ## How it is put together -| File | Role | -| ----------------- | -------------------------------------------------------------------- | -| `site/index.html` | The page. No templating, no placeholders to substitute. | -| `site/styles.css` | Site styling. Its dark mode reads the same `data-fd-theme` attribute | -| | that the library's `setTheme()` sets, so both switch together. | -| `site/site.js` | Demos, the appearance playground, copy buttons, theme toggle. | -| `site/_headers` | Cloudflare Pages response headers, including a strict CSP. | +| File | Role | +| ----------------- | --------------------------------------------------------------------- | +| `site/index.html` | The landing page: demos, appearance playground, facts table, and FAQ. | +| `site/docs.html` | The API reference, written against the reviewed report in `etc/`. | +| `site/styles.css` | Site styling. Its dark mode reads the same `data-fd-theme` attribute | +| | that the library's `setTheme()` sets, so both switch together. | +| `site/common.js` | Shared chrome: version badge, theme toggle, copy buttons. | +| `site/site.js` | Landing-page demos and the appearance playground. | +| `site/docs.js` | Highlights the sidebar entry for the section being read. | +| `site/icon.svg` | The mark, and the favicon browsers actually load. | +| `site/_headers` | Cloudflare Pages response headers, including a strict CSP. | The version badge is read from the library's own `VERSION` export at runtime, so nothing has to be kept in sync by hand and no build step rewrites source files. @@ -31,6 +36,59 @@ kept in sync by hand and no build step rewrites source files. The playground calls `instance.update()` on every control change, which is why the dialog restyles while it is open rather than needing to be reopened. +### Naming + +The product is **Forge Dialog**, two words, and that is how every page, heading, and document +refers to it. The npm package (`forgedialog`), the browser global (`ForgeDialog`), the custom +element (`forge-dialog`), and the repository name stay as they are: they are identifiers, not +prose. + +## Icons + +`site/icon.svg` is the source of truth and is what browsers load as the favicon. Two bitmaps are +committed beside it because SVG is not enough everywhere: + +| File | Size | Used by | +| --------------------------- | -------- | ------------------------------ | +| `site/apple-touch-icon.png` | 180×180 | iOS home screens | +| `site/og-image.png` | 1200×630 | Link previews and social cards | + +Both are rendered from `icon.svg` through Chromium, which is already a dev dependency: + +```sh +npm run site:icons +``` + +Run it only when the icon changes; neither the site build nor a deploy runs it. The apple-touch +variant squares off the mark's ground (via `#ground { rx: 0 }`) because iOS applies its own rounded +mask and would otherwise round it twice. + +## SEO and answer engines + +The canonical origin is declared once, in the `` tag of `site/index.html`. +`scripts/build-site.mjs` reads it back to generate every other absolute URL, so **moving the site +to another domain means editing the canonical tags in `index.html` and `docs.html` and nothing +else** — the sitemap, `robots.txt`, and `llms.txt` follow automatically. + +Generated on each build, and git-ignored: + +- **`sitemap.xml`** — both pages with a `lastmod` date. +- **`robots.txt`** — allows everything, names the sitemap, and explicitly allows the answer-engine + crawlers (ClaudeBot, GPTBot, PerplexityBot, Google-Extended, and friends). It deliberately does + **not** disallow `/vendor/`: blocking a site's own CSS and JavaScript is what breaks rendering + for search crawlers. +- **`llms.txt`** — the [llmstxt.org](https://llmstxt.org) convention. A short, factual summary a + language model can quote: version, licence, install command, size, browser support, and links to + both pages. The version comes from `package.json`, so it cannot drift. + +Both pages carry JSON-LD structured data. The landing page describes itself as a `WebSite`, a +`SoftwareApplication`, and an `FAQPage`; the reference page as a `TechArticle` with a +`BreadcrumbList`. The FAQ entries are generated from the visible questions and answers, so the +markup and the page cannot disagree. + +The FAQ and the "At a glance" table exist for the same reason: they state the facts about Forge +Dialog in self-contained sentences, which is what both search snippets and answer engines quote. + ## Deploying to Cloudflare Pages Connect the repository in the Cloudflare dashboard (**Workers & Pages → Create → Pages → Connect to @@ -50,11 +108,16 @@ package's `engines` field requires. The build runs the library's own `npm run build` first, so a broken build fails the deploy rather than shipping a stale `site/vendor/`. +Point the custom domain at the project in **Pages → Custom domains**. It has to match the canonical +tags, or search engines will be told the page lives somewhere it does not. + ### Response headers `site/_headers` sets `X-Content-Type-Options`, `Referrer-Policy`, `X-Frame-Options`, and a strict `Content-Security-Policy` limited to same-origin scripts and styles. The library contains no `eval` -or `new Function` — `npm run test:csp` enforces that — so it runs cleanly under that policy. +or `new Function` — `npm run test:csp` enforces that — so it runs cleanly under that policy. The +inline JSON-LD is a data block rather than an executable script, so `script-src 'self'` does not +block it. If you add a third-party script, an analytics snippet, or a web font, the CSP has to be widened to match or the browser will silently block it. diff --git a/package.json b/package.json index b4723d6..e6340a9 100644 --- a/package.json +++ b/package.json @@ -227,6 +227,7 @@ "validate:all": "npm run validate && npm run test:e2e", "demo": "npm run build && serve .", "site:build": "npm run build && node scripts/build-site.mjs", + "site:icons": "node scripts/build-icons.mjs", "site": "npm run site:build && serve site", "prepublishOnly": "npm run build" }, diff --git a/scripts/build-icons.mjs b/scripts/build-icons.mjs new file mode 100644 index 0000000..28eab81 --- /dev/null +++ b/scripts/build-icons.mjs @@ -0,0 +1,73 @@ +import { chromium } from '@playwright/test'; +import { readFile, writeFile } from 'node:fs/promises'; + +/** + * Rasterizes `site/icon.svg` into the bitmap icons the web still needs. + * + * The SVG is the source of truth and is what browsers actually load as the + * favicon; only iOS home screens and link-preview scrapers need PNGs. Those + * PNGs are committed, so neither the site build nor a Cloudflare deploy runs + * this — run it by hand (`npm run site:icons`) whenever the icon changes. + * + * Rendering goes through Chromium, which is already a dev dependency for the + * end-to-end tests, rather than a hand-rolled rasterizer. + */ +const root = new URL('../', import.meta.url); +const site = new URL('site/', root); +const icon = await readFile(new URL('icon.svg', site), 'utf8'); + +const browser = await chromium.launch(); + +/** Renders `html` at exactly `width`×`height` and writes it out as a PNG. */ +async function render(name, width, height, html) { + const page = await browser.newPage({ viewport: { width, height } }); + await page.setContent( + ` + ${html}`, + { waitUntil: 'load' }, + ); + const buffer = await page.screenshot({ type: 'png' }); + await page.close(); + await writeFile(new URL(name, site), buffer); + console.log(`icons: ${name} (${width}×${height}, ${buffer.length} bytes)`); +} + +// iOS applies its own rounded mask to home-screen icons, so this variant +// squares off the ground the mark sits on rather than being rounded twice. +await render( + 'apple-touch-icon.png', + 180, + 180, + `${icon}`, +); + +// The link preview: the mark, the name, and what the thing is. The ground is +// a flat colour rather than a gradient — it looks the same at preview size and +// costs a fraction of the bytes in a repository that advertises being small. +await render( + 'og-image.png', + 1200, + 630, + ` +
${icon}

Forge Dialog

+

Accessible, dependency-free dialogs for the web.

+ npm install forgedialog`, +); + +await browser.close(); diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs index b51a117..d8df470 100644 --- a/scripts/build-site.mjs +++ b/scripts/build-site.mjs @@ -1,15 +1,17 @@ -import { copyFile, mkdir, readFile } from 'node:fs/promises'; +import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises'; /** * Copies the built library into the static site so the page runs the code from - * this checkout rather than a CDN. Uses only Node built-ins: the site - * deliberately has no dependencies of its own. + * this checkout rather than a CDN, then writes the files that have to name the + * site's own address: robots.txt, sitemap.xml, and llms.txt. * - * The page reads its version from the library's own `VERSION` export at - * runtime, so nothing here rewrites source files. + * Uses only Node built-ins: the site deliberately has no dependencies of its + * own. The page reads its version from the library's `VERSION` export at + * runtime, so nothing here rewrites a source file. */ const root = new URL('../', import.meta.url); -const vendor = new URL('site/vendor/', root); +const site = new URL('site/', root); +const vendor = new URL('vendor/', site); const pkg = JSON.parse(await readFile(new URL('package.json', root), 'utf8')); await mkdir(vendor, { recursive: true }); @@ -17,4 +19,105 @@ for (const file of ['index.global.js', 'index.css']) { await copyFile(new URL(`dist/${file}`, root), new URL(file, vendor)); } +/** + * The canonical tag in index.html is the single source of truth for the site's + * address, so moving the site is a one-line edit there rather than a hunt + * through generated files. + */ +const indexHtml = await readFile(new URL('index.html', site), 'utf8'); +const canonical = indexHtml.match(/, cannot build'); +const origin = new URL(canonical).origin; + +const pages = [ + { + path: '/', + priority: '1.0', + title: 'Forge Dialog', + summary: 'What it is, live demos, and an interactive appearance playground.', + }, + { + path: '/docs.html', + priority: '0.9', + title: 'API reference', + summary: + 'Every option, method, and entry point: dialogs, appearance, dragging, forms, wizards, toasts, theming, plugins, and framework adapters.', + }, +]; +const lastmod = new Date().toISOString().slice(0, 10); + +await writeFile( + new URL('sitemap.xml', site), + ` + +${pages + .map( + (page) => + ` \n ${origin}${page.path}\n ${lastmod}\n ${page.priority}\n `, + ) + .join('\n')} + +`, +); + +// Answer engines are welcome here: the point of the site is to be quoted +// accurately, so the crawlers behind them are named rather than left to the +// default. +const aiCrawlers = [ + 'ClaudeBot', + 'Claude-User', + 'GPTBot', + 'OAI-SearchBot', + 'ChatGPT-User', + 'PerplexityBot', + 'Google-Extended', + 'Applebot-Extended', + 'CCBot', +]; + +await writeFile( + new URL('robots.txt', site), + // /vendor/ holds the library build the pages actually render with, so it stays + // crawlable: blocking a site's own CSS and JS is what breaks rendering. + `User-agent: * +Allow: / + +${aiCrawlers.map((agent) => `User-agent: ${agent}\nAllow: /`).join('\n\n')} + +Sitemap: ${origin}/sitemap.xml +`, +); + +// https://llmstxt.org — a short, stable map of the site for language models, +// with the facts they most often get wrong stated once, plainly. +await writeFile( + new URL('llms.txt', site), + `# Forge Dialog + +> Forge Dialog is an open-source TypeScript library for building dialogs on the web: alerts, confirmations, prompts, drawers, bottom sheets, lightboxes, loading states, toasts, command palettes, and multi-step wizards. It has no runtime dependencies. + +The product is named **Forge Dialog** (two words). The npm package is \`forgedialog\` (one word), and the browser global is \`ForgeDialog\`, because both are identifiers. + +- Version: ${pkg.version} +- License: MIT (commercial use permitted) +- Install: \`npm install forgedialog\` +- Runtime dependencies: none +- Size: about 15 KB gzipped for the full bundle, about 5.5 KB for an alert-only build +- Browsers: Chrome/Edge 88+, Firefox 78+, Safari 15.4+ +- Node.js: 20 or newer, for package tooling and server-side imports +- Accessibility: native \`\`, focus trapped and restored, Escape and backdrop dismissal, \`role="dialog"\` or \`role="alertdialog"\` set automatically +- Frameworks: works standalone; adapters for React, Vue, Svelte, and Web Components + +## Documentation + +${pages.map((page) => `- [${page.title}](${origin}${page.path}): ${page.summary}`).join('\n')} + +## Source + +- [GitHub repository](${pkg.repository.url.replace(/^git\+/, '').replace(/\.git$/, '')}): source, issue tracker, and changelog. +- [npm package](https://www.npmjs.com/package/${pkg.name}): published builds for ESM, CommonJS, and the browser. +`, +); + console.log(`site: vendored ${pkg.name}@${pkg.version} into site/vendor`); +console.log(`site: wrote sitemap.xml, robots.txt, and llms.txt for ${origin}`); diff --git a/site/apple-touch-icon.png b/site/apple-touch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..32747858fc627ea386e27d4587350e698947e283 GIT binary patch literal 7993 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 { + const { setTheme, VERSION } = ForgeDialog; + const $ = (selector) => document.querySelector(selector); + + $('#version').textContent = `v${VERSION}`; + + /* Theme ---------------------------------------------------------------- */ + + const themeToggle = $('#theme-toggle'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + function applyTheme(dark) { + // setTheme drives the library's own tokens; the attribute it sets on + // is the same hook this page's stylesheet reads, so both stay in step. + setTheme(dark ? 'dark' : 'light'); + themeToggle.textContent = dark ? 'Light' : 'Dark'; + themeToggle.setAttribute('aria-pressed', String(dark)); + } + + applyTheme(prefersDark.matches); + themeToggle.addEventListener('click', () => { + applyTheme(themeToggle.getAttribute('aria-pressed') !== 'true'); + }); + + /* Copy buttons --------------------------------------------------------- */ + + for (const button of document.querySelectorAll('.copy')) { + button.addEventListener('click', async () => { + const text = $(button.dataset.copy).textContent; + const original = button.textContent; + try { + await navigator.clipboard.writeText(text); + button.textContent = 'Copied'; + } catch { + // Clipboard access can be refused; say so rather than looking broken. + button.textContent = 'Press Ctrl+C'; + } + setTimeout(() => { + button.textContent = original; + }, 1600); + }); + } +})(); diff --git a/site/docs.html b/site/docs.html new file mode 100644 index 0000000..c011056 --- /dev/null +++ b/site/docs.html @@ -0,0 +1,1403 @@ + + + + + + API reference — Forge Dialog + + + + + + + + + + + + + + + + + + + + + +
+
+ + Forge Dialog + … + + Features + Playground + Docs + GitHub + +
+
+ +
+ + +
+

API reference

+

+ Forge Dialog is a dependency-free TypeScript dialog library built on the native + <dialog> element. Everything on this page is in the published package — + there are no plugins to install and no peer dependencies to satisfy. +

+ +
+

Installation

+

Install from npm. The package name is one word; the library is called Forge Dialog.

+
+ + 
npm install forgedialog
+
+

Import the API and a stylesheet:

+
+ + 
import { alert, confirm, prompt, open } from 'forgedialog';
+import 'forgedialog/style.css';
+
+

+ Or load the browser build directly. It defines the global + ForgeDialog — a JavaScript identifier, so it stays one word. +

+
+ + 
<link rel="stylesheet" href="https://unpkg.com/forgedialog/dist/index.css" />
+<script src="https://unpkg.com/forgedialog/dist/index.global.js"></script>
+<script>
+  ForgeDialog.alert('Hello!');
+</script>
+
+

+ Requires Chrome/Edge 88+, Firefox 78+, Safari 15.4+, or Node.js 20+ for package tooling + and server-side imports. +

+
+ +
+

Entry points

+

+ Every entry point is tree-shakable and has its own gzip budget enforced in CI. Import + the narrowest one that covers what you need. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ImportContains
forgedialog + Everything, with dragging, animations, and the full appearance applier already + enabled. +
forgedialog/core + open(), alert, confirm, + prompt, theming, labels, plugins, and the full appearance applier. +
forgedialog/alertalert() alone.
forgedialog/confirmconfirm() alone.
forgedialog/promptprompt() alone.
forgedialog/presentation + drawer, bottomSheet, lightbox, + loading, toast, commandPalette, + notificationCenter. +
forgedialog/workflowsform, formWizard, wizard.
forgedialog/interactionsThe draggable controller. Side-effectful: importing it enables dragging.
forgedialog/animationsAnimation presets. Side-effectful: importing it enables animations.
forgedialog/appearance + The full appearance applier. Side-effectful: importing it upgrades the focused + entries. +
forgedialog/reactuseForgeDialog() for React.
forgedialog/vueuseForgeDialog() for Vue.
forgedialog/svelteThe dialogTrigger action.
forgedialog/web-componentdefineForgeDialog() and ForgeDialogElement.
+
+

Capability imports

+

+ The single-purpose entries (/alert, /confirm, + /prompt) ship a lightweight appearance applier covering surface opacity, + backdrop, border, and shadow presets. Add capabilities by importing them for their side + effect: +

+
+ + 
import 'forgedialog/appearance';   // per-component colour, radius, hover
+import 'forgedialog/interactions'; // dragging
+import 'forgedialog/animations';   // animation presets
+import { alert } from 'forgedialog/alert';
+
+

+ forgedialog and forgedialog/core already include the full + appearance applier, so those imports are only needed alongside a focused entry. +

+
+ +
+

Stylesheets

+

+ forgedialog/style.css is the all-in-one sheet. To ship less CSS, compose + only the layers a page uses — core.css is always required. +

+
+ + 
import 'forgedialog/style/core.css';      // required
+import 'forgedialog/style/forms.css';     // form fields and file dropzones
+import 'forgedialog/style/workflows.css'; // wizard stepper
+import 'forgedialog/style/toast.css';
+import 'forgedialog/style/lightbox.css';
+import 'forgedialog/style/command.css';
+import 'forgedialog/style/draggable.css';
+
+

+ All rules live in the forgedialog cascade layer, so your own unlayered CSS + wins without needing !important. +

+
+ +
+

alert, confirm, prompt

+

Promise-returning replacements for the browser built-ins.

+
+ + + + + + + + + + + + + + + + + + + + + +
SignatureResolves to
alert(message, options?)Promise<void>
confirm(message, options?) + Promise<boolean> — false on Escape or backdrop + close +
prompt(message, options?) + Promise<string | null> — null when cancelled +
+
+
+ + 
await alert('Saved successfully.', { title: 'Success' });
+
+const ok = await confirm('Delete this item?', { title: 'Please confirm' });
+
+const name = await prompt('What is your name?', {
+  defaultValue: 'Ada Lovelace',
+  inputType: 'text',
+  inputLabel: 'Full name',
+  placeholder: 'Type a name',
+  validate: (value) => (value.trim() ? true : 'Name is required'),
+});
+
+

+ alert and confirm get + role="alertdialog" automatically. prompt accepts the extra + options above on top of every DialogOptions field. +

+
+ +
+

open()

+

+ The low-level API. It returns a DialogInstance immediately + rather than a promise, so the dialog can be updated, moved, or closed from anywhere. +

+
+ + 
import { open } from 'forgedialog';
+
+const dialog = open({
+  title: 'Custom dialog',
+  content: (container) => container.append(renderForm()),
+  buttons: [
+    { text: 'Cancel', onClick: (i) => i.close(null) },
+    { text: 'Save', role: 'primary', autoFocus: true, onClick: (i) => i.close(read()) },
+  ],
+});
+
+const result = await dialog.whenClosed();          // the result, or undefined
+const { result: r, reason } = await dialog.whenSettled(); // result plus why it closed
+
+

Content and untrusted HTML

+

+ content accepts a string (rendered as text), an element, + or a builder function. Markup needs an explicit decision: +

+
+ + 
// Untrusted markup: pass a sanitizer.
+open({ html: userContent, sanitizeHtml: (h) => DOMPurify.sanitize(h) });
+
+// Markup you already trust.
+open({ unsafeHtml: '<p>Generated by us</p>' });
+
+

Close reasons

+

+ Every close carries a reason: 'button', 'escape', + 'backdrop', 'api', 'abort', or + 'destroy'. Read it with whenSettled(). +

+
+ +
+

DialogOptions

+

Accepted by open() and by every helper built on it.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDescription
titlestring + Header text. Omitted titles fall back to a visually hidden label so the dialog + stays named for assistive technology. +
messagestring | HTMLElementBody text or element.
contentstring | HTMLElement | (container) => voidBody content. Strings render as text.
htmlstringMarkup, rendered only when sanitizeHtml is also supplied.
unsafeHtmlstringMarkup inserted as-is. Only for content you control.
sanitizeHtml(html: string) => stringSanitizer applied to html.
buttonsButtonConfig[]Footer buttons. See below.
type + 'alert' | 'confirm' | 'prompt' | 'form' | 'wizard' | 'custom' + + Semantic kind. alert and confirm default to + role="alertdialog". +
role'dialog' | 'alertdialog'Overrides the role derived from type.
size'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'Width preset.
presentation + 'modal' | 'drawer-left' | 'drawer-right' | 'bottom-sheet' | 'lightbox' + How the dialog enters and where it sits.
animation + 'fade' | 'scale' | 'slide' | 'spring' | 'bounce' | 'blur' | 'none' + + Requires the animations capability. Honours prefers-reduced-motion. +
appearanceDialogAppearancePer-dialog styling. See Appearance.
draggableboolean | DraggableOptionsSee Dragging.
closablebooleanShows the header close button. Default true.
closeOnEscapebooleanDefault true.
closeOnOverlayClickbooleanDefault true.
initialFocusstring | HTMLElement | (root) => HTMLElement | nullWhat receives focus on open. Defaults to the first tabbable element.
restoreFocusbooleanReturns focus to the trigger on close. Default true.
portalTargetHTMLElementWhere the dialog mounts. Defaults to document.body.
classNamestringExtra classes on the dialog element.
labelsPartial<DialogLabels>Per-dialog label overrides.
signalAbortSignalAborting closes the dialog with reason 'abort'.
dataunknownArbitrary payload, readable from hooks.
onOpen(instance) => void | Promise<void>After the dialog opens.
onBeforeClose(instance, result) => boolean | void | Promise<…>Return false to keep it open.
onClose(instance, result) => void | Promise<void>After the dialog closes.
onError(error, instance) => voidObserves lifecycle failures, which are cleaned up automatically.
+
+

ButtonConfig

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FieldTypeDescription
textstringLabel. Required.
role'primary' | 'secondary' | 'danger'Visual weight.
onClick(instance) => void | Promise<void>Click handler.
closesDialogbooleanCloses the dialog after onClick.
resultTResultValue the dialog resolves with when this button closes it.
autoFocusbooleanReceives focus on open.
disabledbooleanRenders the button disabled.
idstringElement id, useful for tests.
+
+
+ +
+

DialogInstance

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MemberReturnsDescription
open()Promise<void>Opens a dialog that is not open yet.
close(result?, reason?)Promise<void>Closes with a result.
cancel(reason?)Promise<void>Closes without a result.
destroy()Promise<void>Closes and removes the element and its listeners.
update(partialOptions)voidRestyles or re-renders a dialog in place, while it is open.
whenClosed()Promise<TResult | undefined>Resolves with the result.
whenSettled()Promise<{ result, reason }>Resolves with the result and the close reason.
isOpen()booleanWhether it is currently open.
getState()DialogState + 'idle' | 'opening' | 'open' | 'closing' | 'closed' | 'destroyed'. +
getPosition(){ x, y }Current drag offset.
setPosition({ x, y }){ x, y }Moves the dialog, clamped to its bounds.
resetPosition()voidReturns it to centre.
elementHTMLElementThe dialog element.
idstringUnique id.
+
+
+ +
+

Appearance

+

+ Appearance overrides are scoped to one dialog and can be changed at runtime with + update(). Opacity values are clamped to 0..1; plain numbers + for widths, radii, and blur are read as pixels. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FieldTypeApplies to
opacitynumberThe whole dialog surface.
surfaceColorstringDialog background.
overlayOpacitynumberThe backdrop behind it.
backdropBlurnumber | stringBackdrop blur radius.
titleColorstringHeader text.
titleBackgroundstringHeader fill. Transparent by default and clipped by the dialog's corners.
titleOpacitynumberHeader.
contentColorstringBody text.
contentOpacitynumberBody.
borderColorstringBorder.
borderOpacitynumberBorder.
borderWidthnumber | stringBorder.
borderStyle'none' | 'solid' | 'dashed' | 'dotted' | 'double'Border.
radiusnumber | string | DialogCornerRadiusCorners. See Corner radius.
shadowShadowPreset | string | DialogShadowConfigSee Shadows.
hoverDialogHoverAppearanceSee Hover.
+
+
+ + 
open({
+  title: 'Styled',
+  appearance: {
+    opacity: 0.96,
+    surfaceColor: '#12141a',
+    overlayOpacity: 0.55,
+    backdropBlur: 12,
+    titleColor: '#ffd166',
+    titleBackground: '#1b1740',
+    contentColor: '#c8ccd4',
+    borderColor: '#7c5cff',
+    borderWidth: 2,
+    radius: 20,
+    shadow: { angle: 135, distance: 24, blur: 60, opacity: 0.45 },
+  },
+});
+
+

+ The full applier ships with forgedialog and forgedialog/core. + On a focused entry, add import 'forgedialog/appearance' — without it the + richer fields are ignored rather than throwing. +

+
+ +
+

Shadows

+

shadow takes three shapes.

+
+ + + + + + + + + + + + + + + + + + + + + +
FormExample
A preset + shadow: 'xl' — one of none, sm, + md, lg, xl +
Any CSS box-shadowshadow: '0 10px 40px rgb(0 0 0 / 30%)'
Composed from partsshadow: { angle: 90, distance: 18, blur: 48, opacity: 0.3 }
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PartTypeMeaning
anglenumber + Direction the shadow falls, in degrees: 0 up, + 90 right, 180 down (the default), + 270 left. +
distancenumber | stringHow far it is thrown.
blurnumber | stringSoftness.
spreadnumber | stringGrowth before blurring.
colorstringShadow colour.
opacitynumberStrength, 0..1.
insetbooleanCasts the shadow inwards.
+
+
+ +
+

Corner radius

+

+ radius takes one value for every corner, any CSS + border-radius string, or a per-corner object. Corners left out of that + object keep the theme radius rather than collapsing to zero. +

+
+ + 
appearance: { radius: 20 }
+appearance: { radius: '20px 20px 4px 4px' }
+appearance: { radius: { topLeft: 24, topRight: 24, bottomRight: 4, bottomLeft: 4 } }
+
+

+ Drawers stay square and bottom sheets round only their top corners unless + radius says otherwise. +

+
+ +
+

Hover

+

+ hover restyles a dialog only while the pointer is over it, and only for + dialogs that ask for it — every other dialog stays completely static. It reuses the + colour, radius, and shadow fields and adds three of its own. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FieldTypeDescription
liftnumber | stringHow far the dialog rises.
scalenumberScale factor, e.g. 1.02.
durationnumber | stringTransition length.
+
+

+ Hover transforms honour prefers-reduced-motion and are suspended while a + dialog is being dragged, so they cannot push it outside its bounds. +

+
+ +
+

Dragging

+

+ draggable: true is enough to move a dialog by its header. The object form + adds constraints, keyboard support, and persistence. Dragging needs the interactions + capability, which forgedialog enables for you. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDescription
handle'header' | string | HTMLElementWhat starts a drag. Defaults to the header.
axis'both' | 'x' | 'y'Locks movement to one axis.
bounds'viewport' | HTMLElement | DOMRectArea the dialog is clamped to.
initialPosition{ x, y }Starting offset.
keyboardbooleanArrow-key movement when the handle has focus.
keyboardStepnumberPixels per key press.
persistKeystringRemembers the position across sessions under this key.
onDragStart / onDrag / onDragEnd(event) => voidEach receives { position, originalEvent }.
+
+

+ Bottom sheets keep their own swipe-to-dismiss gesture and ignore general dragging. +

+
+ +
+

Drawers, sheets, lightboxes, loading

+
+ + 
import { drawer, bottomSheet, lightbox, loading } from 'forgedialog';
+
+drawer({ title: 'Settings', side: 'right', content: renderSettings });
+
+bottomSheet({ title: 'Share', content: renderShare });
+
+lightbox('/photo.jpg', { alt: 'A photo', caption: 'Taken in 2026' });
+
+const task = loading('Uploading…');
+task.update('Almost there…');
+await task.close();
+
+

+ These are open() with a presentation preset, so every + DialogOptions field still applies. +

+
+ +
+

Forms

+

+ form() builds a validated dialog from a field list and resolves with the + values, or null if cancelled. Field names are inferred into the result + type, so values.email is typed without a cast. +

+
+ + 
import { form } from 'forgedialog';
+
+const values = await form(
+  [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+    { name: 'plan', type: 'select', label: 'Plan', options: [
+      { value: 'free', label: 'Free' },
+      { value: 'pro', label: 'Pro' },
+    ] },
+    { name: 'notes', type: 'textarea', label: 'Notes', rows: 4 },
+  ],
+  { title: 'Sign up', submitText: 'Create account' },
+);
+
+

+ Field types: text, password, email, + number, date, textarea, select, + checkbox, radio, file. Each field takes + label, defaultValue, placeholder, + helpText, required, and a validate function; + numbers add min, max, step, and files add + accept, multiple, maxFiles, and + maxSizeBytes. +

+

+ formWizard(steps, options?) spreads the same fields over several steps, + with nextText, backText, finishText, and an + onStepChange callback. +

+
+ +
+

Wizards

+

+ wizard() is the general form: each step renders whatever it likes, can + validate, and can choose the next step from the data collected so far. +

+
+ + 
import { wizard } from 'forgedialog';
+
+const flow = wizard({
+  initialData: { email: '', plan: 'free' },
+  persistKey: 'signup',      // resumes where the user left off
+  confirmUnsaved: true,      // asks before discarding progress
+  steps: [
+    { id: 'account', title: 'Account', render: renderAccount, validate: validateAccount },
+    { id: 'plan', title: 'Plan', render: renderPlan,
+      next: (data) => (data.plan === 'pro' ? 'billing' : 'review') },
+    { id: 'billing', title: 'Billing', render: renderBilling },
+    { id: 'review', title: 'Review', render: renderReview },
+  ],
+});
+
+const data = await flow.result; // the data, or null if cancelled
+
+

+ The controller also exposes next(), back(), + goTo(stepId), getData(), and the underlying + instance. +

+
+ +
+

Toasts and notifications

+
+ + 
import { toast, notificationCenter, getNotificationHistory } from 'forgedialog';
+
+toast('Saved', { tone: 'success' });
+
+// A duration of 0 or Infinity keeps it up until dismiss() is called.
+const upload = toast('Uploading…', { duration: 0 });
+upload.dismiss();
+
+toast('Message sent', { action: { text: 'Undo', onClick: undoSend } });
+
+notificationCenter();          // a dialog listing past toasts
+getNotificationHistory();      // the same list as data
+
+

+ Tones are info, success, warning, and + danger. clearNotificationHistory() empties the log. +

+
+ +
+

Command palette

+
+ + 
import { commandPalette } from 'forgedialog';
+
+commandPalette([
+  { id: 'new', label: 'New document', shortcut: '⌘N', run: createDocument },
+  { id: 'search', label: 'Search', keywords: ['find', 'filter'], run: openSearch },
+]);
+
+

+ Typing filters on the label and on keywords; the palette resolves with the + id of the command that ran. +

+
+ +
+

Theming

+
+ + 
import { setTheme, getTheme, setThemePreset } from 'forgedialog';
+
+setTheme('dark');    // 'light' | 'dark' | 'system'
+getTheme();
+
+setThemePreset('glass'); // 'default' | 'minimal' | 'glass' | 'material'
+
+

+ setTheme() writes data-fd-theme on <html>. + Your own stylesheet can read the same attribute so the page and the dialogs switch + together — that is exactly what this site does. +

+
+ +
+

CSS custom properties

+

+ Everything visual is a variable on :root, so a theme can be written without + touching JavaScript. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDefault
--fd-color-surface#ffffff
--fd-color-text#1a1d23
--fd-color-text-muted#5b6270
--fd-color-border#e2e4e9
--fd-color-overlayrgba(15, 17, 21, 0.5)
--fd-color-primary / --fd-color-primary-text#315fce / #ffffff
+ --fd-color-secondary / --fd-color-secondary-text + #eceef2 / #1a1d23
--fd-color-danger / --fd-color-danger-text#e5484d / #ffffff
--fd-radius10px
--fd-shadow0 20px 60px rgba(15, 17, 21, 0.25)
--fd-spacing-sm / md / lg8px / 16px / 24px
--fd-font-familysystem UI stack
--fd-duration-fast / --fd-duration-normal120ms / 200ms
--fd-easingcubic-bezier(0.16, 1, 0.3, 1)
--fd-z-index-base1000
+
+

+ The per-dialog variables the appearance API writes (--fd-dialog-radius, + --fd-dialog-shadow, --fd-dialog-title-background, and the + rest) can also be set by hand if you would rather style in CSS than in JavaScript. +

+
+ +
+

Labels and i18n

+
+ + 
import { setLabels, getLabels } from 'forgedialog';
+
+setLabels({
+  ok: 'Đồng ý',
+  cancel: 'Huỷ',
+  close: 'Đóng',
+  submit: 'Gửi',
+  fieldRequired: 'Bắt buộc',
+  promptPlaceholder: 'Nhập nội dung',
+  notifications: 'Thông báo',
+});
+
+

+ Labels set this way apply everywhere; a single dialog can override them with its own + labels option. +

+
+ +
+

Plugins and hooks

+

+ Five lifecycle hooks fire for every dialog: beforeOpen, + afterOpen, beforeClose, afterClose, and + beforeDestroy. +

+
+ + 
import { on, off, registerPlugin } from 'forgedialog';
+
+// A single hook.
+on('afterOpen', ({ instance, options }) => track('dialog', options.title));
+
+// Or a plugin bundling several.
+registerPlugin({
+  name: 'analytics',
+  install: (api) => api.on('afterClose', ({ reason }) => track('close', reason)),
+  hooks: {
+    beforeClose: ({ preventClose, result }) => {
+      if (result === undefined) preventClose?.();
+    },
+  },
+});
+
+

+ A hook receives { instance, options, result, reason, preventClose }. + Calling preventClose() in beforeClose keeps the dialog open. +

+
+ +
+

Framework adapters

+

+ Each adapter is a thin wrapper over open() that ties a dialog's lifetime to + the component's, so nothing is left mounted after unmount. +

+
+ + 
// React and Vue share the same hook shape.
+import { useForgeDialog } from 'forgedialog/react';
+const { open } = useForgeDialog();
+await open({ title: 'Hi' }).whenClosed();
+
+// Svelte: an action on the triggering element.
+import { dialogTrigger } from 'forgedialog/svelte';
+// <button use:dialogTrigger={{ title: 'Hi' }}>Open</button>
+
+// Web component.
+import { defineForgeDialog } from 'forgedialog/web-component';
+defineForgeDialog(); // <forge-dialog open title="Hi" message="…" size="md">
+
+
+ +
+

TypeScript, SSR, and CSP

+
    +
  • + Types ship for both ESM and CJS. open<T>() threads its result type + through buttons, whenClosed(), and the hooks. +
    • +
  • + Importing the package on a server does not touch the DOM, so it is safe in SSR builds; + the dialog is only created when you call the API in a browser. +
    • +
  • + The bundle contains no eval and no new Function, which is + enforced in CI, so it runs under a strict Content Security Policy. This site is served + under one. +
    • +
  • Every entry point has an enforced gzip budget, checked on each pull request.
    • +
+
+ +

+ Something missing or wrong here? + Open an issue — the reference + is written against the reviewed public API report in the repository. +

+
+
+ +
+
+ MIT licensed. Built with no runtime dependencies. + + GitHub · + npm · + Changelog + +
+
+ + + + + + diff --git a/site/docs.js b/site/docs.js new file mode 100644 index 0000000..4f4bceb --- /dev/null +++ b/site/docs.js @@ -0,0 +1,30 @@ +/* Docs-page behaviour: keeps the sidebar in step with what is on screen. */ + +(() => { + const links = [...document.querySelectorAll('.docs-nav a')]; + const byId = new Map(links.map((link) => [link.getAttribute('href').slice(1), link])); + const sections = [...document.querySelectorAll('.docs-body section[id]')].filter((section) => + byId.has(section.id), + ); + if (sections.length === 0) return; + + let current; + + function highlight(id) { + if (id === current) return; + byId.get(current)?.removeAttribute('aria-current'); + byId.get(id)?.setAttribute('aria-current', 'true'); + current = id; + } + + // The topmost section still intersecting the viewport is the one being read. + const observer = new IntersectionObserver( + () => { + const heading = sections.find((section) => section.getBoundingClientRect().bottom > 90); + if (heading) highlight(heading.id); + }, + { rootMargin: '-80px 0px 0px 0px', threshold: [0, 1] }, + ); + + for (const section of sections) observer.observe(section); +})(); diff --git a/site/icon.svg b/site/icon.svg new file mode 100644 index 0000000..4b2c554 --- /dev/null +++ b/site/icon.svg @@ -0,0 +1,25 @@ + + Forge Dialog + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/index.html b/site/index.html index 0e93fa5..3147d26 100644 --- a/site/index.html +++ b/site/index.html @@ -3,34 +3,159 @@ - ForgeDialog — accessible, dependency-free dialogs for the web + Forge Dialog — accessible, dependency-free dialogs for the web - + - + + + + + + + + + + + + +
- ForgeDialog + Forge Dialog … Features Playground Examples + FAQ + Docs GitHub
@@ -40,9 +165,10 @@

Dialogs that behave themselves.

- A dependency-free TypeScript dialog library built on the native - <dialog> element. Accessible by default, themeable down to individual - components, and small enough that an alert-only bundle stays under 6 KB gzipped. + Forge Dialog is a dependency-free TypeScript dialog library built on the + native <dialog> element. Accessible by default, themeable down to + individual components, and small enough that an alert-only bundle stays under 6 KB + gzipped.

@@ -50,6 +176,7 @@

Dialogs that behave themselves.

+ Read the docs
@@ -260,6 +387,136 @@

Beyond dialogs

+ +
+
+

At a glance

+

+ The short, factual version — the numbers come from the size budgets enforced on every + pull request. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameForge Dialog
npm packageforgedialog
LicenseMIT
Runtime dependenciesNone
Size + ≈15 KB gzipped for the full bundle; ≈5.5 KB for an alert-only build +
Written inTypeScript, with types for both ESM and CommonJS
BrowsersChrome/Edge 88+, Firefox 78+, Safari 15.4+
Node.js20 or newer, for package tooling and SSR imports
FrameworksWorks standalone; adapters for React, Vue, Svelte, and Web Components
Source + github.com/cmm-cmm/ForgeDialog +
+
+
+
+ +
+
+

Frequently asked questions

+ +
+

What is Forge Dialog?

+

+ Forge Dialog is an open-source TypeScript library for building dialogs on the web: + alerts, confirmations, prompts, drawers, bottom sheets, lightboxes, loading states, + toasts, command palettes, and multi-step wizards. It is published on npm as + forgedialog, licensed MIT, and has no runtime dependencies. +

+ +

How large is Forge Dialog?

+

+ The complete bundle is roughly 15 KB gzipped. An application that imports only + forgedialog/alert ships roughly 5.5 KB gzipped, because every entry + point is tree-shakable and carries a size budget that continuous integration enforces + on each pull request. +

+ +

Does Forge Dialog need a framework?

+

+ No. Forge Dialog is framework-agnostic and works with plain JavaScript or a + <script> tag. Optional adapters for React, Vue, Svelte, and Web + Components ship in the same package. +

+ +

Is Forge Dialog accessible?

+

+ Yes. It renders the native <dialog> element, traps focus while a + dialog is open and restores it to the trigger on close, wires up Escape and backdrop + dismissal, and sets role="dialog" or + role="alertdialog" automatically. Motion honours the + prefers-reduced-motion setting. +

+ +

How is it different from window.alert, confirm, and prompt?

+

+ The browser built-ins block the main thread, cannot be styled, and offer three fixed + shapes. Forge Dialog returns promises instead of blocking, can be styled down to + individual components, and covers drawers, sheets, forms, and wizards as well. +

+ +

Can the appearance be customised?

+

+ Yes. Colour and opacity are set independently for the surface, title, body, and + border; corner radius can be set per corner; shadows are composed from an angle, + distance, blur, spread, and strength; hover effects are opt-in per dialog. All of it + can be changed while a dialog is open by calling update(). +

+ +

Which browsers and runtimes are supported?

+

+ Chrome and Edge 88+, Firefox 78+, and Safari 15.4+, plus Node.js 20 or newer for + package tooling and server-side imports. The bundle contains no eval and + no new Function, so it runs under a strict Content Security Policy. +

+ +

Is Forge Dialog free to use commercially?

+

+ Yes. Forge Dialog is released under the MIT license, which permits commercial use, + modification, and redistribution. +

+
+
+
@@ -274,6 +531,7 @@

Beyond dialogs

+ diff --git a/site/og-image.png b/site/og-image.png new file mode 100644 index 0000000000000000000000000000000000000000..959bc9d6b08bfe72c5bdccc9f557c60b92668541 GIT binary patch literal 37622 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 z

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 { - const { alert, confirm, prompt, open, setTheme, VERSION } = ForgeDialog; + const { alert, confirm, prompt, open } = ForgeDialog; const $ = (selector) => document.querySelector(selector); - $('#version').textContent = `v${VERSION}`; - - /* Theme ---------------------------------------------------------------- */ - - const themeToggle = $('#theme-toggle'); - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - - function applyTheme(dark) { - // setTheme drives the library's own tokens; the attribute it sets on - // is the same hook this page's stylesheet reads, so both stay in step. - setTheme(dark ? 'dark' : 'light'); - themeToggle.textContent = dark ? 'Light' : 'Dark'; - themeToggle.setAttribute('aria-pressed', String(dark)); - } - - applyTheme(prefersDark.matches); - themeToggle.addEventListener('click', () => { - applyTheme(themeToggle.getAttribute('aria-pressed') !== 'true'); - }); - - /* Copy buttons --------------------------------------------------------- */ - - for (const button of document.querySelectorAll('.copy')) { - button.addEventListener('click', async () => { - const text = $(button.dataset.copy).textContent; - const original = button.textContent; - try { - await navigator.clipboard.writeText(text); - button.textContent = 'Copied'; - } catch { - // Clipboard access can be refused; say so rather than looking broken. - button.textContent = 'Press Ctrl+C'; - } - setTimeout(() => { - button.textContent = original; - }, 1600); - }); - } - /* Hero demos ----------------------------------------------------------- */ $('#try-alert').addEventListener('click', () => { diff --git a/site/styles.css b/site/styles.css index 0fbdfe1..bbdf92c 100644 --- a/site/styles.css +++ b/site/styles.css @@ -81,8 +81,24 @@ a { .site-header .wrap { display: flex; align-items: center; - gap: 16px; + /* Wraps rather than overflowing: on a narrow phone the nav takes a second + row instead of pushing the page sideways. */ + flex-wrap: wrap; + gap: 8px 16px; min-height: 60px; + padding-block: 8px; +} + +@media (max-width: 560px) { + .site-header .wrap { + gap: 6px 12px; + } + + .brand { + /* Own the first row so the links wrap together underneath it. */ + flex: 1 0 100%; + margin-inline-end: 0; + } } .brand { @@ -237,7 +253,7 @@ section p.section-lead { .features { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; } @@ -270,7 +286,7 @@ section p.section-lead { @media (max-width: 820px) { .playground { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); } } @@ -345,6 +361,8 @@ pre code { .snippet { position: relative; + /* The code inside scrolls; the snippet itself must not widen its column. */ + min-width: 0; } .snippet .copy { @@ -356,7 +374,7 @@ pre code { .examples { display: grid; gap: 18px; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .example h3 { @@ -398,3 +416,225 @@ pre code { transition-duration: 1ms !important; } } + +/* Docs -------------------------------------------------------------------- */ + +.docs-layout { + display: grid; + grid-template-columns: 220px minmax(0, 1fr); + gap: 40px; + align-items: start; + padding-top: 40px; + padding-bottom: 64px; +} + +@media (max-width: 900px) { + .docs-layout { + grid-template-columns: 1fr; + gap: 24px; + } +} + +.docs-nav { + position: sticky; + top: 84px; + max-height: calc(100vh - 110px); + overflow-y: auto; + font-size: 0.86rem; +} + +@media (max-width: 900px) { + .docs-nav { + position: static; + max-height: none; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 14px 16px; + } +} + +.docs-nav a { + display: block; + padding: 4px 0 4px 10px; + color: var(--muted); + text-decoration: none; + border-inline-start: 2px solid transparent; +} + +.docs-nav a:hover, +.docs-nav a:focus-visible { + color: var(--text); +} + +.docs-nav a[aria-current] { + color: var(--accent); + border-inline-start-color: var(--accent); + font-weight: 600; +} + +.docs-nav__group { + margin: 16px 0 4px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text); +} + +.docs-nav__group:first-child { + margin-top: 0; +} + +.docs-body { + min-width: 0; +} + +.docs-body h1 { + font-size: clamp(1.8rem, 4vw, 2.4rem); + letter-spacing: -0.02em; + margin: 0 0 10px; +} + +.docs-lead { + color: var(--muted); + font-size: 1.02rem; + margin: 0 0 8px; + max-width: 68ch; +} + +.docs-body section { + padding: 32px 0 8px; + border-top: 1px solid var(--border); + scroll-margin-top: 76px; +} + +.docs-body h2 { + font-size: 1.35rem; + letter-spacing: -0.01em; + margin: 0 0 12px; +} + +.docs-body h3 { + font-size: 1rem; + margin: 26px 0 8px; +} + +.docs-body p, +.docs-body li { + max-width: 74ch; +} + +.docs-body ul { + padding-inline-start: 20px; +} + +.docs-body li { + margin-bottom: 8px; +} + +.docs-body :not(pre) > code { + font: 0.86em/1.4 var(--mono); + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 5px; + padding: 1px 5px; + overflow-wrap: anywhere; +} + +.docs-body .snippet { + margin: 14px 0 18px; +} + +.docs-body .note { + background: var(--surface); + border: 1px solid var(--border); + border-inline-start: 3px solid var(--accent); + border-radius: 0 var(--radius) var(--radius) 0; + padding: 12px 16px; + color: var(--muted); + font-size: 0.92rem; +} + +/* Wide tables scroll inside their own box; the page never scrolls sideways. */ +.table-scroll { + overflow-x: auto; + border: 1px solid var(--border); + border-radius: var(--radius); + margin: 14px 0 18px; + background: var(--surface); +} + +.table-scroll table { + border-collapse: collapse; + width: 100%; + font-size: 0.88rem; +} + +.table-scroll th, +.table-scroll td { + text-align: start; + vertical-align: top; + padding: 10px 14px; + border-bottom: 1px solid var(--border); +} + +.table-scroll th { + background: var(--surface-2); + font-size: 0.78rem; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--muted); + white-space: nowrap; +} + +.table-scroll tr:last-child td { + border-bottom: 0; +} + +.table-scroll td:first-child { + white-space: nowrap; +} + +.docs-footer-note { + margin-top: 36px; + padding-top: 20px; + border-top: 1px solid var(--border); + color: var(--muted); + font-size: 0.9rem; +} + +/* FAQ and facts ----------------------------------------------------------- */ + +.faq h3 { + font-size: 1.02rem; + margin: 26px 0 6px; +} + +.faq h3:first-child { + margin-top: 0; +} + +.faq p { + margin: 0; + color: var(--muted); + max-width: 74ch; +} + +.faq code, +#at-a-glance code { + font: 0.86em/1.4 var(--mono); + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 5px; + padding: 1px 5px; +} + +#at-a-glance th[scope='row'] { + background: var(--surface-2); + white-space: nowrap; + text-transform: none; + letter-spacing: 0; + font-size: 0.88rem; + color: var(--text); +} From 6f8670cb4c078c93c2d289889d7c843d7fad8b03 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 2 Sep 2026 04:17:44 +0000 Subject: [PATCH 3/7] Deploy the site from site/, not the library's dist/ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Cloudflare Worker was built with `npm run build` and deployed with `wrangler deploy --assets ./dist`, so it uploaded 97 files of compiled library — .mjs, .cjs, .d.ts, .css — with no index.html among them. Workers Assets had nothing to answer `/` with, which is why the domain served nothing. wrangler.jsonc now pins the assets directory to `site/`, the directory `npm run site:build` actually fills, so the configuration lives in the repository rather than in a dashboard field. A deploy command that passes `--assets` overrides it, so docs/website.md says to drop the flag. While verifying the routing, the docs page turned out to be reachable only by redirect. Workers Assets serves `foo.html` at `/foo` and 307s the extension form, and `serve` (which `npm run site` uses) does the same, so every URL naming `/docs.html` — the canonical tag, og:url, the TechArticle and BreadcrumbList nodes, the sitemap entry, the llms.txt link, and the in-page links — pointed at a URL that redirects. A canonical or sitemap entry that redirects is a conflicting signal, so `/docs` is now the URL everywhere, and the docs page links back to `./` rather than `./index.html`. Verified against `wrangler dev` with the production `_headers` CSP: both pages and every asset return 200, every relative link resolves without a redirect, the pages load with no console errors or failed requests, the JSON-LD parses, and the hero alert still opens as `role="alertdialog"` and closes on Escape. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4 --- .gitignore | 3 +++ .prettierignore | 1 + docs/website.md | 60 ++++++++++++++++++++++++++++++++---------- scripts/build-site.mjs | 2 +- site/docs.html | 18 ++++++------- site/index.html | 6 ++--- wrangler.jsonc | 19 +++++++++++++ 7 files changed, 82 insertions(+), 27 deletions(-) create mode 100644 wrangler.jsonc diff --git a/.gitignore b/.gitignore index c910341..6fa881d 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,6 @@ site/vendor site/robots.txt site/sitemap.xml site/llms.txt + +# Cloudflare Wrangler local state +.wrangler diff --git a/.prettierignore b/.prettierignore index 7fcc0a2..36270d1 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,4 @@ site/vendor site/robots.txt site/sitemap.xml site/llms.txt +.wrangler diff --git a/docs/website.md b/docs/website.md index 2b6d027..2789a99 100644 --- a/docs/website.md +++ b/docs/website.md @@ -28,7 +28,16 @@ CDN, so what you see is always the build you have. | `site/site.js` | Landing-page demos and the appearance playground. | | `site/docs.js` | Highlights the sidebar entry for the section being read. | | `site/icon.svg` | The mark, and the favicon browsers actually load. | -| `site/_headers` | Cloudflare Pages response headers, including a strict CSP. | +| `wrangler.jsonc` | Cloudflare deployment config. Points at `site/`, not `dist/`. | +| `site/_headers` | Cloudflare response headers, including a strict CSP. | + +### URLs + +The docs page is served at **`/docs`**, not `/docs.html`. Both Cloudflare's static-asset routing +(`html_handling: "auto-trailing-slash"`, the default) and the `serve` used by `npm run site` drop +the `.html` and redirect the extension form, so the extensionless URL is the one that answers with +a `200`. Every link, canonical tag, sitemap entry, and `llms.txt` link uses it — a canonical or a +sitemap entry that redirects is a conflicting signal to a search engine. The version badge is read from the library's own `VERSION` export at runtime, so nothing has to be kept in sync by hand and no build step rewrites source files. @@ -89,27 +98,50 @@ markup and the page cannot disagree. The FAQ and the "At a glance" table exist for the same reason: they state the facts about Forge Dialog in self-contained sentences, which is what both search snippets and answer engines quote. -## Deploying to Cloudflare Pages +## Deploying to Cloudflare + +The site ships as a [Workers static-assets](https://developers.cloudflare.com/workers/static-assets/) +project: no Worker script, every request answered straight from `site/`. `wrangler.jsonc` at the +repository root is the whole configuration, so a deploy is just: + +```sh +npm run site:build +npx wrangler deploy +``` + +Note that the assets directory is **`site/`, not `dist/`**. `dist/` is the compiled library — +`.mjs`, `.cjs`, `.d.ts`, and `.css` with no `index.html` in it — so deploying that directory +uploads ninety-odd files and still serves nothing at `/`. + +### Workers Builds -Connect the repository in the Cloudflare dashboard (**Workers & Pages → Create → Pages → Connect to -Git**) and use: +To deploy on push, connect the repository under **Workers & Pages → Create → Workers → Import a +repository** and set: -| Setting | Value | -| ---------------------- | -------------------- | -| Framework preset | None | -| Build command | `npm run site:build` | -| Build output directory | `site` | -| Node version | `20` or newer | +| Setting | Value | +| -------------- | --------------------- | +| Build command | `npm run site:build` | +| Deploy command | `npx wrangler deploy` | +| Node version | `20` or newer | Cloudflare runs `npm ci` before the build command, so no install step is needed. Set the Node version through a `NODE_VERSION` environment variable if the default is older than 20, which the package's `engines` field requires. -The build runs the library's own `npm run build` first, so a broken build fails the deploy rather -than shipping a stale `site/vendor/`. +Leave the deploy command without an `--assets` flag: the flag overrides `wrangler.jsonc`, which is +how a project ends up shipping the wrong directory. The build runs the library's own `npm run +build` first, so a broken build fails the deploy rather than shipping a stale `site/vendor/`. + +### Custom domain + +Attach the domain under the Worker's **Settings → Domains & Routes**. It has to match the canonical +tags in `index.html` and `docs.html`, or search engines will be told the page lives somewhere it +does not. -Point the custom domain at the project in **Pages → Custom domains**. It has to match the canonical -tags, or search engines will be told the page lives somewhere it does not. +The `*.workers.dev` URL stays enabled as a way to check a deploy. It serves the same pages, but +every page carries an absolute canonical pointing at the custom domain, so search engines +consolidate the two rather than treating them as duplicates. Set `"workers_dev": false` in +`wrangler.jsonc` if you would rather it not answer at all. ### Response headers diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs index d8df470..bc70894 100644 --- a/scripts/build-site.mjs +++ b/scripts/build-site.mjs @@ -37,7 +37,7 @@ const pages = [ summary: 'What it is, live demos, and an interactive appearance playground.', }, { - path: '/docs.html', + path: '/docs', priority: '0.9', title: 'API reference', summary: diff --git a/site/docs.html b/site/docs.html index c011056..94b3587 100644 --- a/site/docs.html +++ b/site/docs.html @@ -14,7 +14,7 @@ content="Every option, method, and entry point in Forge Dialog, on one page." /> - + @@ -26,7 +26,7 @@ /> - + @@ -37,10 +37,10 @@ "@graph": [ { "@type": "TechArticle", - "@id": "https://forgedialog.konexforge.com/docs.html#article", + "@id": "https://forgedialog.konexforge.com/docs#article", "headline": "Forge Dialog API reference", "description": "Complete API reference for Forge Dialog: alert, confirm, prompt, open, appearance and shadow options, dragging, drawers, forms, wizards, toasts, theming, plugins, and framework adapters.", - "url": "https://forgedialog.konexforge.com/docs.html", + "url": "https://forgedialog.konexforge.com/docs", "inLanguage": "en", "isPartOf": { "@id": "https://forgedialog.konexforge.com/#website" @@ -63,7 +63,7 @@ "@type": "ListItem", "position": 2, "name": "API reference", - "item": "https://forgedialog.konexforge.com/docs.html" + "item": "https://forgedialog.konexforge.com/docs" } ] } @@ -74,13 +74,13 @@

- + Forge Dialog … - Features - Playground - Docs + Features + Playground + Docs GitHub
diff --git a/site/index.html b/site/index.html index 3147d26..106979f 100644 --- a/site/index.html +++ b/site/index.html @@ -67,7 +67,7 @@ "downloadUrl": "https://www.npmjs.com/package/forgedialog", "softwareHelp": { "@type": "CreativeWork", - "url": "https://forgedialog.konexforge.com/docs.html" + "url": "https://forgedialog.konexforge.com/docs" } }, { @@ -155,7 +155,7 @@ Playground Examples FAQ - Docs + Docs GitHub
@@ -176,7 +176,7 @@

Dialogs that behave themselves.

- Read the docs + Read the docs
diff --git a/wrangler.jsonc b/wrangler.jsonc new file mode 100644 index 0000000..c404f77 --- /dev/null +++ b/wrangler.jsonc @@ -0,0 +1,19 @@ +{ + // The site is static: there is no Worker script, so every request is answered + // straight from the assets below and `site/_headers` supplies the CSP. + "name": "forge-dialog", + "compatibility_date": "2026-09-02", + + // `site/` is what `npm run site:build` fills — the two HTML pages, the icon, + // and the library vendored out of `dist/`. Deploying `dist/` itself ships the + // library's .mjs/.d.ts files with no index.html, which serves nothing. + "assets": { + "directory": "./site", + }, + + // Declared rather than left to the default so a deploy stops warning about + // them. workers.dev stays on as a fallback URL for checking a deploy; the + // canonical tags keep search engines pointed at the custom domain. + "workers_dev": true, + "preview_urls": true, +} From ee1dd8f59d05b40b5247ec7c27677a038eb4d485 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 2 Sep 2026 04:57:18 +0000 Subject: [PATCH 4/7] Add a 404 page, correct sitemap lastmod, and fix stale docs A repo-wide pass before the worker is recreated from scratch. An unmatched path got the platform's bare 404, so site/404.html now answers for them through not_found_handling. It links its assets root-relative rather than with "./" because it also answers for nested paths, where a relative href would resolve against the missing directory, and it carries noindex with no canonical tag since it has no URL of its own. The sitemap stamped every entry with the build date, which told crawlers both pages change daily. lastmod now comes from the last commit that touched each page's HTML. A build with no reachable git history writes the entry without a lastmod rather than with a plausible-looking date. npm run check:release reported what the docs had not caught up with: forgedialog 0.7.0 was published on 1 September. docs/releasing.md still said the package was unpublished and framed the manual first publish and the E404 troubleshooting entry as the likely path; both are now scoped to a fork starting from an unpublished name. package.json homepage moves from the README anchor to the site, listed under Unreleased because 0.7.0 is already out and cannot carry it. README no longer calls the deployment Cloudflare Pages. Verified against wrangler dev with the production _headers: /, /docs and every asset return 200; /nope and /deep/nested/nope return 404 with the site's own page, its assets loading and the CSP applied; both pages and the 404 render with no console errors, no failed requests, and zero horizontal overflow at 320, 380, 480 and 768px. npm run validate passes. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4 --- CHANGELOG.md | 5 ++++ README.md | 4 +-- docs/releasing.md | 23 +++++++-------- docs/website.md | 14 ++++++++- package.json | 2 +- scripts/build-site.mjs | 37 +++++++++++++++++++---- site/404.html | 66 ++++++++++++++++++++++++++++++++++++++++++ wrangler.jsonc | 4 +++ 8 files changed, 134 insertions(+), 21 deletions(-) create mode 100644 site/404.html diff --git a/CHANGELOG.md b/CHANGELOG.md index dea9d29..473e060 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## Unreleased + +- `homepage` now points at the documentation site rather than the README anchor, so the npm + page links to the reference instead of back to GitHub. + ## 0.7.0 - Added per-component appearance controls: `surfaceColor`, `titleColor`, `titleBackground`, diff --git a/README.md b/README.md index 09c079c..aebb226 100644 --- a/README.md +++ b/README.md @@ -273,8 +273,8 @@ tooling and SSR imports. `site/` holds a dependency-free landing page with an interactive appearance playground, plus a full API reference at `site/docs.html`. Build and serve both with `npm run site`. The icon, the -generated `sitemap.xml` / `robots.txt` / `llms.txt`, the structured data, and the Cloudflare Pages -settings are covered in [docs/website.md](docs/website.md). +generated `sitemap.xml` / `robots.txt` / `llms.txt`, the structured data, and the Cloudflare +deployment settings are covered in [docs/website.md](docs/website.md). ## Contributing diff --git a/docs/releasing.md b/docs/releasing.md index a60310c..a610752 100644 --- a/docs/releasing.md +++ b/docs/releasing.md @@ -43,11 +43,10 @@ publisher with: | Workflow filename | `release.yml` | | Environment | `npm` | -> **Check this before relying on it for the first release.** npm configures trusted publishers from -> a package's settings page, which normally means the package has to exist first. `forgedialog` is -> currently unpublished. If npm will not let you add a publisher for a name that has never been -> published, do the first publish manually as described below, then come back and add the trusted -> publisher for every release after it. +> npm configures trusted publishers from a package's settings page, which means the package has to +> exist first. `forgedialog` is published — 0.7.0 went out on 1 September 2026 — so that page is +> available and this can be set up now. The manual first publish described below is history for +> this package; it is kept because a fork starting from an unpublished name still needs it. ### 3. Enable publishing in the workflow @@ -90,7 +89,8 @@ request it. ## First publish without trusted publishing -Only if step 2 above turns out to require an existing package: +Not needed here — `forgedialog` already has a published version. This is for a fork publishing a +name that has never been published, where step 2 has no settings page to configure yet: ```sh npm run validate:all @@ -106,13 +106,12 @@ delete the token you used. **The publish step was skipped.** `NPM_PUBLISH_ENABLED` is not `true`. That is the default. -**`npm error code E404` on `PUT .../forgedialog`, with the tarball already built and listed in the +**`npm error code E404` on `PUT .../`, with the tarball already built and listed in the log.** This is not an auth or OIDC problem — npm returns 404 rather than 401/403 here specifically -because trusted publishing has nothing to attach to yet: the package has never been published, so -there is no packages page to hold a trusted publisher entry. This is the exact case called out -above in "Check this before relying on it for the first release." Do the manual first publish in -the "First publish without trusted publishing" section, then add the trusted publisher and set -`NPM_PUBLISH_ENABLED=true`. +because trusted publishing has nothing to attach to yet: the name has never been published, so +there is no package settings page to hold a trusted publisher entry. It cannot happen to +`forgedialog` any more, which has a published version; a fork hitting it should do the manual first +publish in the section above, then add the trusted publisher and set `NPM_PUBLISH_ENABLED=true`. **`ENEEDAUTH` or an OIDC error** (distinct from the E404 above; this is for a package that already has at least one published version). The trusted publisher entry on npmjs.com must match the diff --git a/docs/website.md b/docs/website.md index 2789a99..d4de9c7 100644 --- a/docs/website.md +++ b/docs/website.md @@ -22,6 +22,7 @@ CDN, so what you see is always the build you have. | ----------------- | --------------------------------------------------------------------- | | `site/index.html` | The landing page: demos, appearance playground, facts table, and FAQ. | | `site/docs.html` | The API reference, written against the reviewed report in `etc/`. | +| `site/404.html` | Served for any unmatched path. Carries `noindex`. | | `site/styles.css` | Site styling. Its dark mode reads the same `data-fd-theme` attribute | | | that the library's `setTheme()` sets, so both switch together. | | `site/common.js` | Shared chrome: version badge, theme toggle, copy buttons. | @@ -81,7 +82,10 @@ else** — the sitemap, `robots.txt`, and `llms.txt` follow automatically. Generated on each build, and git-ignored: -- **`sitemap.xml`** — both pages with a `lastmod` date. +- **`sitemap.xml`** — both pages, each with the date its HTML file was last committed, read from + `git log`. A build that cannot reach git history (a shallow clone, a tarball export) writes the + entry with no `lastmod` rather than stamping today's date on a page that did not change: a + sitemap that is wrong about `lastmod` is one a crawler learns to ignore. - **`robots.txt`** — allows everything, names the sitemap, and explicitly allows the answer-engine crawlers (ClaudeBot, GPTBot, PerplexityBot, Google-Extended, and friends). It deliberately does **not** disallow `/vendor/`: blocking a site's own CSS and JavaScript is what breaks rendering @@ -143,6 +147,14 @@ every page carries an absolute canonical pointing at the custom domain, so searc consolidate the two rather than treating them as duplicates. Set `"workers_dev": false` in `wrangler.jsonc` if you would rather it not answer at all. +### Unmatched paths + +`not_found_handling: "404-page"` in `wrangler.jsonc` makes Workers serve `site/404.html` with a +`404` status for anything that does not match a file, instead of the platform's bare response. That +page links its stylesheets and scripts with root-relative paths (`/styles.css`, not `./styles.css`) +because it answers for nested addresses too, where a relative path would resolve against the +missing directory. It carries `noindex` and no canonical tag, since it has no URL of its own. + ### Response headers `site/_headers` sets `X-Content-Type-Options`, `Referrer-Policy`, `X-Frame-Options`, and a strict diff --git a/package.json b/package.json index e6340a9..c7b09bb 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "type": "git", "url": "git+https://github.com/cmm-cmm/ForgeDialog.git" }, - "homepage": "https://github.com/cmm-cmm/ForgeDialog#readme", + "homepage": "https://forgedialog.konexforge.com", "bugs": "https://github.com/cmm-cmm/ForgeDialog/issues", "engines": { "node": ">=20" diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs index bc70894..1682e11 100644 --- a/scripts/build-site.mjs +++ b/scripts/build-site.mjs @@ -1,4 +1,6 @@ +import { execFileSync } from 'node:child_process'; import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises'; +import { fileURLToPath } from 'node:url'; /** * Copies the built library into the static site so the page runs the code from @@ -32,29 +34,54 @@ const origin = new URL(canonical).origin; const pages = [ { path: '/', + file: 'site/index.html', priority: '1.0', title: 'Forge Dialog', summary: 'What it is, live demos, and an interactive appearance playground.', }, { path: '/docs', + file: 'site/docs.html', priority: '0.9', title: 'API reference', summary: 'Every option, method, and entry point: dialogs, appearance, dragging, forms, wizards, toasts, theming, plugins, and framework adapters.', }, ]; -const lastmod = new Date().toISOString().slice(0, 10); + +/** + * `lastmod` has to be the day the page's content actually changed. Stamping + * every build with today's date tells a crawler both pages change daily, which + * is false, and a sitemap that is wrong about it is one a crawler learns to + * ignore. Git knows the real answer; a shallow clone or a tarball export might + * not, so the entry is written without a `lastmod` rather than with a + * plausible-looking lie. + */ +function lastModified(file) { + try { + return ( + execFileSync('git', ['log', '-1', '--format=%cs', '--', file], { + cwd: fileURLToPath(root), + encoding: 'utf8', + stdio: ['ignore', 'pipe', 'ignore'], + }).trim() || null + ); + } catch { + return null; + } +} await writeFile( new URL('sitemap.xml', site), ` ${pages - .map( - (page) => - ` \n ${origin}${page.path}\n ${lastmod}\n ${page.priority}\n `, - ) + .map((page) => { + const lastmod = lastModified(page.file); + return ` \n ${origin}${page.path}\n${ + lastmod ? ` ${lastmod}\n` : '' + } ${page.priority}\n `; + }) .join('\n')} `, diff --git a/site/404.html b/site/404.html new file mode 100644 index 0000000..c477886 --- /dev/null +++ b/site/404.html @@ -0,0 +1,66 @@ + + + + + + Page not found — Forge Dialog + + + + + + + + + + + +
+
+ + Forge Dialog + … + + Features + Playground + Docs + GitHub + +
+
+ +
+
+

That page isn’t here.

+

+ The address you followed does not match anything on this site. The two pages that do exist + are the overview and the API reference. +

+ +
+ Back to the overview + Read the docs + Report a broken link +
+
+
+ +
+
+ MIT licensed. Built with no runtime dependencies. + + GitHub · + npm · + Changelog + +
+
+ + + + + diff --git a/wrangler.jsonc b/wrangler.jsonc index c404f77..a0c2397 100644 --- a/wrangler.jsonc +++ b/wrangler.jsonc @@ -9,6 +9,10 @@ // library's .mjs/.d.ts files with no index.html, which serves nothing. "assets": { "directory": "./site", + + // Without this an unmatched path gets a bare, unstyled 404 from the + // platform. site/404.html is the site's own, and it carries noindex. + "not_found_handling": "404-page", }, // Declared rather than left to the default so a deploy stops warning about From 1db1b0a9853fa8c5399eca092f5321e196adbaf7 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 2 Sep 2026 06:03:31 +0000 Subject: [PATCH 5/7] Add a live demo page and show the mark in the page header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The site advertised the library but barely demonstrated it. The landing page had four hero buttons and the appearance playground; the "examples" section was static code with a Copy button and nothing that ran. The full demo — the one covering drawers, sheets, toasts, the palette, forms and wizards — was demo/index.html at the repository root, which loads ../dist/ directly and is never deployed. site/demo.html runs all of it at /demo, against the same vendored build the rest of the site uses: alert, confirm, prompt, validated prompt, open(), stacking, animation options, drawers on both sides, bottom sheets, three toast tones, the lightbox, loading states, the command palette, the notification centre, form(), wizard(), and formWizard(). Each card pairs a control that really runs with the snippet of the call being made, so the page cannot drift from what it documents — a wrong snippet would show up as a misbehaving button beside it. A plugin registered on the page logs afterOpen and afterClose, and every demo prints its return value, so the result log is also evidence the hooks fire. demo.js uses a single delegated listener keyed by data-demo. The site's CSP is script-src 'self', so inline handlers would be blocked; a demo that throws prints the failure into the log rather than only the console. The mark was only ever a favicon and an apple-touch icon: no page displayed it. It now sits in the header of every page beside the wordmark, with alt="" because the adjacent text already names the product and a screen reader should not announce it twice. The API calls were taken from the reviewed report in etc/ and the manual demo page rather than written from memory, and the global surface was read out of a real browser first, so nothing here calls an export that does not exist. Verified in Chromium against wrangler dev with the production _headers CSP: all 22 demo controls surface what they claim with no console errors and no failed requests, the header mark renders on all four pages, the version badge reads from the library's own export, and every page fits at 320, 380, 480, 768 and 1280px with zero horizontal overflow. npm run validate passes. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4 --- README.md | 9 +- docs/website.md | 32 ++- scripts/build-site.mjs | 8 + site/404.html | 2 + site/demo.html | 551 +++++++++++++++++++++++++++++++++++++++++ site/demo.js | 307 +++++++++++++++++++++++ site/docs.html | 2 + site/index.html | 2 + site/styles.css | 71 +++++- 9 files changed, 975 insertions(+), 9 deletions(-) create mode 100644 site/demo.html create mode 100644 site/demo.js diff --git a/README.md b/README.md index aebb226..2d9a421 100644 --- a/README.md +++ b/README.md @@ -271,10 +271,11 @@ tooling and SSR imports. ## Website -`site/` holds a dependency-free landing page with an interactive appearance playground, plus a -full API reference at `site/docs.html`. Build and serve both with `npm run site`. The icon, the -generated `sitemap.xml` / `robots.txt` / `llms.txt`, the structured data, and the Cloudflare -deployment settings are covered in [docs/website.md](docs/website.md). +`site/` holds a dependency-free landing page with an interactive appearance playground, a live +demo page that runs every surface the library ships, and a full API reference. Build and serve all +three with `npm run site`. The icon, the generated `sitemap.xml` / `robots.txt` / `llms.txt`, the +structured data, and the Cloudflare deployment settings are covered in +[docs/website.md](docs/website.md). ## Contributing diff --git a/docs/website.md b/docs/website.md index d4de9c7..e4ebb73 100644 --- a/docs/website.md +++ b/docs/website.md @@ -21,6 +21,7 @@ CDN, so what you see is always the build you have. | File | Role | | ----------------- | --------------------------------------------------------------------- | | `site/index.html` | The landing page: demos, appearance playground, facts table, and FAQ. | +| `site/demo.html` | Live demos: every surface running, each beside its code. | | `site/docs.html` | The API reference, written against the reviewed report in `etc/`. | | `site/404.html` | Served for any unmatched path. Carries `noindex`. | | `site/styles.css` | Site styling. Its dark mode reads the same `data-fd-theme` attribute | @@ -28,13 +29,15 @@ CDN, so what you see is always the build you have. | `site/common.js` | Shared chrome: version badge, theme toggle, copy buttons. | | `site/site.js` | Landing-page demos and the appearance playground. | | `site/docs.js` | Highlights the sidebar entry for the section being read. | -| `site/icon.svg` | The mark, and the favicon browsers actually load. | +| `site/demo.js` | Runs the demos. One delegated listener, no inline handlers. | +| `site/icon.svg` | The mark: the favicon, and the logo in every page header. | | `wrangler.jsonc` | Cloudflare deployment config. Points at `site/`, not `dist/`. | | `site/_headers` | Cloudflare response headers, including a strict CSP. | ### URLs -The docs page is served at **`/docs`**, not `/docs.html`. Both Cloudflare's static-asset routing +The demo and docs pages are served at **`/demo`** and **`/docs`**, not `/demo.html` and +`/docs.html`. Both Cloudflare's static-asset routing (`html_handling: "auto-trailing-slash"`, the default) and the `serve` used by `npm run site` drop the `.html` and redirect the extension form, so the extensionless URL is the one that answers with a `200`. Every link, canonical tag, sitemap entry, and `llms.txt` link uses it — a canonical or a @@ -53,10 +56,31 @@ refers to it. The npm package (`forgedialog`), the browser global (`ForgeDialog` element (`forge-dialog`), and the repository name stay as they are: they are identifiers, not prose. +## The demo page + +`site/demo.html` runs every surface the library ships — the four dialog entry points, `open()`, +stacking, animations, drawers, bottom sheets, toasts, the lightbox, loading states, the command +palette, the notification centre, `form()`, `wizard()`, and `formWizard()` — against the same +vendored build the rest of the site uses. + +Each card pairs a control that really runs with the snippet of the call being made, so the page +cannot drift from what it documents: if a snippet were wrong, the button beside it would misbehave. +A plugin registered on the page logs `afterOpen` and `afterClose`, and every demo prints its return +value, so the result log doubles as evidence that the hooks fire. + +`demo.js` uses one delegated listener on `document` keyed by `data-demo`, because the site's CSP is +`script-src 'self'` and inline `onclick` attributes would be blocked. A demo that throws prints the +failure into the log rather than only the console. + +This is separate from `demo/index.html` at the repository root, which is the manual verification +page the visual regression test drives. That one loads `../dist/` directly and is not deployed. + ## Icons -`site/icon.svg` is the source of truth and is what browsers load as the favicon. Two bitmaps are -committed beside it because SVG is not enough everywhere: +`site/icon.svg` is the source of truth. It is what browsers load as the favicon and what every page +header shows beside the wordmark — with `alt=""`, since the adjacent text already names the product +and a screen reader should not announce it twice. Two bitmaps are committed beside it because SVG +is not enough everywhere: | File | Size | Used by | | --------------------------- | -------- | ------------------------------ | diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs index 1682e11..194b096 100644 --- a/scripts/build-site.mjs +++ b/scripts/build-site.mjs @@ -39,6 +39,14 @@ const pages = [ title: 'Forge Dialog', summary: 'What it is, live demos, and an interactive appearance playground.', }, + { + path: '/demo', + file: 'site/demo.html', + priority: '0.9', + title: 'Live demos', + summary: + 'Every surface running in the browser — dialogs, drawers, sheets, lightboxes, loading states, toasts, the command palette, forms, and wizards — each beside the code that produced it.', + }, { path: '/docs', file: 'site/docs.html', diff --git a/site/404.html b/site/404.html index c477886..38700d3 100644 --- a/site/404.html +++ b/site/404.html @@ -20,11 +20,13 @@
+ Forge Dialog … Features Playground + Demos Docs GitHub diff --git a/site/demo.html b/site/demo.html new file mode 100644 index 0000000..a83a1b7 --- /dev/null +++ b/site/demo.html @@ -0,0 +1,551 @@ + + + + + + Live demos — Forge Dialog + + + + + + + + + + + + + + + + + + + + + +
+
+ + + Forge Dialog + … + + Features + Playground + Demos + Docs + GitHub + +
+
+ +
+
+

Live demos

+

+ Every surface Forge Dialog ships, running in this page against the same build the rest of + the site uses. Each card shows the code that produced what you just saw, so nothing here + is a mock-up. +

+
+ +
+
+

Dialogs

+

+ The four entry points that replace the browser built-ins, plus the generic + open() they are all built on. +

+ +
+
+

alert()

+

One message, one button. Resolves when it closes.

+
+ +
+
+ + 
await alert('This is an alert dialog.', { title: 'Heads up' });
+
+
+ +
+

confirm()

+

Resolves true or false rather than blocking the page.

+
+ +
+
+ + 
const ok = await confirm('Are you sure you want to continue?', {
+  title: 'Please confirm',
+});
+
+
+ +
+

prompt()

+

Resolves the typed string, or null when dismissed.

+
+ +
+
+ + 
const name = await prompt('What is your name?', {
+  title: 'Introduce yourself',
+  defaultValue: 'Ada Lovelace',
+});
+
+
+ +
+

Validated prompt

+

+ validate returns true or an error string, and the dialog + stays open until it passes. +

+
+ +
+
+ + 
await prompt('Enter an even number:', {
+  title: 'Validated prompt',
+  validate: (value) => {
+    const n = Number(value);
+    if (Number.isNaN(n)) return 'Please enter a number';
+    if (n % 2 !== 0) return 'Number must be even';
+    return true;
+  },
+});
+
+
+ +
+

open()

+

Build the body yourself and decide what each button resolves with.

+
+ +
+
+ + 
const instance = open({
+  title: 'Custom dialog',
+  content: (container) => {
+    const p = document.createElement('p');
+    p.textContent = 'Built with the generic open() API.';
+    container.append(p);
+  },
+  buttons: [
+    { text: 'Close', role: 'primary', autoFocus: true, onClick: (i) => i.close('done') },
+  ],
+});
+const result = await instance.whenClosed();
+
+
+ +
+

Stacking

+

+ Open a second dialog over the first. Focus, Escape, and scroll locking follow the + top of the stack. +

+
+ +
+
+ + 
const first = confirm('First dialog. Open a second one on top?', { title: 'Dialog 1' });
+const second = await confirm('This is stacked above the first dialog.', { title: 'Dialog 2' });
+const firstResult = await first;
+
+
+
+
+
+ +
+
+

Animations

+

+ Set per dialog. Every animation honours prefers-reduced-motion. +

+ +
+
+

No animation

+

Opens and closes instantly.

+
+ +
+
+ + 
await alert('This alert opens and closes instantly.', { animation: 'none' });
+
+
+ +
+

Slide

+

Slides in from below instead of scaling.

+
+ +
+
+ + 
await confirm('This dialog slides in from below.', { animation: 'slide' });
+
+
+
+
+
+ +
+
+

Beyond dialogs

+

+ The same core, presented differently. All of these live behind + forgedialog/presentation. +

+ +
+
+

Drawer

+

A side panel with the same focus handling as a modal.

+
+ + +
+
+ + 
drawer({
+  title: 'Project settings',
+  message: 'A native, focus-safe drawer.',
+  side: 'right',
+  buttons: [{ text: 'Done', role: 'primary', closesDialog: true }],
+});
+
+
+ +
+

Bottom sheet

+

The mobile shape. Drag it down to dismiss.

+
+ +
+
+ + 
bottomSheet({
+  title: 'Quick actions',
+  message: 'Drag down to dismiss this sheet.',
+  buttons: [{ text: 'Done', role: 'primary', closesDialog: true }],
+});
+
+
+ +
+

Toast

+

Announced politely, dismissed on its own. Four tones.

+
+ + + +
+
+ + 
toast('Changes saved successfully.', { tone: 'success' });
+
+
+ +
+

Lightbox

+

An image at full size, with a caption and the same dismissal rules.

+
+ +
+
+ + 
lightbox('/og-image.png', {
+  alt: 'The Forge Dialog social card',
+  caption: 'Rendered from site/icon.svg at build time.',
+});
+
+
+ +
+

Loading

+

+ A blocking state you control. update() changes the message, + close() ends it. +

+
+ +
+
+ + 
const task = loading('Uploading…');
+task.update('Processing…');
+await task.close();
+
+
+ +
+

Command palette

+

Filterable commands with keyboard navigation. Type to narrow.

+
+ +
+
+ + 
commandPalette([
+  { id: 'theme-dark', label: 'Switch to dark theme', keywords: ['appearance'],
+    run: () => setTheme('dark') },
+  { id: 'theme-light', label: 'Switch to light theme', keywords: ['appearance'],
+    run: () => setTheme('light') },
+]);
+
+
+ +
+

Notification centre

+

+ Every toast raised in this page, kept in history. Raise a few toasts first, then + open it. +

+
+ + +
+
+ + 
notificationCenter();
+getNotificationHistory(); // [{ id, message, tone, createdAt }]
+clearNotificationHistory();
+
+
+
+
+
+ +
+
+

Forms and wizards

+

+ Behind forgedialog/workflows. In TypeScript the field names are inferred + into the result type, so the values come back typed without a cast. +

+ +
+
+

form()

+

A validated form from a field list. Resolves the values, or null.

+
+ +
+
+ + 
const values = await form(
+  [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+    { name: 'plan', type: 'select', label: 'Plan', options: [
+      { value: 'free', label: 'Free' },
+      { value: 'pro', label: 'Pro' },
+    ] },
+    { name: 'notes', type: 'textarea', label: 'Notes', rows: 3 },
+  ],
+  { title: 'Create an account' },
+);
+
+
+ +
+

wizard()

+

Multi-step, with per-step validation and shared data.

+
+ +
+
+ + 
const flow = wizard({
+  initialData: { name: '' },
+  steps: [
+    {
+      id: 'profile',
+      title: 'Your profile',
+      render: (el, ctx) => {
+        const input = document.createElement('input');
+        input.className = 'fd-input';
+        input.placeholder = 'Name';
+        input.addEventListener('input', () => ctx.set({ name: input.value }));
+        el.append(input);
+      },
+      validate: (ctx) => (ctx.data.name ? true : 'Please enter your name.'),
+    },
+    { id: 'review', title: 'Review',
+      render: (el, ctx) => { el.textContent = `Ready to welcome ${ctx.data.name}.`; } },
+  ],
+});
+const data = await flow.result;
+
+
+ +
+

formWizard()

+

The same field list as form(), spread over steps.

+
+ +
+
+ + 
const values = await formWizard([
+  { id: 'account', title: 'Account', fields: [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+  ] },
+  { id: 'profile', title: 'Profile', fields: [
+    { name: 'name', type: 'text', label: 'Full name', required: true },
+  ] },
+]);
+
+
+
+
+
+ +
+
+

Theming

+

+ setTheme() drives the library and this page together; + setThemePreset() swaps the whole look. +

+ +
+
+

Theme

+

Light, dark, or follow the operating system.

+
+ + + +
+
+ + 
setTheme('dark'); // 'light' | 'dark' | 'system'
+
+
+ +
+

Presets

+

Pick one, then open any demo above to see it applied.

+
+ + + + +
+
+ + 
setThemePreset('glass');
+
+
+ +
+

Appearance and dragging

+

+ Per-dialog colour, radius, shadow direction, hover, and drag bounds have their own + interactive builder on the landing page. +

+
+ Open the playground +
+
+ + 
open({
+  title: 'Styled dialog',
+  appearance: { radius: 20, shadow: { angle: 180, distance: 20, blur: 60 } },
+  draggable: { bounds: 'viewport' },
+});
+
+
+
+
+
+ +
+
+

What each demo returned

+

+ Every demo above prints its result here, along with the plugin lifecycle hooks it fired + — afterOpen and afterClose from a plugin registered on this + page. +

+ 

+        

+      

+    

+
+    

+      

+        MIT licensed. Built with no runtime dependencies.
+        
+          GitHub ·
+          npm ·
+          Changelog
+        
+      

+    

+
+    
+    
+    
+  
+
diff --git a/site/demo.js b/site/demo.js
new file mode 100644
index 0000000..97d9392
--- /dev/null
+++ b/site/demo.js
@@ -0,0 +1,307 @@
+/* Demo-page behaviour. Every card's button really calls the library, and the
+   snippet beside it is the call being made, so the page cannot drift from what
+   it documents. The shared chrome (version badge, theme toggle, copy buttons)
+   lives in common.js. */
+(() => {
+  const {
+    alert,
+    confirm,
+    prompt,
+    open,
+    drawer,
+    bottomSheet,
+    toast,
+    lightbox,
+    loading,
+    commandPalette,
+    notificationCenter,
+    getNotificationHistory,
+    clearNotificationHistory,
+    form,
+    formWizard,
+    wizard,
+    setTheme,
+    setThemePreset,
+    registerPlugin,
+  } = ForgeDialog;
+
+  const logEl = document.getElementById('demo-log');
+
+  function print(label, value) {
+    const time = new Date().toLocaleTimeString();
+    const text = value === undefined ? '' : `: ${JSON.stringify(value)}`;
+    logEl.textContent = `[${time}] ${label}${text}\n${logEl.textContent}`;
+  }
+
+  // Lifecycle hooks are easiest to believe when you can watch them fire.
+  registerPlugin({
+    name: 'site-demo-logger',
+    hooks: {
+      afterOpen: (ctx) => print('hook:afterOpen', ctx.instance.id),
+      afterClose: (ctx) => print('hook:afterClose', ctx.instance.id),
+    },
+  });
+
+  const demos = {
+    async alert() {
+      await alert('This is an alert dialog.', { title: 'Heads up' });
+      print('alert()', 'closed');
+    },
+
+    async confirm() {
+      print(
+        'confirm()',
+        await confirm('Are you sure you want to continue?', {
+          title: 'Please confirm',
+        }),
+      );
+    },
+
+    async prompt() {
+      print(
+        'prompt()',
+        await prompt('What is your name?', {
+          title: 'Introduce yourself',
+          defaultValue: 'Ada Lovelace',
+        }),
+      );
+    },
+
+    async 'prompt-validate'() {
+      print(
+        'prompt() validated',
+        await prompt('Enter an even number:', {
+          title: 'Validated prompt',
+          validate: (value) => {
+            const n = Number(value);
+            if (Number.isNaN(n)) return 'Please enter a number';
+            if (n % 2 !== 0) return 'Number must be even';
+            return true;
+          },
+        }),
+      );
+    },
+
+    async open() {
+      const instance = open({
+        title: 'Custom dialog',
+        content: (container) => {
+          const p = document.createElement('p');
+          p.textContent = 'This dialog was built with the generic open() API.';
+          container.append(p);
+        },
+        buttons: [
+          { text: 'Close', role: 'primary', autoFocus: true, onClick: (i) => i.close('done') },
+        ],
+      });
+      print('open()', await instance.whenClosed());
+    },
+
+    async stacked() {
+      const first = confirm('First dialog. Open a second one on top?', { title: 'Dialog 1' });
+      print(
+        'stacked: second',
+        await confirm('This is stacked above the first dialog.', {
+          title: 'Dialog 2',
+        }),
+      );
+      print('stacked: first', await first);
+    },
+
+    async 'no-animation'() {
+      await alert('This alert opens and closes instantly.', { animation: 'none' });
+      print('alert() animation:none', 'closed');
+    },
+
+    async slide() {
+      print(
+        'confirm() animation:slide',
+        await confirm('This dialog slides in from below.', {
+          animation: 'slide',
+        }),
+      );
+    },
+
+    drawer() {
+      drawer({
+        title: 'Project settings',
+        message: 'A native, focus-safe right drawer.',
+        side: 'right',
+        buttons: [{ text: 'Done', role: 'primary', closesDialog: true }],
+      });
+    },
+
+    'drawer-left'() {
+      drawer({
+        title: 'Navigation',
+        message: 'The same drawer, anchored to the left.',
+        side: 'left',
+        buttons: [{ text: 'Done', role: 'primary', closesDialog: true }],
+      });
+    },
+
+    sheet() {
+      bottomSheet({
+        title: 'Quick actions',
+        message: 'Drag down to dismiss this sheet.',
+        buttons: [{ text: 'Done', role: 'primary', closesDialog: true }],
+      });
+    },
+
+    'toast-success'() {
+      toast('Changes saved successfully.', { tone: 'success' });
+    },
+
+    'toast-error'() {
+      toast('That upload failed. Nothing was lost.', { tone: 'error' });
+    },
+
+    'toast-action'() {
+      toast('Message archived.', {
+        tone: 'info',
+        actions: [{ text: 'Undo', onClick: () => print('toast action', 'undo') }],
+      });
+    },
+
+    lightbox() {
+      lightbox('./og-image.png', {
+        alt: 'The Forge Dialog social card',
+        caption: 'Rendered from site/icon.svg at build time.',
+      });
+    },
+
+    async loading() {
+      const task = loading('Uploading…');
+      print('loading()', 'opened');
+      await new Promise((resolve) => setTimeout(resolve, 900));
+      task.update('Processing…');
+      await new Promise((resolve) => setTimeout(resolve, 900));
+      await task.close();
+      print('loading()', 'closed');
+    },
+
+    commands() {
+      commandPalette([
+        {
+          id: 'theme-dark',
+          label: 'Switch to dark theme',
+          keywords: ['appearance'],
+          run: () => setTheme('dark'),
+        },
+        {
+          id: 'theme-light',
+          label: 'Switch to light theme',
+          keywords: ['appearance'],
+          run: () => setTheme('light'),
+        },
+        {
+          id: 'preset-glass',
+          label: 'Use the glass preset',
+          keywords: ['theme', 'appearance'],
+          run: () => setThemePreset('glass'),
+        },
+      ]);
+    },
+
+    notifications() {
+      print('getNotificationHistory()', getNotificationHistory().length);
+      notificationCenter();
+    },
+
+    'notifications-clear'() {
+      clearNotificationHistory();
+      print('clearNotificationHistory()', 'history emptied');
+    },
+
+    async form() {
+      print(
+        'form()',
+        await form(
+          [
+            { name: 'email', type: 'email', label: 'Email', required: true },
+            {
+              name: 'plan',
+              type: 'select',
+              label: 'Plan',
+              options: [
+                { value: 'free', label: 'Free' },
+                { value: 'pro', label: 'Pro' },
+              ],
+            },
+            { name: 'notes', type: 'textarea', label: 'Notes', rows: 3 },
+          ],
+          { title: 'Create an account' },
+        ),
+      );
+    },
+
+    async wizard() {
+      const flow = wizard({
+        initialData: { name: '' },
+        steps: [
+          {
+            id: 'profile',
+            title: 'Your profile',
+            render: (el, ctx) => {
+              const input = document.createElement('input');
+              input.className = 'fd-input';
+              input.placeholder = 'Name';
+              input.addEventListener('input', () => ctx.set({ name: input.value }));
+              el.append(input);
+            },
+            validate: (ctx) => (ctx.data.name ? true : 'Please enter your name.'),
+          },
+          {
+            id: 'review',
+            title: 'Review',
+            render: (el, ctx) => {
+              el.textContent = `Ready to welcome ${ctx.data.name}.`;
+            },
+          },
+        ],
+      });
+      print('wizard()', await flow.result);
+    },
+
+    async 'form-wizard'() {
+      print(
+        'formWizard()',
+        await formWizard([
+          {
+            id: 'account',
+            title: 'Account',
+            fields: [{ name: 'email', type: 'email', label: 'Email', required: true }],
+          },
+          {
+            id: 'profile',
+            title: 'Profile',
+            fields: [{ name: 'name', type: 'text', label: 'Full name', required: true }],
+          },
+        ]),
+      );
+    },
+  };
+
+  document.addEventListener('click', (event) => {
+    const trigger = event.target.closest('[data-demo], [data-theme], [data-preset]');
+    if (!trigger) return;
+
+    if (trigger.dataset.theme) {
+      setTheme(trigger.dataset.theme);
+      print('setTheme()', trigger.dataset.theme);
+      return;
+    }
+    if (trigger.dataset.preset) {
+      setThemePreset(trigger.dataset.preset);
+      print('setThemePreset()', trigger.dataset.preset);
+      return;
+    }
+
+    const run = demos[trigger.dataset.demo];
+    // A demo that threw should say so in the log rather than only in the
+    // console, since the log is the page's own record of what happened.
+    Promise.resolve()
+      .then(run)
+      .catch((error) => print(`${trigger.dataset.demo} failed`, String(error)));
+  });
+})();
diff --git a/site/docs.html b/site/docs.html
index 94b3587..0f21b60 100644
--- a/site/docs.html
+++ b/site/docs.html
@@ -75,11 +75,13 @@
     

       

         
+          
           Forge Dialog
           …
         
         Features
         Playground
+        Demos
         Docs
         GitHub
         
diff --git a/site/index.html b/site/index.html
index 106979f..481bf19 100644
--- a/site/index.html
+++ b/site/index.html
@@ -148,6 +148,7 @@
     

       

         
+          
           Forge Dialog
           …
         
@@ -155,6 +156,7 @@
         Playground
         Examples
         FAQ
+        Demos
         Docs
         GitHub
         
diff --git a/site/styles.css b/site/styles.css
index bbdf92c..2d8a069 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -99,11 +99,20 @@ a {
     flex: 1 0 100%;
     margin-inline-end: 0;
   }
+
+  /* The mark carries no information the adjacent wordmark does not, so it is
+   decorative: alt="" keeps a screen reader from announcing the name twice. */
+  .brand-mark {
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    flex: none;
+  }
 }
 
 .brand {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 1.05rem;
@@ -638,3 +647,63 @@ pre code {
   font-size: 0.88rem;
   color: var(--text);
 }
+
+/* Demo page. Each card pairs a control that really runs with the code behind
+   it, so the page doubles as documentation for what it demonstrates. */
+.demos {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+  gap: 20px;
+}
+
+.demo-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+}
+
+.demo-card h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.demo-card p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.demo-card .snippet {
+  margin-top: auto;
+}
+
+.demo-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.demo-log {
+  margin: 0;
+  padding: 16px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--code-bg);
+  color: var(--code-text);
+  font: 0.86rem/1.65 var(--mono);
+  white-space: pre-wrap;
+  overflow-x: auto;
+  min-height: 120px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.demo-log:empty::after {
+  content: 'Results from the demos above appear here.';
+  opacity: 0.55;
+}

From 38c1b666e7bf942e52308d632f5c5dc97ada773a Mon Sep 17 00:00:00 2001
From: Claude 
Date: Wed, 2 Sep 2026 06:16:13 +0000
Subject: [PATCH 6/7] Adopt the sibling sites' metadata, entity graph, and a
 site checker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Read against autumn.konexforge.com and forgeselect.konexforge.com — their
sources, since this environment's egress proxy refuses both hostnames — and
closed the gaps that were real rather than cosmetic.

The checker is the substantial one. ForgeSelect verifies its built site for
broken local links; scripts/check-site.mjs does that and the four other
things this site has actually got wrong: a fragment naming an id that does
not exist on the page it lands on, a link written in the .html form the
server answers with a redirect, JSON-LD that does not parse or an FAQPage
whose questions have drifted from the visible ones, and a page missing a
canonical, title, description or og:image — plus a 404 that declares a
canonical or forgets noindex, and any disagreement between pages about the
canonical origin. Each rule was verified by breaking the site and watching
it fail, not by watching it pass. It runs at the end of site:build, so a
broken site fails the Cloudflare deploy instead of reaching the domain.

Entity graph: an Organization node for KonexForge, referenced as the site's
publisher and the software's author. Both sibling sites are under the same
domain, and a shared @id is what lets a search engine treat them as one
publisher's products rather than three unrelated pages.

Positioning: the FAQ answered how the library differs from window.alert but
named no library. It now answers the comparison people actually search for —
SweetAlert2 and Bootstrap modals — factually: the native dialog element does
the focus and layering work, there are no runtime dependencies where a
Bootstrap modal needs Bootstrap, and an alert-only build is about 5.5 KB.

Metadata parity with the siblings: robots, author, explicit twitter:title,
twitter:description and twitter:image rather than relying on the og: tags
being inherited, og:image:type, rel=sitemap, and og:locale corrected from
"en" to the en_US form the property actually takes.

favicon.ico, rendered from the same icon.svg as every other icon: a 32×32
PNG in an ICO container, which needs no bitmap encoder and costs 1.2 KB.
Clients request that path whatever the markup says. build-icons.mjs writes
it alongside the other two and reproduces all three byte-for-byte.

Deliberately not adopted: meta keywords. Both siblings carry one and Google
has ignored it for years; the competitor terms belong in the visible FAQ
answer, where they are also true, and that is where they went.

Verified in Chromium against wrangler dev with the production _headers CSP:
all four pages carry the new tags in the live DOM, /favicon.ico serves as
image/vnd.microsoft.icon, the four schema types on the landing page parse
with Organization among them, and every page still fits at 320, 380 and
768px with zero horizontal overflow and no console errors. npm run validate
passes.

Co-Authored-By: Claude Opus 5 
Claude-Session: https://claude.ai/code/session_01MtJ3nDatGiv7dHjvZL1uZ4
---
 docs/website.md         |  31 +++++++--
 package.json            |   5 +-
 scripts/build-icons.mjs |  41 +++++++++--
 scripts/check-site.mjs  | 148 ++++++++++++++++++++++++++++++++++++++++
 site/404.html           |   1 +
 site/demo.html          |  13 +++-
 site/docs.html          |  13 +++-
 site/favicon.ico        | Bin 0 -> 1188 bytes
 site/index.html         |  48 ++++++++++++-
 site/styles.css         |   9 +++
 10 files changed, 291 insertions(+), 18 deletions(-)
 create mode 100644 scripts/check-site.mjs
 create mode 100644 site/favicon.ico

diff --git a/docs/website.md b/docs/website.md
index e4ebb73..94a37d4 100644
--- a/docs/website.md
+++ b/docs/website.md
@@ -82,10 +82,11 @@ header shows beside the wordmark — with `alt=""`, since the adjacent text alre
 and a screen reader should not announce it twice. Two bitmaps are committed beside it because SVG
 is not enough everywhere:
 
-| File                        | Size     | Used by                        |
-| --------------------------- | -------- | ------------------------------ |
-| `site/apple-touch-icon.png` | 180×180  | iOS home screens               |
-| `site/og-image.png`         | 1200×630 | Link previews and social cards |
+| File                        | Size     | Used by                                        |
+| --------------------------- | -------- | ---------------------------------------------- |
+| `site/favicon.ico`          | 32×32    | Clients that request `/favicon.ico` regardless |
+| `site/apple-touch-icon.png` | 180×180  | iOS home screens                               |
+| `site/og-image.png`         | 1200×630 | Link previews and social cards                 |
 
 Both are rendered from `icon.svg` through Chromium, which is already a dev dependency:
 
@@ -95,7 +96,27 @@ npm run site:icons
 
 Run it only when the icon changes; neither the site build nor a deploy runs it. The apple-touch
 variant squares off the mark's ground (via `#ground { rx: 0 }`) because iOS applies its own rounded
-mask and would otherwise round it twice.
+mask and would otherwise round it twice. The `.ico` is a 32×32 PNG wrapped in an ICO container,
+which every browser since Vista accepts and which needs no bitmap encoder — the whole file is about
+1.2 KB.
+
+## Checking the site
+
+`npm run site:build` ends with `node scripts/check-site.mjs`, so a broken site fails the Cloudflare
+deploy rather than reaching the domain. Run it alone with `npm run site:check`.
+
+It fails the build on:
+
+- a link or asset that resolves to nothing, following the same rules the server does (a directory
+  means its `index.html`, an extensionless path means the `.html` file of that name);
+- a `#fragment` naming an id that does not exist on the page it lands on;
+- a link written in the `.html` form, which the server answers with a redirect;
+- JSON-LD that does not parse, and an `FAQPage` whose questions have drifted from the visible ones;
+- a page with no canonical, title, description, or `og:image`, a `404.html` that declares a
+  canonical or forgets `noindex`, and any disagreement between pages about the canonical origin.
+
+Every one of those is a failure this site shipped or nearly shipped. They are checked rather than
+eyeballed because a page can look right in a browser and still be wrong in all of them.
 
 ## SEO and answer engines
 
diff --git a/package.json b/package.json
index c7b09bb..abc3182 100644
--- a/package.json
+++ b/package.json
@@ -226,10 +226,11 @@
     "validate": "npm run typecheck && npm run lint && npm run test:coverage && npm run size && npm run test:treeshake && npm run check:package && npm run api:check && npm run api:subpaths && npm run test:consumers && npm run test:capabilities && npm run test:csp && npm run package:size",
     "validate:all": "npm run validate && npm run test:e2e",
     "demo": "npm run build && serve .",
-    "site:build": "npm run build && node scripts/build-site.mjs",
+    "site:build": "npm run build && node scripts/build-site.mjs && node scripts/check-site.mjs",
     "site:icons": "node scripts/build-icons.mjs",
     "site": "npm run site:build && serve site",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "site:check": "node scripts/check-site.mjs"
   },
   "keywords": [
     "dialog",
diff --git a/scripts/build-icons.mjs b/scripts/build-icons.mjs
index 28eab81..ae4ff82 100644
--- a/scripts/build-icons.mjs
+++ b/scripts/build-icons.mjs
@@ -4,10 +4,11 @@ import { readFile, writeFile } from 'node:fs/promises';
 /**
  * Rasterizes `site/icon.svg` into the bitmap icons the web still needs.
  *
- * The SVG is the source of truth and is what browsers actually load as the
- * favicon; only iOS home screens and link-preview scrapers need PNGs. Those
- * PNGs are committed, so neither the site build nor a Cloudflare deploy runs
- * this — run it by hand (`npm run site:icons`) whenever the icon changes.
+ * The SVG is the source of truth and is what modern browsers load as the
+ * favicon; iOS home screens, link-preview scrapers, and clients that request
+ * `/favicon.ico` regardless of the `` need bitmaps. Those are
+ * committed, so neither the site build nor a Cloudflare deploy runs this — run
+ * it by hand (`npm run site:icons`) whenever the icon changes.
  *
  * Rendering goes through Chromium, which is already a dev dependency for the
  * end-to-end tests, rather than a hand-rolled rasterizer.
@@ -19,17 +20,18 @@ const icon = await readFile(new URL('icon.svg', site), 'utf8');
 const browser = await chromium.launch();
 
 /** Renders `html` at exactly `width`×`height` and writes it out as a PNG. */
-async function render(name, width, height, html) {
+async function render(name, width, height, html, { transparent = false } = {}) {
   const page = await browser.newPage({ viewport: { width, height } });
   await page.setContent(
     `
      ${html}`,
     { waitUntil: 'load' },
   );
-  const buffer = await page.screenshot({ type: 'png' });
+  const buffer = await page.screenshot({ type: 'png', omitBackground: transparent });
   await page.close();
-  await writeFile(new URL(name, site), buffer);
+  if (name.endsWith('.png')) await writeFile(new URL(name, site), buffer);
   console.log(`icons: ${name} (${width}×${height}, ${buffer.length} bytes)`);
+  return buffer;
 }
 
 // iOS applies its own rounded mask to home-screen icons, so this variant
@@ -70,4 +72,29 @@ await render(
    npm install forgedialog`,
 );
 
+// Some clients ask for /favicon.ico whatever the  says, and a
+// 404 for it shows up in logs and in crawlers' reports.
+//
+// An .ico is a 6-byte header, one 16-byte directory entry per image, then the
+// payloads — and since Vista a payload may be a PNG verbatim. Writing it that
+// way needs no bitmap encoder and keeps the file near a kilobyte.
+const ico = await render(
+  'favicon.ico',
+  32,
+  32,
+  `${icon}`,
+  { transparent: true },
+);
+const header = Buffer.alloc(6);
+header.writeUInt16LE(1, 2); // type 1 = icon
+header.writeUInt16LE(1, 4); // one image in the file
+const entry = Buffer.alloc(16);
+entry[0] = 32; // width
+entry[1] = 32; // height
+entry.writeUInt16LE(1, 4); // colour planes
+entry.writeUInt16LE(32, 6); // bits per pixel
+entry.writeUInt32LE(ico.length, 8); // payload size
+entry.writeUInt32LE(header.length + entry.length, 12); // payload offset
+await writeFile(new URL('favicon.ico', site), Buffer.concat([header, entry, ico]));
+
 await browser.close();
diff --git a/scripts/check-site.mjs b/scripts/check-site.mjs
new file mode 100644
index 0000000..dd58bb3
--- /dev/null
+++ b/scripts/check-site.mjs
@@ -0,0 +1,148 @@
+import { access, readFile, readdir } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * Checks the built site before it ships.
+ *
+ * Every failure listed here is one this repository actually shipped or nearly
+ * shipped: links that pointed at `docs.html` when the server answers at
+ * `/docs`, a sidebar entry aimed at a section that had been renamed, and an
+ * FAQ whose structured data could drift from the visible questions. A page can
+ * look right in a browser and still be wrong in all three ways, so they are
+ * checked rather than eyeballed.
+ *
+ * Runs at the end of `npm run site:build`, so a broken link fails the deploy
+ * instead of reaching the site.
+ */
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const site = path.join(root, 'site');
+const failures = [];
+
+function fail(file, message) {
+  failures.push(`${path.relative(site, file)}: ${message}`);
+}
+
+async function walk(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const target = path.join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...(await walk(target)));
+    else files.push(target);
+  }
+  return files;
+}
+
+async function exists(target) {
+  try {
+    await access(target);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Resolves a site URL the way Workers static assets does: a directory means
+ * its index.html, and an extensionless path means the .html file of that name.
+ */
+async function resolveTarget(fromFile, url) {
+  const base = url.startsWith('/') ? site : path.dirname(fromFile);
+  const relative = url.startsWith('/') ? `.${url}` : url;
+  const target = path.resolve(base, relative);
+  for (const candidate of [target, path.join(target, 'index.html'), `${target}.html`]) {
+    if (await exists(candidate)) return candidate;
+  }
+  return null;
+}
+
+const files = (await walk(site)).filter((entry) => entry.endsWith('.html'));
+
+const ids = new Map();
+for (const file of files) {
+  const html = await readFile(file, 'utf8');
+  ids.set(file, new Set([...html.matchAll(/id="([^"]+)"/g)].map((match) => match[1])));
+}
+
+const origins = new Set();
+
+for (const file of files) {
+  const html = await readFile(file, 'utf8');
+
+  // Links and assets: the target has to exist, and an anchor has to name a
+  // real id on the page it lands on.
+  for (const [, url] of html.matchAll(/(?:href|src)="([^"]+)"/g)) {
+    if (/^(?:https?:|mailto:|data:|\/\/)/.test(url)) continue;
+    const [pathPart, anchor] = url.split('#');
+    const target = pathPart === '' ? file : await resolveTarget(file, pathPart);
+    if (!target) {
+      fail(file, `link goes nowhere: ${url}`);
+      continue;
+    }
+    if (anchor && target.endsWith('.html') && !ids.get(target)?.has(anchor)) {
+      fail(file, `anchor #${anchor} does not exist in ${path.relative(site, target)}`);
+    }
+    // A page the server answers at /docs must not be linked as /docs.html: the
+    // extension form is a redirect, and a redirecting link is a wasted hop.
+    if (/\.html$/.test(pathPart)) {
+      fail(file, `link uses the .html form, which redirects: ${url}`);
+    }
+  }
+
+  // Structured data has to parse, or a search engine silently ignores it.
+  for (const [, body] of html.matchAll(
+    /
+```
+
+A data block is not an executable script, so `script-src 'self'` allows it — an inline `
+  
+  
+    

+      

+        
+          
+          Forge Dialog
+          …
+        
+        Tính năng
+        Tuỳ biến
+        Demo
+        Tài liệu
+        GitHub
+        
+          EN
+          VI
+        
+        
+      

+    

+
+    

+      

+        
Demo trực tiếp

+        

+          Mọi thành phần Forge Dialog cung cấp, chạy thật trong trang này trên đúng bản build mà
+          phần còn lại của site đang dùng. Mỗi thẻ hiển thị đoạn mã tạo ra thứ bạn vừa thấy, nên
+          không có gì ở đây là mô phỏng.
+        

+      

+
+      

+        

+          
Hộp thoại

+          

+            Bốn điểm vào thay thế hàm dựng sẵn của trình duyệt, cùng hàm tổng quát
+            open() mà tất cả đều dựng trên đó.
+          

+
+          

+            

+              
alert()

+              
Một thông điệp, một nút. Trả về khi đóng.

+              

+                
+              

+              

+                
+                
await alert('Đây là một hộp thoại cảnh báo.', { title: 'Lưu ý' });

+              

+            

+
+            

+              
confirm()

+              
Trả về true hoặc false thay vì chặn cả trang.

+              

+                
+              

+              

+                
+                
const ok = await confirm('Bạn có chắc muốn tiếp tục không?', {
+  title: 'Xin xác nhận',
+});

+              

+            

+
+            

+              
prompt()

+              
Trả về chuỗi đã nhập, hoặc null khi bị bỏ qua.

+              

+                
+              

+              

+                
+                
const name = await prompt('Tên bạn là gì?', {
+  title: 'Giới thiệu bản thân',
+  defaultValue: 'Ada Lovelace',
+});

+              

+            

+
+            

+              
Nhập liệu có kiểm tra

+              

+                validate trả về true hoặc một chuỗi lỗi, và hộp thoại vẫn
+                mở cho tới khi hợp lệ.
+              

+              

+                
+              

+              

+                
+                
await prompt('Nhập một số chẵn:', {
+  title: 'Nhập liệu có kiểm tra',
+  validate: (value) => {
+    const n = Number(value);
+    if (Number.isNaN(n)) return 'Vui lòng nhập một số';
+    if (n % 2 !== 0) return 'Số phải là số chẵn';
+    return true;
+  },
+});

+              

+            

+
+            

+              
open()

+              
Tự dựng phần thân và quyết định mỗi nút trả về gì.

+              

+                
+              

+              

+                
+                
const instance = open({
+  title: 'Hộp thoại tự dựng',
+  content: (container) => {
+    const p = document.createElement('p');
+    p.textContent = 'Hộp thoại này được dựng bằng hàm tổng quát open().';
+    container.append(p);
+  },
+  buttons: [
+    { text: 'Đóng', role: 'primary', autoFocus: true, onClick: (i) => i.close('done') },
+  ],
+});
+const result = await instance.whenClosed();

+              

+            

+
+            

+              
Xếp chồng

+              

+                Mở hộp thoại thứ hai đè lên cái đầu. Tiêu điểm, Escape, và khoá cuộn đều theo cái
+                trên cùng của chồng.
+              

+              

+                
+              

+              

+                
+                
const first = confirm('Hộp thoại thứ nhất. Mở thêm một cái đè lên nhé?', { title: 'Hộp thoại 1' });
+const second = await confirm('Cái này xếp chồng lên hộp thoại thứ nhất.', { title: 'Hộp thoại 2' });
+const firstResult = await first;

+              

+            

+          

+        

+      

+
+      

+        

+          
Hiệu ứng

+          

+            Đặt riêng cho từng hộp thoại. Mọi hiệu ứng đều tôn trọng
+            prefers-reduced-motion.
+          

+
+          

+            

+              
Không hiệu ứng

+              
Mở và đóng tức thì.

+              

+                
+              

+              

+                
+                
await alert('Hộp thoại này mở và đóng tức thì.', { animation: 'none' });

+              

+            

+
+            

+              
Trượt lên

+              
Trượt lên từ dưới thay vì phóng to.

+              

+                
+              

+              

+                
+                
await confirm('Hộp thoại này trượt lên từ phía dưới.', { animation: 'slide' });

+              

+            

+          

+        

+      

+
+      

+        

+          
Ngoài hộp thoại

+          

+            Cùng một lõi, trình bày khác đi. Tất cả nằm sau
+            forgedialog/presentation.
+          

+
+          

+            

+              
Drawer

+              
Bảng bên hông, xử lý tiêu điểm giống hệt hộp thoại modal.

+              

+                
+                
+              

+              

+                
+                
drawer({
+  title: 'Cài đặt dự án',
+  message: 'Drawer bên phải, dùng dialog gốc và an toàn về tiêu điểm.',
+  side: 'right',
+  buttons: [{ text: 'Xong', role: 'primary', closesDialog: true }],
+});

+              

+            

+
+            

+              
Bottom sheet

+              
Dạng cho di động. Kéo xuống để đóng.

+              

+                
+              

+              

+                
+                
bottomSheet({
+  title: 'Thao tác nhanh',
+  message: 'Kéo xuống để đóng bottom sheet này.',
+  buttons: [{ text: 'Xong', role: 'primary', closesDialog: true }],
+});

+              

+            

+
+            

+              
Toast

+              
Thông báo lịch sự, tự biến mất. Bốn sắc thái.

+              

+                
+                
+                
+              

+              

+                
+                
toast('Đã lưu thay đổi thành công.', { tone: 'success' });

+              

+            

+
+            

+              
Lightbox

+              
Ảnh cỡ đầy đủ, kèm chú thích và cùng cách đóng như hộp thoại.

+              

+                
+              

+              

+                
+                
lightbox('/og-image.png', {
+  alt: 'Ảnh chia sẻ mạng xã hội của Forge Dialog',
+  caption: 'Kết xuất từ site/icon.svg lúc build.',
+});

+              

+            

+
+            

+              
Trạng thái tải

+              

+                Trạng thái chặn do bạn điều khiển. update() đổi thông điệp,
+                close() kết thúc nó.
+              

+              

+                
+              

+              

+                
+                
const task = loading('Đang tải lên…');
+task.update('Đang xử lý…');
+await task.close();

+              

+            

+
+            

+              
Bảng lệnh

+              
Danh sách lệnh lọc được, điều hướng bằng bàn phím. Gõ để thu hẹp.

+              

+                
+              

+              

+                
+                
commandPalette([
+  { id: 'theme-dark', label: 'Chuyển sang chủ đề tối', keywords: ['appearance'],
+    run: () => setTheme('dark') },
+  { id: 'theme-light', label: 'Chuyển sang chủ đề sáng', keywords: ['appearance'],
+    run: () => setTheme('light') },
+]);

+              

+            

+
+            

+              
Trung tâm thông báo

+              

+                Mọi toast đã hiện trong trang này, lưu lại thành lịch sử. Bật vài toast trước rồi
+                hãy mở nó.
+              

+              

+                
+                
+              

+              

+                
+                
notificationCenter();
+getNotificationHistory(); // [{ id, message, tone, createdAt }]
+clearNotificationHistory();

+              

+            

+          

+        

+      

+
+      

+        

+          
Biểu mẫu và wizard

+          

+            Nằm sau forgedialog/workflows. Trong TypeScript, tên các trường được suy ra
+            vào kiểu kết quả, nên giá trị trả về đã có kiểu mà không cần ép.
+          

+
+          

+            

+              
form()

+              

+                Biểu mẫu có kiểm tra, dựng từ danh sách trường. Trả về các giá trị, hoặc
+                null.
+              

+              

+                
+              

+              

+                
+                
const values = await form(
+  [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+    { name: 'plan', type: 'select', label: 'Gói', options: [
+      { value: 'free', label: 'Miễn phí' },
+      { value: 'pro', label: 'Chuyên nghiệp' },
+    ] },
+    { name: 'notes', type: 'textarea', label: 'Ghi chú', rows: 3 },
+  ],
+  { title: 'Tạo tài khoản' },
+);

+              

+            

+
+            

+              
wizard()

+              
Nhiều bước, kiểm tra theo từng bước và dùng chung dữ liệu.

+              

+                
+              

+              

+                
+                
const flow = wizard({
+  initialData: { name: '' },
+  steps: [
+    {
+      id: 'profile',
+      title: 'Hồ sơ của bạn',
+      render: (el, ctx) => {
+        const input = document.createElement('input');
+        input.className = 'fd-input';
+        input.placeholder = 'Tên';
+        input.addEventListener('input', () => ctx.set({ name: input.value }));
+        el.append(input);
+      },
+      validate: (ctx) => (ctx.data.name ? true : 'Vui lòng nhập tên của bạn.'),
+    },
+    { id: 'review', title: 'Xem lại',
+      render: (el, ctx) => { el.textContent = `Sẵn sàng chào đón ${ctx.data.name}.`; } },
+  ],
+});
+const data = await flow.result;

+              

+            

+
+            

+              
formWizard()

+              
Cùng danh sách trường như form(), trải ra nhiều bước.

+              

+                
+              

+              

+                
+                
const values = await formWizard([
+  { id: 'account', title: 'Tài khoản', fields: [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+  ] },
+  { id: 'profile', title: 'Hồ sơ', fields: [
+    { name: 'name', type: 'text', label: 'Họ và tên', required: true },
+  ] },
+]);

+              

+            

+          

+        

+      

+
+      

+        

+          
Chủ đề

+          

+            setTheme() điều khiển thư viện và trang này cùng lúc;
+            setThemePreset() đổi toàn bộ diện mạo.
+          

+
+          

+            

+              
Chế độ sáng tối

+              
Sáng, tối, hoặc theo hệ điều hành.

+              

+                
+                
+                
+              

+              

+                
+                
setTheme('dark'); // 'light' | 'dark' | 'system'

+              

+            

+
+            

+              
Bộ chủ đề dựng sẵn

+              
Chọn một bộ, rồi mở bất kỳ demo nào ở trên để thấy nó được áp dụng.

+              

+                
+                
+                
+                
+              

+              

+                
+                
setThemePreset('glass');

+              

+            

+
+            

+              
Giao diện và kéo thả

+              

+                Màu sắc, bo góc, hướng đổ bóng, hover, và giới hạn kéo của từng hộp thoại có bảng
+                điều khiển riêng ở trang chủ.
+              

+              

+                Mở bảng tuỳ biến
+              

+              

+                
+                
open({
+  title: 'Hộp thoại đã tạo kiểu',
+  appearance: { radius: 20, shadow: { angle: 180, distance: 20, blur: 60 } },
+  draggable: { bounds: 'viewport' },
+});

+              

+            

+          

+        

+      

+
+      

+        

+          
Mỗi demo trả về gì

+          

+            Mọi demo ở trên in kết quả xuống đây, kèm các hook vòng đời plugin mà nó kích hoạt —
+            afterOpen và afterClose từ một plugin đăng ký trên trang này.
+          

+          

+        

+      

+    

+
+    
+
+    
+    
+    
+    
+    
+  
+
diff --git a/site/vi/docs.html b/site/vi/docs.html
new file mode 100644
index 0000000..53697ce
--- /dev/null
+++ b/site/vi/docs.html
@@ -0,0 +1,1444 @@
+
+
+  
+    
+    
+    Tài liệu API — Forge Dialog
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        
+          
+          Forge Dialog
+          …
+        
+        Tính năng
+        Tuỳ biến
+        Demo
+        Tài liệu
+        GitHub
+        
+          EN
+          VI
+        
+        
+      

+    

+
+    

+      
+
+      

+        
Tài liệu API

+        

+          Forge Dialog là thư viện hộp thoại TypeScript không phụ thuộc, xây trên phần tử
+          <dialog> của trình duyệt. Mọi thứ trên trang này đều nằm trong gói đã
+          phát hành — không có plugin phải cài và không có peer dependency phải thoả mãn.
+        

+
+        

+          
Cài đặt

+          
Cài từ npm. Tên gói viết liền một từ; tên thư viện là Forge Dialog.

+          

+            
+            
npm install forgedialog

+          

+          
Import API và một tệp CSS:

+          

+            
+            
import { alert, confirm, prompt, open } from 'forgedialog';
+import 'forgedialog/style.css';

+          

+          

+            Hoặc nạp thẳng bản dựng cho trình duyệt. Nó tạo biến toàn cục ForgeDialog —
+            đây là định danh JavaScript nên viết liền một từ.
+          

+          

+            
+            
<link rel="stylesheet" href="https://unpkg.com/forgedialog/dist/index.css" />
+<script src="https://unpkg.com/forgedialog/dist/index.global.js"></script>
+<script>
+  ForgeDialog.alert('Hello!');
+</script>

+          

+          

+            Yêu cầu Chrome/Edge 88+, Firefox 78+, Safari 15.4+, hoặc Node.js 20+ cho công cụ đóng
+            gói và import phía máy chủ.
+          

+        

+
+        

+          
Điểm vào

+          

+            Mọi điểm vào đều tree-shake được và có hạn mức gzip riêng, kiểm tra tự động trong CI.
+            Hãy import cái hẹp nhất đủ dùng.
+          

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
ImportBao gồm
forgedialogTất cả, đã bật sẵn kéo thả, hiệu ứng, và bộ áp giao diện đầy đủ.
forgedialog/core
+                    open(), alert, confirm,
+                    prompt, chủ đề, nhãn, plugin, và bộ áp giao diện đầy đủ.
+                  
forgedialog/alertChỉ alert().
forgedialog/confirmChỉ confirm().
forgedialog/promptChỉ prompt().
forgedialog/presentation
+                    drawer, bottomSheet, lightbox,
+                    loading, toast, commandPalette,
+                    notificationCenter.
+                  
forgedialog/workflowsform, formWizard, wizard.
forgedialog/interactions
+                    Bộ điều khiển kéo thả. Có tác dụng phụ: chỉ cần import là kéo thả được bật.
+                  
forgedialog/animations
+                    Các hiệu ứng dựng sẵn. Có tác dụng phụ: chỉ cần import là hiệu ứng được bật.
+                  
forgedialog/appearance
+                    Bộ áp giao diện đầy đủ. Có tác dụng phụ: import nó là nâng cấp các điểm vào
+                    chuyên biệt.
+                  
forgedialog/reactuseForgeDialog() cho React.
forgedialog/vueuseForgeDialog() cho Vue.
forgedialog/svelteAction dialogTrigger.
forgedialog/web-componentdefineForgeDialog() và ForgeDialogElement.

+          

+          
Import theo năng lực

+          

+            Các điểm vào chuyên biệt (/alert, /confirm,
+            /prompt) đi kèm bộ áp giao diện nhẹ, chỉ gồm độ mờ nền, lớp phủ, viền, và
+            các bóng dựng sẵn. Thêm năng lực bằng cách import chúng để lấy tác dụng phụ:
+          

+          

+            
+            
import 'forgedialog/appearance';   // per-component colour, radius, hover
+import 'forgedialog/interactions'; // dragging
+import 'forgedialog/animations';   // animation presets
+import { alert } from 'forgedialog/alert';

+          

+          

+            forgedialog và forgedialog/core đã có sẵn bộ áp giao diện đầy
+            đủ, nên chỉ cần import thêm khi bạn dùng điểm vào chuyên biệt.
+          

+        

+
+        

+          
Tệp CSS

+          

+            forgedialog/style.css là tệp gộp tất cả. Muốn gửi ít CSS hơn thì chỉ ghép
+            các lớp mà trang thật sự dùng — core.css thì luôn bắt buộc.
+          

+          

+            
+            
import 'forgedialog/style/core.css';      // required
+import 'forgedialog/style/forms.css';     // form fields and file dropzones
+import 'forgedialog/style/workflows.css'; // wizard stepper
+import 'forgedialog/style/toast.css';
+import 'forgedialog/style/lightbox.css';
+import 'forgedialog/style/command.css';
+import 'forgedialog/style/draggable.css';

+          

+          

+            Mọi quy tắc đều nằm trong cascade layer forgedialog, nên CSS không đặt
+            trong layer của bạn sẽ thắng mà không cần !important.
+          

+        

+
+        

+          
alert, confirm, prompt

+          
Bản thay thế trả về promise cho các hàm dựng sẵn của trình duyệt.

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
Chữ ký hàmTrả về
alert(message, options?)Promise<void>
confirm(message, options?)
+                    Promise<boolean> — false khi đóng bằng Escape
+                    hoặc click nền
+                  
prompt(message, options?)Promise<string | null> — null khi bị huỷ

+          

+          

+            
+            
await alert('Saved successfully.', { title: 'Success' });
+
+const ok = await confirm('Delete this item?', { title: 'Please confirm' });
+
+const name = await prompt('What is your name?', {
+  defaultValue: 'Ada Lovelace',
+  inputType: 'text',
+  inputLabel: 'Full name',
+  placeholder: 'Type a name',
+  validate: (value) => (value.trim() ? true : 'Name is required'),
+});

+          

+          

+            alert và confirm tự động nhận role="alertdialog".
+            prompt nhận thêm các tuỳ chọn ở trên, bên cạnh mọi trường của
+            DialogOptions.
+          

+        

+
+        

+          
open()

+          

+            API tầng thấp. Nó trả về DialogInstance ngay lập tức chứ không
+            phải promise, nên hộp thoại có thể được cập nhật, di chuyển, hoặc đóng từ bất cứ đâu.
+          

+          

+            
+            
import { open } from 'forgedialog';
+
+const dialog = open({
+  title: 'Custom dialog',
+  content: (container) => container.append(renderForm()),
+  buttons: [
+    { text: 'Cancel', onClick: (i) => i.close(null) },
+    { text: 'Save', role: 'primary', autoFocus: true, onClick: (i) => i.close(read()) },
+  ],
+});
+
+const result = await dialog.whenClosed();          // the result, or undefined
+const { result: r, reason } = await dialog.whenSettled(); // result plus why it closed

+          

+          
Nội dung và HTML không tin cậy

+          

+            content nhận một chuỗi (hiển thị dưới dạng văn bản), một
+            phần tử, hoặc một hàm dựng. Còn HTML thì phải quyết định rõ ràng:
+          

+          

+            
+            
// Untrusted markup: pass a sanitizer.
+open({ html: userContent, sanitizeHtml: (h) => DOMPurify.sanitize(h) });
+
+// Markup you already trust.
+open({ unsafeHtml: '<p>Generated by us</p>' });

+          

+          
Lý do đóng

+          

+            Mỗi lần đóng đều kèm một lý do: 'button', 'escape',
+            'backdrop', 'api', 'abort', hoặc
+            'destroy'. Đọc nó bằng whenSettled().
+          

+        

+
+        

+          
DialogOptions

+          
Được nhận bởi open() và mọi hàm tiện ích dựng trên nó.

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
Tuỳ chọnKiểuMô tả
titlestring
+                    Chữ ở thanh tiêu đề. Nếu bỏ trống, hộp thoại vẫn có nhãn ẩn về mặt thị giác để
+                    công nghệ hỗ trợ gọi được tên nó.
+                  
messagestring | HTMLElementVăn bản hoặc phần tử cho phần thân.
contentstring | HTMLElement | (container) => voidNội dung phần thân. Chuỗi được hiển thị dưới dạng văn bản.
htmlstringHTML, chỉ được hiển thị khi có kèm sanitizeHtml.
unsafeHtmlstringHTML chèn nguyên trạng. Chỉ dùng cho nội dung bạn kiểm soát được.
sanitizeHtml(html: string) => stringHàm làm sạch áp cho html.
buttonsButtonConfig[]Các nút ở chân hộp thoại. Xem bên dưới.
type
+                    'alert' | 'confirm' | 'prompt' | 'form' | 'wizard' | 'custom'
+                  
+                    Loại ngữ nghĩa. alert và confirm mặc định dùng
+                    role="alertdialog".
+                  
role'dialog' | 'alertdialog'Ghi đè role suy ra từ type.
size'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'Bề rộng dựng sẵn.
presentation
+                    'modal' | 'drawer-left' | 'drawer-right' | 'bottom-sheet' | 'lightbox'
+                  Cách hộp thoại xuất hiện và vị trí nó nằm.
animation
+                    'fade' | 'scale' | 'slide' | 'spring' | 'bounce' | 'blur' | 'none'
+                  Cần năng lực animations. Tôn trọng prefers-reduced-motion.
appearanceDialogAppearance
+                    Tạo kiểu riêng cho từng hộp thoại. Xem Giao diện.
+                  
draggableboolean | DraggableOptionsXem Kéo thả.
closablebooleanHiện nút đóng ở thanh tiêu đề. Mặc định true.
closeOnEscapebooleanMặc định true.
closeOnOverlayClickbooleanMặc định true.
initialFocusstring | HTMLElement | (root) => HTMLElement | nullPhần tử nhận tiêu điểm khi mở. Mặc định là phần tử tab được đầu tiên.
restoreFocusboolean
+                    Trả tiêu điểm về phần tử đã mở hộp thoại khi đóng. Mặc định true.
+                  
portalTargetHTMLElementNơi hộp thoại được gắn vào. Mặc định là document.body.
classNamestringCác class thêm vào phần tử hộp thoại.
labelsPartial<DialogLabels>Ghi đè nhãn cho riêng hộp thoại này.
signalAbortSignalHuỷ bỏ sẽ đóng hộp thoại với lý do 'abort'.
dataunknownDữ liệu tuỳ ý, đọc được từ các hook.
onOpen(instance) => void | Promise<void>Sau khi hộp thoại mở.
onBeforeClose(instance, result) => boolean | void | Promise<…>Trả về false để giữ nó mở.
onClose(instance, result) => void | Promise<void>Sau khi hộp thoại đóng.
onError(error, instance) => voidTheo dõi lỗi trong vòng đời, những lỗi này được dọn dẹp tự động.

+          

+          
ButtonConfig

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
TrườngKiểuMô tả
textstringNhãn. Bắt buộc.
role'primary' | 'secondary' | 'danger'Mức nhấn thị giác.
onClick(instance) => void | Promise<void>Hàm xử lý khi bấm.
closesDialogbooleanĐóng hộp thoại sau khi chạy onClick.
resultTResultGiá trị hộp thoại trả về khi nút này đóng nó.
autoFocusbooleanNhận tiêu điểm khi mở.
disabledbooleanHiển thị nút ở trạng thái vô hiệu.
idstringId của phần tử, tiện cho việc kiểm thử.

+          

+        

+
+        

+          
DialogInstance

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
Thành phầnTrả vềMô tả
open()Promise<void>Mở một hộp thoại chưa được mở.
close(result?, reason?)Promise<void>Đóng kèm một kết quả.
cancel(reason?)Promise<void>Đóng mà không có kết quả.
destroy()Promise<void>Đóng rồi gỡ bỏ phần tử cùng các listener của nó.
update(partialOptions)voidĐổi kiểu hoặc vẽ lại hộp thoại tại chỗ, ngay khi nó đang mở.
whenClosed()Promise<TResult | undefined>Trả về kết quả.
whenSettled()Promise<{ result, reason }>Trả về kết quả kèm lý do đóng.
isOpen()booleanHộp thoại có đang mở hay không.
getState()DialogState
+                    'idle' | 'opening' | 'open' | 'closing' | 'closed' | 'destroyed'.
+                  
getPosition(){ x, y }Độ dịch chuyển kéo hiện tại.
setPosition({ x, y }){ x, y }Di chuyển hộp thoại, giới hạn trong vùng cho phép.
resetPosition()voidĐưa nó về giữa.
elementHTMLElementPhần tử hộp thoại.
idstringId duy nhất.

+          

+        

+
+        

+          
Giao diện

+          

+            Các tuỳ chỉnh giao diện chỉ áp cho một hộp thoại và đổi được lúc chạy bằng
+            update(). Giá trị độ mờ bị kẹp trong khoảng 0..1; số trần cho
+            độ dày, bo góc, và độ nhoè được hiểu là pixel.
+          

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
TrườngKiểuÁp dụng cho
opacitynumberToàn bộ nền hộp thoại.
surfaceColorstringNền hộp thoại.
overlayOpacitynumberLớp phủ phía sau nó.
backdropBlurnumber | stringBán kính làm mờ lớp phủ.
titleColorstringChữ ở thanh tiêu đề.
titleBackgroundstring
+                    Nền thanh tiêu đề. Mặc định trong suốt và bị cắt theo góc bo của hộp thoại.
+                  
titleOpacitynumberThanh tiêu đề.
contentColorstringChữ ở phần thân.
contentOpacitynumberPhần thân.
borderColorstringViền.
borderOpacitynumberViền.
borderWidthnumber | stringViền.
borderStyle'none' | 'solid' | 'dashed' | 'dotted' | 'double'Viền.
radiusnumber | string | DialogCornerRadiusCác góc. Xem Bo góc.
shadowShadowPreset | string | DialogShadowConfigXem Đổ bóng.
hoverDialogHoverAppearanceXem Hover.

+          

+          

+            
+            
open({
+  title: 'Styled',
+  appearance: {
+    opacity: 0.96,
+    surfaceColor: '#12141a',
+    overlayOpacity: 0.55,
+    backdropBlur: 12,
+    titleColor: '#ffd166',
+    titleBackground: '#1b1740',
+    contentColor: '#c8ccd4',
+    borderColor: '#7c5cff',
+    borderWidth: 2,
+    radius: 20,
+    shadow: { angle: 135, distance: 24, blur: 60, opacity: 0.45 },
+  },
+});

+          

+          

+            Bộ áp đầy đủ đi kèm forgedialog và forgedialog/core. Với điểm
+            vào chuyên biệt, hãy thêm import 'forgedialog/appearance' — không có nó thì
+            các trường nâng cao bị bỏ qua chứ không báo lỗi.
+          

+        

+
+        

+          
Đổ bóng

+          
shadow nhận ba dạng.

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
DạngVí dụ
Bóng dựng sẵn
+                    shadow: 'xl' — một trong none, sm,
+                    md, lg, xl
+                  
Bất kỳ giá trị box-shadow nào của CSSshadow: '0 10px 40px rgb(0 0 0 / 30%)'
Ghép từ các thành phầnshadow: { angle: 90, distance: 18, blur: 48, opacity: 0.3 }

+          

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
Thành phầnKiểuÝ nghĩa
anglenumber
+                    Hướng bóng đổ, tính bằng độ: 0 lên trên, 90 sang phải,
+                    180 xuống dưới (mặc định), 270 sang trái.
+                  
distancenumber | stringBóng bị hắt đi xa bao nhiêu.
blurnumber | stringĐộ mềm.
spreadnumber | stringĐộ nở ra trước khi làm mờ.
colorstringMàu bóng.
opacitynumberĐộ đậm, 0..1.
insetbooleanĐổ bóng vào phía trong.

+          

+        

+
+        

+          
Bo góc

+          

+            radius nhận một giá trị dùng chung cho mọi góc, bất kỳ chuỗi
+            border-radius nào của CSS, hoặc một object khai theo từng góc. Góc không có
+            trong object đó vẫn giữ bo góc của chủ đề chứ không tụt về 0.
+          

+          

+            
+            
appearance: { radius: 20 }
+appearance: { radius: '20px 20px 4px 4px' }
+appearance: { radius: { topLeft: 24, topRight: 24, bottomRight: 4, bottomLeft: 4 } }

+          

+          

+            Drawer giữ góc vuông và bottom sheet chỉ bo hai góc trên, trừ khi
+            radius nói khác.
+          

+        

+
+        

+          
Hover

+          

+            hover chỉ đổi kiểu hộp thoại khi con trỏ đang ở trên nó, và chỉ với hộp
+            thoại có yêu cầu — mọi hộp thoại khác đứng yên hoàn toàn. Nó dùng lại các trường màu, bo
+            góc, và đổ bóng, cộng thêm ba trường riêng.
+          

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
TrườngKiểuMô tả
liftnumber | stringHộp thoại nhấc lên bao nhiêu.
scalenumberHệ số phóng, ví dụ 1.02.
durationnumber | stringThời lượng chuyển động.

+          

+          

+            Biến đổi khi hover tôn trọng prefers-reduced-motion và bị tạm ngưng trong
+            lúc kéo hộp thoại, nên không thể đẩy nó ra ngoài vùng giới hạn.
+          

+        

+
+        

+          
Kéo thả

+          

+            draggable: true là đủ để kéo hộp thoại bằng thanh tiêu đề. Dạng object thêm
+            ràng buộc, hỗ trợ bàn phím, và ghi nhớ vị trí. Kéo thả cần năng lực interactions, thứ mà
+            forgedialog đã bật sẵn cho bạn.
+          

+          

+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+                
+                  
+                  
+                  
+                
+              
+            
Tuỳ chọnKiểuMô tả
handle'header' | string | HTMLElementThứ khởi động thao tác kéo. Mặc định là thanh tiêu đề.
axis'both' | 'x' | 'y'Khoá chuyển động theo một trục.
bounds'viewport' | HTMLElement | DOMRectVùng mà hộp thoại bị giới hạn trong đó.
initialPosition{ x, y }Vị trí lệch ban đầu.
keyboardbooleanDi chuyển bằng phím mũi tên khi tay cầm đang có tiêu điểm.
keyboardStepnumberSố pixel mỗi lần nhấn phím.
persistKeystringGhi nhớ vị trí qua các phiên dưới khoá này.
onDragStart / onDrag / onDragEnd(event) => voidMỗi hàm nhận { position, originalEvent }.

+          

+          

+            Bottom sheet giữ cử chỉ vuốt để đóng của riêng nó và bỏ qua kéo thả thông thường.
+          

+        

+
+        

+          
Drawer, sheet, lightbox, trạng thái tải

+          

+            
+            
import { drawer, bottomSheet, lightbox, loading } from 'forgedialog';
+
+drawer({ title: 'Settings', side: 'right', content: renderSettings });
+
+bottomSheet({ title: 'Share', content: renderShare });
+
+lightbox('/photo.jpg', { alt: 'A photo', caption: 'Taken in 2026' });
+
+const task = loading('Uploading…');
+task.update('Almost there…');
+await task.close();

+          

+          

+            Đây chỉ là open() kèm một giá trị presentation dựng sẵn, nên
+            mọi trường của DialogOptions vẫn dùng được.
+          

+        

+
+        

+          
Biểu mẫu

+          

+            form() dựng một hộp thoại có kiểm tra từ danh sách trường và trả về các giá
+            trị, hoặc null nếu bị huỷ. Tên trường được suy ra vào kiểu kết quả, nên
+            values.email đã có kiểu mà không cần ép.
+          

+          

+            
+            
import { form } from 'forgedialog';
+
+const values = await form(
+  [
+    { name: 'email', type: 'email', label: 'Email', required: true },
+    { name: 'plan', type: 'select', label: 'Plan', options: [
+      { value: 'free', label: 'Free' },
+      { value: 'pro', label: 'Pro' },
+    ] },
+    { name: 'notes', type: 'textarea', label: 'Notes', rows: 4 },
+  ],
+  { title: 'Sign up', submitText: 'Create account' },
+);

+          

+          

+            Các kiểu trường: text, password, email,
+            number, date, textarea, select,
+            checkbox, radio, file. Mỗi trường nhận
+            label, defaultValue, placeholder,
+            helpText, required, và một hàm validate; kiểu số
+            có thêm min, max, step, còn kiểu tệp có thêm
+            accept, multiple, maxFiles, và
+            maxSizeBytes.
+          

+          

+            formWizard(steps, options?) trải đúng các trường đó ra nhiều bước, kèm
+            nextText, backText, finishText, và callback
+            onStepChange.
+          

+        

+
+        

+          
Wizard

+          

+            wizard() là dạng tổng quát: mỗi bước tự vẽ nội dung tuỳ ý, có thể kiểm tra
+            dữ liệu, và có thể chọn bước kế tiếp dựa trên dữ liệu đã thu thập.
+          

+          

+            
+            
import { wizard } from 'forgedialog';
+
+const flow = wizard({
+  initialData: { email: '', plan: 'free' },
+  persistKey: 'signup',      // resumes where the user left off
+  confirmUnsaved: true,      // asks before discarding progress
+  steps: [
+    { id: 'account', title: 'Account', render: renderAccount, validate: validateAccount },
+    { id: 'plan', title: 'Plan', render: renderPlan,
+      next: (data) => (data.plan === 'pro' ? 'billing' : 'review') },
+    { id: 'billing', title: 'Billing', render: renderBilling },
+    { id: 'review', title: 'Review', render: renderReview },
+  ],
+});
+
+const data = await flow.result; // the data, or null if cancelled

+          

+          

+            Bộ điều khiển còn cung cấp next(), back(),
+            goTo(stepId), getData(), và instance bên dưới.
+          

+        

+
+        

+          
Toast và thông báo

+          

+            
+            
import { toast, notificationCenter, getNotificationHistory } from 'forgedialog';
+
+toast('Saved', { tone: 'success' });
+
+// A duration of 0 or Infinity keeps it up until dismiss() is called.
+const upload = toast('Uploading…', { duration: 0 });
+upload.dismiss();
+
+toast('Message sent', { action: { text: 'Undo', onClick: undoSend } });
+
+notificationCenter();          // a dialog listing past toasts
+getNotificationHistory();      // the same list as data

+          

+          

+            Các sắc thái gồm info, success, warning, và
+            danger. clearNotificationHistory() xoá sạch nhật ký.
+          

+        

+
+        

+          
Bảng lệnh

+          

+            
+            
import { commandPalette } from 'forgedialog';
+
+commandPalette([
+  { id: 'new', label: 'New document', shortcut: '⌘N', run: createDocument },
+  { id: 'search', label: 'Search', keywords: ['find', 'filter'], run: openSearch },
+]);

+          

+          

+            Gõ để lọc theo nhãn và theo keywords; bảng lệnh trả về id của lệnh đã chạy.
+          

+        

+
+        

+          
Chủ đề

+          

+            
+            
import { setTheme, getTheme, setThemePreset } from 'forgedialog';
+
+setTheme('dark');    // 'light' | 'dark' | 'system'
+getTheme();
+
+setThemePreset('glass'); // 'default' | 'minimal' | 'glass' | 'material'

+          

+          

+            setTheme() ghi data-fd-theme lên <html>.
+            CSS của bạn có thể đọc chính thuộc tính đó để trang và hộp thoại đổi chủ đề cùng lúc —
+            đây đúng là cách site này làm.
+          

+        

+
+        

+          
Biến CSS

+          

+            Mọi thứ thuộc về hình thức đều là một biến trên :root, nên viết được cả một
+            chủ đề mà không đụng tới JavaScript.
+          

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
BiếnMặc định
--fd-color-surface#ffffff
--fd-color-text#1a1d23
--fd-color-text-muted#5b6270
--fd-color-border#e2e4e9
--fd-color-overlayrgba(15, 17, 21, 0.5)
--fd-color-primary / --fd-color-primary-text#315fce / #ffffff

+                    --fd-color-secondary / --fd-color-secondary-text
+                  #eceef2 / #1a1d23
--fd-color-danger / --fd-color-danger-text#e5484d / #ffffff
--fd-radius10px
--fd-shadow0 20px 60px rgba(15, 17, 21, 0.25)
--fd-spacing-sm / md / lg8px / 16px / 24px
--fd-font-familybộ phông hệ thống
--fd-duration-fast / --fd-duration-normal120ms / 200ms
--fd-easingcubic-bezier(0.16, 1, 0.3, 1)
--fd-z-index-base1000

+          

+          

+            Các biến riêng từng hộp thoại mà appearance API ghi ra (--fd-dialog-radius,
+            --fd-dialog-shadow, --fd-dialog-title-background, và những cái
+            còn lại) cũng đặt tay được, nếu bạn thích tạo kiểu bằng CSS hơn bằng JavaScript.
+          

+        

+
+        

+          
Nhãn và đa ngôn ngữ

+          

+            
+            
import { setLabels, getLabels } from 'forgedialog';
+
+setLabels({
+  ok: 'Đồng ý',
+  cancel: 'Huỷ',
+  close: 'Đóng',
+  submit: 'Gửi',
+  fieldRequired: 'Bắt buộc',
+  promptPlaceholder: 'Nhập nội dung',
+  notifications: 'Thông báo',
+});

+          

+          

+            Nhãn đặt theo cách này áp dụng ở mọi nơi; từng hộp thoại vẫn ghi đè được bằng tuỳ chọn
+            labels của riêng nó.
+          

+        

+
+        

+          
Plugin và hook

+          

+            Năm hook vòng đời chạy cho mọi hộp thoại: beforeOpen,
+            afterOpen, beforeClose, afterClose, và
+            beforeDestroy.
+          

+          

+            
+            
import { on, off, registerPlugin } from 'forgedialog';
+
+// A single hook.
+on('afterOpen', ({ instance, options }) => track('dialog', options.title));
+
+// Or a plugin bundling several.
+registerPlugin({
+  name: 'analytics',
+  install: (api) => api.on('afterClose', ({ reason }) => track('close', reason)),
+  hooks: {
+    beforeClose: ({ preventClose, result }) => {
+      if (result === undefined) preventClose?.();
+    },
+  },
+});

+          

+          

+            Mỗi hook nhận { instance, options, result, reason, preventClose }. Gọi
+            preventClose() trong beforeClose sẽ giữ hộp thoại mở.
+          

+        

+
+        

+          
Adapter cho framework

+          

+            Mỗi adapter là một lớp bọc mỏng quanh open(), gắn vòng đời hộp thoại vào
+            vòng đời component, nên không còn gì sót lại sau khi component bị gỡ.
+          

+          

+            
+            
// React and Vue share the same hook shape.
+import { useForgeDialog } from 'forgedialog/react';
+const { open } = useForgeDialog();
+await open({ title: 'Hi' }).whenClosed();
+
+// Svelte: an action on the triggering element.
+import { dialogTrigger } from 'forgedialog/svelte';
+// <button use:dialogTrigger={{ title: 'Hi' }}>Open</button>
+
+// Web component.
+import { defineForgeDialog } from 'forgedialog/web-component';
+defineForgeDialog(); // <forge-dialog open title="Hi" message="…" size="md">

+          

+        

+
+        

+          
TypeScript, SSR, và CSP

+          
    
+            
  • 
+              Có kiểu cho cả ESM lẫn CJS. open<T>() luồn kiểu kết quả của nó qua
+              buttons, whenClosed(), và các hook.
+            
    • 
+            
  • 
+              Import gói này trên máy chủ không đụng tới DOM, nên an toàn với bản dựng SSR; hộp
+              thoại chỉ được tạo khi bạn gọi API trong trình duyệt.
+            
    • 
+            
  • 
+              Bản build không chứa eval và new Function, điều này được
+              kiểm tra trong CI, nên nó chạy được dưới Content Security Policy nghiêm ngặt. Chính
+              site này cũng đang chạy dưới một CSP như vậy.
+            
    • 
+            
  • Mọi điểm vào đều có hạn mức gzip bắt buộc, kiểm tra ở từng pull request.
    • 
+          

+        

+
+        

+          Thiếu gì hoặc sai gì ở đây?
+          Mở một issue — tài liệu này
+          được viết dựa trên báo cáo API công khai đã qua rà soát trong kho mã.
+        

+      

+    

+
+    
+
+    
+    
+    
+    
+    
+  
+
diff --git a/site/vi/index.html b/site/vi/index.html
new file mode 100644
index 0000000..f47e981
--- /dev/null
+++ b/site/vi/index.html
@@ -0,0 +1,604 @@
+
+
+  
+    
+    
+    Forge Dialog — hộp thoại cho web, dễ tiếp cận và không phụ thuộc
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        
+          
+          Forge Dialog
+          …
+        
+        Tính năng
+        Tuỳ biến
+        Ví dụ
+        Hỏi đáp
+        Demo
+        Tài liệu
+        GitHub
+        
+          EN
+          VI
+        
+        
+      

+    

+
+    

+      

+        

+          Mã nguồn mở · Giấy phép MIT · Không phụ thuộc lúc chạy
+        

+        
Hộp thoại biết cư xử.

+        

+          Forge Dialog là thư viện hộp thoại TypeScript không phụ thuộc, xây trên
+          phần tử <dialog> của trình duyệt. Dễ tiếp cận từ đầu, tuỳ biến được tới
+          từng thành phần, và nhẹ tới mức bản chỉ có alert vẫn dưới 6 KB sau gzip.
+        

+
+        

+          
+          
+          
+          
+          Đọc tài liệu
+        

+
+        

+          npm install forgedialog
+          
+        

+      

+
+      

+        

+          
Bạn nhận được gì

+          

+            Mọi thứ dưới đây đều nằm trong gói đã phát hành — không plugin phải cài, không peer
+            dependency phải thoả mãn.
+          

+
+          

+            

+              
Dễ tiếp cận từ đầu

+              

+                Tiêu điểm được giữ trong hộp thoại rồi trả về chỗ cũ, Escape và click nền đã nối
+                sẵn, vai trò ARIA được đặt giúp bạn. Bộ dò tiêu điểm bỏ qua những phần tử chỉ trông
+                như nhận được tiêu điểm.
+              

+            

+            

+              
Tạo kiểu theo từng thành phần

+              

+                Màu và độ mờ riêng cho nền, tiêu đề, nội dung, và viền. Bo góc theo từng góc. Đổ
+                bóng ghép từ góc chiếu, khoảng cách, độ nhoè, và độ đậm.
+              

+            

+            

+              
Hover, kéo thả, và cử chỉ

+              

+                Đổi kiểu khi hover (tự chọn bật) kèm nhấc lên và phóng to. Hộp thoại kéo được, có
+                khoá trục, giới hạn vùng, di chuyển bằng bàn phím, và nhớ vị trí. Bottom sheet vuốt
+                để đóng.
+              

+            

+            

+              
Nhiều hơn alert

+              

+                Drawer, bottom sheet, lightbox, trạng thái tải, toast, bảng lệnh, và wizard phân
+                nhánh có lưu trạng thái — tất cả từ cùng một lõi.
+              

+            

+            

+              
Kích thước trung thực

+              

+                Các điểm vào tree-shake được, có hạn mức gzip bắt buộc. Import
+                forgedialog/alert thì bạn trả cho một alert, không phải cả thư viện.
+              

+            

+            

+              
Hợp với stack của bạn

+              

+                ESM, CJS, và biến toàn cục cho trình duyệt, kèm adapter cho React, Vue, Svelte, và
+                Web Components. Có kiểu đầy đủ, an toàn với SSR, và chạy sạch dưới CSP nghiêm ngặt.
+              

+            

+          

+        

+      

+
+      

+        

+          
Bảng tuỳ biến

+          

+            Đổi bất cứ thứ gì bên dưới và hộp thoại đổi kiểu ngay. Đoạn mã cập nhật theo — chép nó
+            là bạn có đúng hộp thoại đó trong ứng dụng của mình.
+          

+
+          

+            

+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+              
+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+              
+              
+              
+            

+
+            

+              
+              

+            

+          

+        

+      

+
+      

+        

+          
Ví dụ

+          

+            The everyday calls. Each returns a promise, so there is no callback nesting.
+          

+
+          

+            

+              
Thay thế hàm dựng sẵn của trình duyệt

+              

+                
+                
import { alert, confirm, prompt } from 'forgedialog';
+import 'forgedialog/style.css';
+
+await alert('Saved successfully.', { title: 'Success' });
+
+const ok = await confirm('Delete this item?');
+
+const name = await prompt('What is your name?', {
+  validate: (value) => value.trim() ? true : 'Name is required',
+});

+              

+            

+
+            

+              
Tự dựng hộp thoại

+              

+                
+                
import { open } from 'forgedialog';
+
+const dialog = open({
+  title: 'Custom dialog',
+  content: (container) => container.append(renderForm()),
+  buttons: [
+    { text: 'Cancel', onClick: (i) => i.close(null) },
+    { text: 'Save', role: 'primary', onClick: (i) => i.close(read()) },
+  ],
+});
+
+const result = await dialog.whenClosed();

+              

+            

+
+            

+              
Chỉ trả cho phần bạn dùng

+              

+                
+                
// Just an alert, and nothing else.
+import { alert } from 'forgedialog/alert';
+import 'forgedialog/style/core.css';
+
+// Opt into the richer appearance options on a focused entry.
+import 'forgedialog/appearance';

+              

+            

+
+            

+              
Ngoài hộp thoại

+              

+                
+                
import { drawer, toast, wizard } from 'forgedialog';
+
+// A duration of 0 keeps the toast until dismiss() is called.
+const upload = toast('Uploading…', { duration: 0 });
+
+drawer({ title: 'Settings', side: 'right', content: renderSettings });
+
+const data = await wizard({ steps }).result;

+              

+            

+          

+        

+      

+
+      

+        

+          
Tóm tắt nhanh

+          

+            Bản ngắn gọn, thuần dữ kiện — các con số lấy từ hạn mức kích thước được kiểm tra ở mỗi
+            pull request.
+          

+          

+            
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
TênForge Dialog
Gói npmforgedialog
Giấy phépMIT
Phụ thuộc lúc chạyKhông có
Kích thước≈15 KB sau gzip cho bản đầy đủ; ≈5.5 KB cho bản chỉ có alert
Viết bằngTypeScript, có kiểu cho cả ESM lẫn CommonJS
Trình duyệtChrome/Edge 88+, Firefox 78+, Safari 15.4+
Node.js20 trở lên, cho công cụ đóng gói và import phía máy chủ
FrameworkChạy độc lập; có adapter cho React, Vue, Svelte, và Web Components
Mã nguồn
+                    github.com/cmm-cmm/ForgeDialog
+                  

+          

+        

+      

+
+      

+        

+          
Câu hỏi thường gặp

+
+          

+            
Forge Dialog là gì?

+            

+              Forge Dialog là thư viện TypeScript mã nguồn mở để dựng hộp thoại trên web: alert,
+              confirm, prompt, drawer, bottom sheet, lightbox, trạng thái tải, toast, bảng lệnh, và
+              wizard nhiều bước. Nó không có phụ thuộc lúc chạy và được phát hành trên npm với tên
+              forgedialog.
+            

+
+            
Forge Dialog nặng bao nhiêu?

+            

+              Bản đầy đủ khoảng 15 KB sau gzip. Ứng dụng chỉ import forgedialog/alert thì chỉ tốn
+              khoảng 5,5 KB sau gzip, vì mọi điểm vào đều tree-shake được và đều có hạn mức kích
+              thước được kiểm tra tự động ở mỗi pull request.
+            

+
+            
Forge Dialog có cần framework không?

+            

+              Không. Nó chạy độc lập bằng JavaScript thuần, và có sẵn adapter cho React, Vue,
+              Svelte, và Web Components nếu bạn muốn dùng.
+            

+
+            
Forge Dialog có dễ tiếp cận không?

+            

+              Có. Nó dùng phần tử <dialog> của trình duyệt, giữ tiêu điểm bên
+              trong hộp thoại rồi trả về phần tử đã mở nó, xử lý Escape và click nền, và tự đặt
+              role="dialog" hoặc role="alertdialog" tuỳ loại.
+            

+
+            
Nó khác gì window.alert, confirm, và prompt?

+            

+              Các hàm dựng sẵn của trình duyệt chặn luồng chính, không tạo kiểu được, và chỉ có ba
+              hình dạng cố định. Forge Dialog trả về promise thay vì chặn, tạo kiểu được tới từng
+              thành phần, và còn có drawer, bottom sheet, biểu mẫu, và wizard.
+            

+
+            
Có tuỳ biến được giao diện không?

+            

+              Có. Màu và độ mờ đặt riêng cho nền, tiêu đề, nội dung, và viền; bo góc theo từng góc;
+              đổ bóng ghép từ góc chiếu, khoảng cách, độ nhoè, và độ đậm; cùng hiệu ứng hover tự
+              chọn có nhấc lên và phóng to.
+            

+
+            
Hỗ trợ những trình duyệt và môi trường nào?

+            

+              Chrome và Edge 88+, Firefox 78+, Safari 15.4+, cùng Node.js 20 trở lên cho công cụ
+              đóng gói và import phía máy chủ. Bản build không chứa eval hay new Function, nên chạy
+              được dưới Content Security Policy nghiêm ngặt.
+            

+
+            
Forge Dialog có dùng thương mại miễn phí không?

+            

+              Có. Forge Dialog phát hành theo giấy phép MIT, cho phép dùng thương mại, sửa đổi, và
+              phân phối lại.
+            

+
+            
Forge Dialog so với SweetAlert2 và Bootstrap modal thì thế nào?

+            

+              Forge Dialog xây trên phần tử <dialog> của trình duyệt, nên việc
+              giữ tiêu điểm, lớp trên cùng, và vô hiệu hoá nền là do nền tảng lo chứ không phải
+              JavaScript. Nó không có phụ thuộc lúc chạy, trong khi Bootstrap modal cần CSS và
+              JavaScript của Bootstrap. Mọi điểm vào đều tree-shake được, nên ứng dụng chỉ cần alert
+              chỉ tốn khoảng 5,5 KB sau gzip thay vì cả thư viện. Nó viết bằng TypeScript và có kiểu
+              cho cả ESM lẫn CommonJS.
+            

+          

+        

+      

+    

+
+    
+
+    
+    
+    
+    
+    
+  
+