diff --git a/elements/slide-deck/.dddignore b/elements/slide-deck/.dddignore
new file mode 100644
index 0000000000..0433d9a7c6
--- /dev/null
+++ b/elements/slide-deck/.dddignore
@@ -0,0 +1,36 @@
+# Directories
+# (Must start with with / or \, as seen below)
+/.github # Inline comments are supported
+/.vscode
+/.idea
+/locales
+\test
+/dist
+/build
+/public # ignored by program regardless of presence in .dddignore
+/node_modules # ignored by program regardless of presence in .dddignore
+
+# Files
+# (Must include filename and extension, as seen below)
+LICENSE
+.dddignore
+.editorconfig
+.gitignore
+.nojekyll
+.npmignore
+.surgeignore
+rollup.config.js
+
+# File extension
+# (Must start with *, as seen below)
+*.md
+*.yml
+*.json
+*.toml
+*.mjs
+*.cjs
+*.png
+*.ico
+*.svg
+*.jpg
+*.jpeg
diff --git a/elements/slide-deck/.editorconfig b/elements/slide-deck/.editorconfig
new file mode 100644
index 0000000000..c8c2d2aaf6
--- /dev/null
+++ b/elements/slide-deck/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/elements/slide-deck/.github/workflows/main.yml b/elements/slide-deck/.github/workflows/main.yml
new file mode 100644
index 0000000000..f4900474ae
--- /dev/null
+++ b/elements/slide-deck/.github/workflows/main.yml
@@ -0,0 +1,33 @@
+name: Build and Deploy
+on: [push]
+jobs:
+ build-and-deploy:
+ permissions:
+ contents: write
+ runs-on: ubuntu-latest
+ steps:
+ - name: ACTIONS_ALLOW_UNSECURE_COMMANDS
+ id: ACTIONS_ALLOW_UNSECURE_COMMANDS
+ run: echo 'ACTIONS_ALLOW_UNSECURE_COMMANDS=true' >> $GITHUB_ENV
+
+ - name: set env variable actor
+ run: echo 'GITHUB_ACTOR=$GITHUB_ACTOR' >> $GITHUB_ENV
+
+ - name: set env variable repo
+ run: echo 'GITHUB_REPOSITORY=$GITHUB_REPOSITORY' >> $GITHUB_ENV
+
+ - name: Checkout 🛎️
+ uses: actions/checkout@v4.1.7 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
+ with:
+ persist-credentials: false
+
+ - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+ run: |
+ npm install
+ npm run build
+ - name: Deploy to GitHub Pages
+ uses: JamesIves/github-pages-deploy-action@v4.6.3
+ with:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ BRANCH: gh-pages # The branch the action should deploy to.
+ FOLDER: public # The folder the action should deploy.
diff --git a/elements/slide-deck/.gitignore b/elements/slide-deck/.gitignore
new file mode 100644
index 0000000000..f763927fa5
--- /dev/null
+++ b/elements/slide-deck/.gitignore
@@ -0,0 +1,26 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+/public/
+
+storybook-static
+custom-elements.json
+.vercel
diff --git a/elements/slide-deck/.nojekyll b/elements/slide-deck/.nojekyll
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/slide-deck/.npmignore b/elements/slide-deck/.npmignore
new file mode 100644
index 0000000000..3c3629e647
--- /dev/null
+++ b/elements/slide-deck/.npmignore
@@ -0,0 +1 @@
+node_modules
diff --git a/elements/slide-deck/.surgeignore b/elements/slide-deck/.surgeignore
new file mode 100644
index 0000000000..ddf342489b
--- /dev/null
+++ b/elements/slide-deck/.surgeignore
@@ -0,0 +1 @@
+!node_modules/
diff --git a/elements/slide-deck/.travis.yml b/elements/slide-deck/.travis.yml
new file mode 100644
index 0000000000..13da95ea06
--- /dev/null
+++ b/elements/slide-deck/.travis.yml
@@ -0,0 +1,15 @@
+language: node_js
+dist: trusty
+sudo: required
+addons:
+ firefox: "latest"
+ apt:
+ sources:
+ - google-chrome
+ packages:
+ - google-chrome-stable
+node_js: stable
+install:
+ - npm install
+script:
+ - xvfb-run npm run test
diff --git a/elements/slide-deck/LICENSE b/elements/slide-deck/LICENSE
new file mode 100644
index 0000000000..983944aa1c
--- /dev/null
+++ b/elements/slide-deck/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright (c) 2026 haxtheweb
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/elements/slide-deck/README.md b/elements/slide-deck/README.md
new file mode 100644
index 0000000000..4aac6a4bc5
--- /dev/null
+++ b/elements/slide-deck/README.md
@@ -0,0 +1,53 @@
+# slide-deck
+
+Presents a PowerPoint deck imported by HAXcms, slide by slide, in the page.
+
+```html
+
+```
+
+The PPTX import route writes `deck.json` alongside the original file and its
+extracted media. That manifest is the element's only required input:
+
+```json
+{
+ "title": "My talk",
+ "pptx": "files/decks/my-talk/original.pptx",
+ "slides": [{ "number": 1, "title": "…", "html": "…", "notes": "…" }]
+}
+```
+
+## How it renders
+
+Content is layered, so a deck degrades rather than breaks:
+
+- The manifest's per slide text and speaker notes always render. This is what
+ assistive technology and site search read, and it is all that is needed for
+ the deck to be navigable.
+- When the manifest names a `pptx`, the original file is painted over that text
+ by [`@aiden0z/pptx-renderer`](https://www.npmjs.com/package/@aiden0z/pptx-renderer).
+ The renderer is only fetched once the deck scrolls into view, so a deck lower
+ down a page costs nothing until it is looked at. If it cannot run, the text
+ layer simply stays visible.
+
+## Properties
+
+| property | attribute | description |
+| -------- | --------- | -------------------------------------------------------------- |
+| `source` | `source` | URL of `deck.json`, relative to the site or absolute |
+| `deckId` | `deck-id` | Distinguishes slide links when a page holds more than one deck |
+| `slide` | `slide` | Currently displayed slide, 1 based |
+| `mode` | `mode` | `slide` for one at a time, `grid` for every slide plus notes |
+
+Slides are reachable by URL as `#-slide-`, and arrow keys, `Home`
+and `End` move through a focused deck.
+
+## Commands
+
+- `npm start` - development server
+- `npm run build` - build and analyze
+- `npm run test` - run tests
+
+# Credits
+
+A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initiative.
diff --git a/elements/slide-deck/demo/deck.json b/elements/slide-deck/demo/deck.json
new file mode 100644
index 0000000000..a672bd2d44
--- /dev/null
+++ b/elements/slide-deck/demo/deck.json
@@ -0,0 +1,30 @@
+{
+ "title": "Demo deck",
+ "source": "demo-deck.pptx",
+ "pptx": null,
+ "thumbnail": null,
+ "renderTier": "client",
+ "slides": [
+ {
+ "number": 1,
+ "title": "Presenting a deck in HAX",
+ "html": "
Presenting a deck in HAX
Imported from PowerPoint, shown in context.
",
+ "image": null,
+ "notes": "Open on why a deck belongs on the page rather than as a download."
+ },
+ {
+ "number": 2,
+ "title": "Text is the substance",
+ "html": "
Text is the substance
Slide text and speaker notes come from the manifest, so the deck is readable, searchable and navigable on its own.
",
+ "image": null,
+ "notes": "This is what screen readers and site search actually read."
+ },
+ {
+ "number": 3,
+ "title": "Slides are the enhancement",
+ "html": "
Slides are the enhancement
When a manifest names a .pptx the real slides are painted over this text, once the deck is scrolled into view.
",
+ "image": null,
+ "notes": "This demo manifest has no pptx, so the text layer stays visible."
+ }
+ ]
+}
diff --git a/elements/slide-deck/demo/index.html b/elements/slide-deck/demo/index.html
new file mode 100644
index 0000000000..cebc9090aa
--- /dev/null
+++ b/elements/slide-deck/demo/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ SlideDeck: slide-deck Demo
+
+
+
+
+
+
Basic slide-deck demo
+
+ This manifest carries no pptx, so the text layer stays on
+ screen. Point source at a deck.json written by the PPTX
+ import to see the real slides painted over it.
+
+
+
+
+
diff --git a/elements/slide-deck/gulpfile.cjs b/elements/slide-deck/gulpfile.cjs
new file mode 100644
index 0000000000..b811a2089d
--- /dev/null
+++ b/elements/slide-deck/gulpfile.cjs
@@ -0,0 +1,14 @@
+const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
+const packageJson = require("./package.json");
+gulp.task("watch", () => {
+ return gulp.watch(["./*.js","./lib/*", "./demo/*"]);
+});
+
+gulp.task("dev", gulp.series("watch"));
+
+gulp.task(
+ "default",
+ gulp.series("dev")
+);
\ No newline at end of file
diff --git a/elements/slide-deck/index.html b/elements/slide-deck/index.html
new file mode 100644
index 0000000000..e0086628ac
--- /dev/null
+++ b/elements/slide-deck/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ slide-deck documentation
+
+
+
+
+
diff --git a/elements/slide-deck/lib/slide-deck-renderer.js b/elements/slide-deck/lib/slide-deck-renderer.js
new file mode 100644
index 0000000000..c922a41cfc
--- /dev/null
+++ b/elements/slide-deck/lib/slide-deck-renderer.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2026 haxtheweb
+ * @license Apache-2.0, see LICENSE for full text.
+ */
+
+/**
+ * Thin wrapper around the browser build of @aiden0z/pptx-renderer.
+ *
+ * Kept in its own module so `slide-deck` can dynamically import it only once a
+ * deck is actually on screen; the renderer bundle is ~1.5MB and must never load
+ * for a page that merely contains a deck further down.
+ *
+ * Only the low level API is used (parse -> build -> render a single slide) so
+ * all navigation and chrome stays in slide-deck.
+ */
+export class DeckRenderer {
+ /**
+ * Parse a .pptx and prepare it for per slide rendering.
+ * @param {string} pptxUrl absolute URL of the source presentation
+ * @returns {Promise}
+ */
+ static async load(pptxUrl) {
+ const {
+ parseZip,
+ buildPresentation,
+ materializeSlideNodes,
+ renderSlide,
+ RECOMMENDED_ZIP_LIMITS,
+ } = await import("@aiden0z/pptx-renderer/browser");
+ const response = await fetch(pptxUrl);
+ if (!response.ok) {
+ throw new Error(`unable to fetch ${pptxUrl} (${response.status})`);
+ }
+ const files = await parseZip(
+ await response.arrayBuffer(),
+ RECOMMENDED_ZIP_LIMITS,
+ );
+ return new DeckRenderer(buildPresentation(files), {
+ materializeSlideNodes,
+ renderSlide,
+ });
+ }
+
+ constructor(presentation, api) {
+ this.presentation = presentation;
+ this.api = api;
+ // blob URLs for embedded media are reused across slides
+ this.mediaUrlCache = new Map();
+ this.chartInstances = new Set();
+ this.handle = null;
+ this.target = null;
+ // the stage follows the host's width, including in full screen
+ this.resizeObserver = new ResizeObserver(() => this.fit());
+ }
+
+ get slideCount() {
+ return this.presentation.slides.length;
+ }
+
+ /** Height / width of the deck, used to size the stage before anything paints. */
+ get aspectRatio() {
+ const { width, height } = this.presentation;
+ return width > 0 ? height / width : 0.5625;
+ }
+
+ /**
+ * Paint a slide into `target`, scaled to fill it.
+ * @param {HTMLElement} target
+ * @param {number} index zero based slide index
+ */
+ async render(target, index) {
+ const slide = this.presentation.slides[index];
+ if (!slide) {
+ return;
+ }
+ // only one slide is ever on stage, so release the previous one first
+ this.clear();
+ this.api.materializeSlideNodes(this.presentation, slide);
+ // pdfjs is intentionally not configured: it is only used for EMF embedded
+ // PDF fallbacks and wiring it would mean fetching a library at runtime.
+ this.handle = this.api.renderSlide(this.presentation, slide, {
+ mediaUrlCache: this.mediaUrlCache,
+ chartInstances: this.chartInstances,
+ });
+ this.target = target;
+ target.replaceChildren(this.handle.element);
+ this.handle.element.style.transformOrigin = "top left";
+ this.fit();
+ this.resizeObserver.observe(target);
+ await this.handle.ready;
+ }
+
+ /** Scale the painted slide to the current width of its stage. */
+ fit() {
+ if (this.handle && this.target) {
+ this.handle.element.style.transform = `scale(${this.target.clientWidth / this.presentation.width})`;
+ }
+ }
+
+ /** Release the painted slide and stop following its stage. */
+ clear() {
+ this.resizeObserver.disconnect();
+ if (this.handle) {
+ this.handle.dispose();
+ this.handle = null;
+ }
+ this.target = null;
+ }
+
+ /** Release everything, including media shared across slides. */
+ dispose() {
+ this.clear();
+ this.mediaUrlCache.forEach((url) => URL.revokeObjectURL(url));
+ this.mediaUrlCache.clear();
+ }
+}
diff --git a/elements/slide-deck/lib/slide-deck.haxProperties.json b/elements/slide-deck/lib/slide-deck.haxProperties.json
new file mode 100644
index 0000000000..66d130d86a
--- /dev/null
+++ b/elements/slide-deck/lib/slide-deck.haxProperties.json
@@ -0,0 +1,63 @@
+{
+ "api": "1",
+ "canScale": true,
+ "canEditSource": true,
+ "type": "element",
+ "designSystem": {
+ "accent": true,
+ "primary": true,
+ "card": true,
+ "text": true,
+ "designTreatment": false
+ },
+ "gizmo": {
+ "title": "Slide deck",
+ "description": "Present an imported PowerPoint deck slide by slide, with speaker notes.",
+ "icon": "icons:slideshow",
+ "color": "purple",
+ "tags": ["Media", "presentation", "slides", "powerpoint", "pptx"],
+ "handles": [
+ {
+ "type": "presentation",
+ "source": "source"
+ }
+ ],
+ "meta": {
+ "author": "haxtheweb"
+ }
+ },
+ "settings": {
+ "configure": [
+ {
+ "property": "source",
+ "title": "Deck manifest",
+ "description": "deck.json written by the PPTX import, for example files/decks/my-talk/deck.json",
+ "inputMethod": "haxupload",
+ "icon": "icons:slideshow",
+ "required": true
+ },
+ {
+ "property": "deckId",
+ "title": "Deck id",
+ "description": "Only needed when a page holds more than one deck, so slide links stay distinct",
+ "inputMethod": "textfield",
+ "icon": "icons:link"
+ }
+ ],
+ "advanced": [],
+ "developer": []
+ },
+ "saveOptions": {
+ "wipeSlot": true,
+ "unsetAttributes": ["deck", "status", "rendered"]
+ },
+ "demoSchema": [
+ {
+ "tag": "slide-deck",
+ "properties": {
+ "source": "files/decks/my-talk/deck.json"
+ },
+ "content": ""
+ }
+ ]
+}
diff --git a/elements/slide-deck/locales/slide-deck.ar.haxProperties.json b/elements/slide-deck/locales/slide-deck.ar.haxProperties.json
new file mode 100644
index 0000000000..58fd452268
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ar.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "بيان العرض التقديمي"
+ },
+ {
+ "title": "معرّف العرض التقديمي"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.ar.json b/elements/slide-deck/locales/slide-deck.ar.json
new file mode 100644
index 0000000000..62f4b31de2
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ar.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "الشريحة السابقة",
+ "nextSlide": "الشريحة التالية",
+ "viewAllSlides": "عرض كل الشرائح",
+ "viewOneSlide": "عرض شريحة واحدة في كل مرة",
+ "presentFullScreen": "العرض بملء الشاشة",
+ "exitFullScreen": "إنهاء ملء الشاشة",
+ "copyLinkToSlide": "نسخ رابط هذه الشريحة",
+ "linkCopied": "تم نسخ الرابط",
+ "speakerNotes": "ملاحظات المتحدث",
+ "loadingPresentation": "جارٍ تحميل العرض التقديمي",
+ "presentationUnavailable": "العرض التقديمي غير متوفر",
+ "slide": "شريحة"
+}
diff --git a/elements/slide-deck/locales/slide-deck.bn.haxProperties.json b/elements/slide-deck/locales/slide-deck.bn.haxProperties.json
new file mode 100644
index 0000000000..a80393011d
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.bn.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "উপস্থাপনা ম্যানিফেস্ট"
+ },
+ {
+ "title": "উপস্থাপনা আইডি"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.bn.json b/elements/slide-deck/locales/slide-deck.bn.json
new file mode 100644
index 0000000000..e057d1a7de
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.bn.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "পূর্ববর্তী স্লাইড",
+ "nextSlide": "পরবর্তী স্লাইড",
+ "viewAllSlides": "সব স্লাইড দেখুন",
+ "viewOneSlide": "একবারে একটি স্লাইড দেখুন",
+ "presentFullScreen": "পূর্ণ স্ক্রিনে উপস্থাপন করুন",
+ "exitFullScreen": "পূর্ণ স্ক্রিন থেকে বেরিয়ে আসুন",
+ "copyLinkToSlide": "এই স্লাইডের লিঙ্ক কপি করুন",
+ "linkCopied": "লিঙ্ক কপি হয়েছে",
+ "speakerNotes": "বক্তার নোট",
+ "loadingPresentation": "উপস্থাপনা লোড হচ্ছে",
+ "presentationUnavailable": "উপস্থাপনা উপলব্ধ নেই",
+ "slide": "স্লাইড"
+}
diff --git a/elements/slide-deck/locales/slide-deck.es.haxProperties.json b/elements/slide-deck/locales/slide-deck.es.haxProperties.json
new file mode 100644
index 0000000000..063bb53f4e
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.es.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "Manifiesto de la presentación"
+ },
+ {
+ "title": "Id de la presentación"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.es.json b/elements/slide-deck/locales/slide-deck.es.json
new file mode 100644
index 0000000000..014a62ac80
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.es.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "Diapositiva anterior",
+ "nextSlide": "Diapositiva siguiente",
+ "viewAllSlides": "Ver todas las diapositivas",
+ "viewOneSlide": "Ver una diapositiva a la vez",
+ "presentFullScreen": "Presentar en pantalla completa",
+ "exitFullScreen": "Salir de pantalla completa",
+ "copyLinkToSlide": "Copiar enlace a esta diapositiva",
+ "linkCopied": "Enlace copiado",
+ "speakerNotes": "Notas del orador",
+ "loadingPresentation": "Cargando presentación",
+ "presentationUnavailable": "Presentación no disponible",
+ "slide": "Diapositiva"
+}
diff --git a/elements/slide-deck/locales/slide-deck.fr.haxProperties.json b/elements/slide-deck/locales/slide-deck.fr.haxProperties.json
new file mode 100644
index 0000000000..0ed28f3014
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.fr.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "Manifeste du diaporama"
+ },
+ {
+ "title": "Identifiant du diaporama"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.fr.json b/elements/slide-deck/locales/slide-deck.fr.json
new file mode 100644
index 0000000000..f730efaa92
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.fr.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "Diapositive précédente",
+ "nextSlide": "Diapositive suivante",
+ "viewAllSlides": "Voir toutes les diapositives",
+ "viewOneSlide": "Voir une diapositive à la fois",
+ "presentFullScreen": "Présenter en plein écran",
+ "exitFullScreen": "Quitter le plein écran",
+ "copyLinkToSlide": "Copier le lien vers cette diapositive",
+ "linkCopied": "Lien copié",
+ "speakerNotes": "Notes du présentateur",
+ "loadingPresentation": "Chargement de la présentation",
+ "presentationUnavailable": "Présentation indisponible",
+ "slide": "Diapositive"
+}
diff --git a/elements/slide-deck/locales/slide-deck.hi.haxProperties.json b/elements/slide-deck/locales/slide-deck.hi.haxProperties.json
new file mode 100644
index 0000000000..9384c0034d
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.hi.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "प्रस्तुति मैनिफ़ेस्ट"
+ },
+ {
+ "title": "प्रस्तुति आईडी"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.hi.json b/elements/slide-deck/locales/slide-deck.hi.json
new file mode 100644
index 0000000000..2ddeda764e
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.hi.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "पिछली स्लाइड",
+ "nextSlide": "अगली स्लाइड",
+ "viewAllSlides": "सभी स्लाइड देखें",
+ "viewOneSlide": "एक बार में एक स्लाइड देखें",
+ "presentFullScreen": "पूर्ण स्क्रीन में प्रस्तुत करें",
+ "exitFullScreen": "पूर्ण स्क्रीन से बाहर निकलें",
+ "copyLinkToSlide": "इस स्लाइड का लिंक कॉपी करें",
+ "linkCopied": "लिंक कॉपी हो गया",
+ "speakerNotes": "वक्ता नोट्स",
+ "loadingPresentation": "प्रस्तुति लोड हो रही है",
+ "presentationUnavailable": "प्रस्तुति उपलब्ध नहीं है",
+ "slide": "स्लाइड"
+}
diff --git a/elements/slide-deck/locales/slide-deck.ja.haxProperties.json b/elements/slide-deck/locales/slide-deck.ja.haxProperties.json
new file mode 100644
index 0000000000..f72df60be2
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ja.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "デッキマニフェスト"
+ },
+ {
+ "title": "デッキ ID"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.ja.json b/elements/slide-deck/locales/slide-deck.ja.json
new file mode 100644
index 0000000000..5159e25ebe
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ja.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "前のスライド",
+ "nextSlide": "次のスライド",
+ "viewAllSlides": "すべてのスライドを表示",
+ "viewOneSlide": "1 枚ずつ表示",
+ "presentFullScreen": "全画面で発表",
+ "exitFullScreen": "全画面を終了",
+ "copyLinkToSlide": "このスライドのリンクをコピー",
+ "linkCopied": "リンクをコピーしました",
+ "speakerNotes": "発表者ノート",
+ "loadingPresentation": "プレゼンテーションを読み込み中",
+ "presentationUnavailable": "プレゼンテーションを利用できません",
+ "slide": "スライド"
+}
diff --git a/elements/slide-deck/locales/slide-deck.pt.haxProperties.json b/elements/slide-deck/locales/slide-deck.pt.haxProperties.json
new file mode 100644
index 0000000000..78e4471f6d
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.pt.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "Manifesto da apresentação"
+ },
+ {
+ "title": "Id da apresentação"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.pt.json b/elements/slide-deck/locales/slide-deck.pt.json
new file mode 100644
index 0000000000..f95f67f98e
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.pt.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "Slide anterior",
+ "nextSlide": "Próximo slide",
+ "viewAllSlides": "Ver todos os slides",
+ "viewOneSlide": "Ver um slide de cada vez",
+ "presentFullScreen": "Apresentar em tela cheia",
+ "exitFullScreen": "Sair da tela cheia",
+ "copyLinkToSlide": "Copiar link para este slide",
+ "linkCopied": "Link copiado",
+ "speakerNotes": "Notas do apresentador",
+ "loadingPresentation": "Carregando apresentação",
+ "presentationUnavailable": "Apresentação indisponível",
+ "slide": "Slide"
+}
diff --git a/elements/slide-deck/locales/slide-deck.ru.haxProperties.json b/elements/slide-deck/locales/slide-deck.ru.haxProperties.json
new file mode 100644
index 0000000000..9355f2d009
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ru.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "Манифест презентации"
+ },
+ {
+ "title": "Идентификатор презентации"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.ru.json b/elements/slide-deck/locales/slide-deck.ru.json
new file mode 100644
index 0000000000..4d6ae04f51
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.ru.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "Предыдущий слайд",
+ "nextSlide": "Следующий слайд",
+ "viewAllSlides": "Показать все слайды",
+ "viewOneSlide": "Показывать по одному слайду",
+ "presentFullScreen": "Полноэкранный режим",
+ "exitFullScreen": "Выйти из полноэкранного режима",
+ "copyLinkToSlide": "Копировать ссылку на слайд",
+ "linkCopied": "Ссылка скопирована",
+ "speakerNotes": "Заметки докладчика",
+ "loadingPresentation": "Загрузка презентации",
+ "presentationUnavailable": "Презентация недоступна",
+ "slide": "Слайд"
+}
diff --git a/elements/slide-deck/locales/slide-deck.zh.haxProperties.json b/elements/slide-deck/locales/slide-deck.zh.haxProperties.json
new file mode 100644
index 0000000000..2c56548772
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.zh.haxProperties.json
@@ -0,0 +1,12 @@
+{
+ "settings": {
+ "configure": [
+ {
+ "title": "演示文稿清单"
+ },
+ {
+ "title": "演示文稿 ID"
+ }
+ ]
+ }
+}
diff --git a/elements/slide-deck/locales/slide-deck.zh.json b/elements/slide-deck/locales/slide-deck.zh.json
new file mode 100644
index 0000000000..ce8d5490ff
--- /dev/null
+++ b/elements/slide-deck/locales/slide-deck.zh.json
@@ -0,0 +1,14 @@
+{
+ "previousSlide": "上一张幻灯片",
+ "nextSlide": "下一张幻灯片",
+ "viewAllSlides": "查看所有幻灯片",
+ "viewOneSlide": "逐张查看",
+ "presentFullScreen": "全屏演示",
+ "exitFullScreen": "退出全屏",
+ "copyLinkToSlide": "复制此幻灯片的链接",
+ "linkCopied": "链接已复制",
+ "speakerNotes": "演讲者备注",
+ "loadingPresentation": "正在加载演示文稿",
+ "presentationUnavailable": "演示文稿不可用",
+ "slide": "幻灯片"
+}
diff --git a/elements/slide-deck/package.json b/elements/slide-deck/package.json
new file mode 100644
index 0000000000..520207e109
--- /dev/null
+++ b/elements/slide-deck/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "@haxtheweb/slide-deck",
+ "version": "0.0.0",
+ "description": "Present an imported PowerPoint deck slide by slide, with speaker notes",
+ "license": "Apache-2.0",
+ "author": {
+ "name": "haxtheweb"
+ },
+ "keywords": [
+ "webcomponents",
+ "lit",
+ "haxtheweb"
+ ],
+ "repository": {
+ "type": "git",
+ "url": ""
+ },
+ "type": "module",
+ "main": "slide-deck.js",
+ "module": "slide-deck.js",
+ "scripts": {
+ "start": "yarn run dev",
+ "build": "prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && cem analyze --litelement --exclude \"(public|*.stories.js)\" --globs \"{*,lib/**}.js\"",
+ "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
+ "watch": "gulp dev --gulpfile=gulpfile.cjs",
+ "serve": "web-dev-server -c ../../web-dev-server.config.mjs",
+ "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium"
+ },
+ "dependencies": {
+ "lit": "3.3.3",
+ "@haxtheweb/d-d-d": "^26.0.0",
+ "@haxtheweb/i18n-manager": "^26.0.0",
+ "@aiden0z/pptx-renderer": "^1.2.4",
+ "@haxtheweb/simple-icon": "^26.0.0",
+ "@haxtheweb/utils": "^26.0.0"
+ },
+ "devDependencies": {
+ "@custom-elements-manifest/analyzer": "0.10.4",
+ "@haxtheweb/deduping-fix": "^26.0.0",
+ "@web/dev-server": "0.4.6",
+ "concurrently": "9.1.2"
+ },
+ "private": false,
+ "publishConfig": {
+ "access": "public"
+ },
+ "hax": {
+ "cli": true
+ },
+ "customElements": "custom-elements.json"
+}
diff --git a/elements/slide-deck/slide-deck.js b/elements/slide-deck/slide-deck.js
new file mode 100644
index 0000000000..3bc8b077a0
--- /dev/null
+++ b/elements/slide-deck/slide-deck.js
@@ -0,0 +1,522 @@
+/**
+ * Copyright 2026 haxtheweb
+ * @license Apache-2.0, see LICENSE for full text.
+ */
+import { LitElement, html, css, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
+import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
+import { sanitizeHTMLString } from "@haxtheweb/utils/utils.js";
+import "@haxtheweb/simple-icon/lib/simple-icon-button-lite.js";
+
+/**
+ * `slide-deck`
+ * Presents a PPTX deck imported by HAXcms, from the deck.json manifest written
+ * to `files/decks//`.
+ *
+ * Content is layered. The manifest's per slide text and speaker notes always
+ * render and are what assistive technology and site search read. The original
+ * .pptx is painted over that by a renderer which is only fetched once a deck is
+ * on screen, so a deck costs nothing until it is looked at and still works when
+ * the renderer cannot run.
+ *
+ * @demo demo/index.html
+ * @element slide-deck
+ */
+export class SlideDeck extends DDDSuper(I18NMixin(LitElement)) {
+ static get tag() {
+ return "slide-deck";
+ }
+
+ constructor() {
+ super();
+ this.source = null;
+ this.deckId = null;
+ this.slide = 1;
+ this.mode = "slide";
+ this.presenting = false;
+ this.deck = null;
+ this.status = "idle";
+ this.rendered = false;
+ this.t = this.t || {};
+ this.t = {
+ ...this.t,
+ previousSlide: "Previous slide",
+ nextSlide: "Next slide",
+ viewAllSlides: "View all slides",
+ viewOneSlide: "View one slide at a time",
+ presentFullScreen: "Present full screen",
+ exitFullScreen: "Exit full screen",
+ copyLinkToSlide: "Copy link to this slide",
+ linkCopied: "Link copied",
+ speakerNotes: "Speaker notes",
+ loadingPresentation: "Loading presentation",
+ presentationUnavailable: "Presentation unavailable",
+ slide: "Slide",
+ };
+ this.registerLocalization({
+ context: this,
+ localesPath:
+ new URL("./locales/slide-deck.ar.json", import.meta.url).href + "/../",
+ });
+ this._onHashChange = this._onHashChange.bind(this);
+ this._onFullscreenChange = this._onFullscreenChange.bind(this);
+ }
+
+ static get properties() {
+ return {
+ ...super.properties,
+ /** URL of the deck.json manifest, relative to the site or absolute. */
+ source: { type: String },
+ /** Disambiguates deep links when a page holds more than one deck. */
+ deckId: { type: String, attribute: "deck-id" },
+ /** Currently displayed slide, 1 based. */
+ slide: { type: Number, reflect: true },
+ /** "slide" for one at a time, "grid" for every slide plus notes. */
+ mode: { type: String, reflect: true },
+ presenting: { type: Boolean, reflect: true },
+ deck: { type: Object },
+ status: { type: String, reflect: true },
+ rendered: { type: Boolean, reflect: true },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ globalThis.addEventListener("hashchange", this._onHashChange);
+ this.addEventListener("fullscreenchange", this._onFullscreenChange);
+ }
+
+ disconnectedCallback() {
+ globalThis.removeEventListener("hashchange", this._onHashChange);
+ this.removeEventListener("fullscreenchange", this._onFullscreenChange);
+ if (this._observer) {
+ this._observer.disconnect();
+ this._observer = null;
+ }
+ this._releaseRenderer();
+ super.disconnectedCallback();
+ }
+
+ updated(changedProperties) {
+ if (super.updated) {
+ super.updated(changedProperties);
+ }
+ if (changedProperties.has("source") && this.source) {
+ this.loadDeck();
+ }
+ if (changedProperties.has("slide") && this.deck) {
+ this._message = null;
+ this._syncHash();
+ this.paintCurrentSlide();
+ }
+ if (changedProperties.has("mode") && this.mode === "slide") {
+ this.paintCurrentSlide();
+ }
+ }
+
+ get slides() {
+ return (this.deck && this.deck.slides) || [];
+ }
+
+ get currentSlide() {
+ return this.slides[this.slide - 1] || null;
+ }
+
+ /** Prefix for the location hash, so two decks on a page cannot collide. */
+ get hashPrefix() {
+ return encodeURIComponent(
+ this.deckId || (this.deck && this.deck.title) || "slide",
+ );
+ }
+
+ /** Fetch the manifest, then honour any slide named in the URL. */
+ async loadDeck() {
+ const load = {};
+ this._load = load;
+ this._releaseRenderer();
+ this.deck = null;
+ this.status = "loading";
+ this.rendered = false;
+ try {
+ // import paths are site relative, so resolve against the HAX
+ const response = await fetch(
+ new URL(this.source, globalThis.document.baseURI).href,
+ );
+ if (!response.ok) {
+ throw new Error(`deck manifest ${response.status}`);
+ }
+ const deck = await response.json();
+ // a newer source was set while this one was loading
+ if (load !== this._load) {
+ return;
+ }
+ this.deck = deck;
+ this.status = "ready";
+ // the previous deck's slide may be past the end of this one
+ this.goTo(this.slide);
+ this._readHash();
+ this._watchForViewport();
+ } catch (error) {
+ if (load === this._load) {
+ this.status = "error";
+ console.error(`slide-deck: ${error.message}`);
+ }
+ }
+ }
+
+ /** Only pay for the renderer once the deck is actually looked at. */
+ _watchForViewport() {
+ if (this._observer || !globalThis.IntersectionObserver) {
+ return;
+ }
+ this._observer = new IntersectionObserver((entries) => {
+ if (entries.some((entry) => entry.isIntersecting)) {
+ this._observer.disconnect();
+ this._observer = null;
+ this.paintCurrentSlide();
+ }
+ });
+ this._observer.observe(this);
+ }
+
+ /** Drop the renderer, disposing it once any load in flight settles. */
+ _releaseRenderer() {
+ if (this._renderer) {
+ this._renderer.then(
+ (renderer) => renderer.dispose(),
+ () => {},
+ );
+ this._renderer = null;
+ }
+ }
+
+ /**
+ * Paint the current slide with the real presentation. Any failure leaves the
+ * manifest text on screen, which is a usable deck in its own right.
+ */
+ async paintCurrentSlide() {
+ if (
+ this._observer ||
+ !this.deck ||
+ !this.deck.pptx ||
+ this.mode !== "slide"
+ ) {
+ return;
+ }
+ const stage = this.shadowRoot && this.shadowRoot.querySelector("#stage");
+ if (!stage) {
+ return;
+ }
+ const { slide } = this;
+ try {
+ if (!this._renderer) {
+ const pptx = new URL(this.deck.pptx, globalThis.document.baseURI).href;
+ // shared by every paint until it settles, so the deck loads once
+ this._renderer = import("./lib/slide-deck-renderer.js").then(
+ ({ DeckRenderer }) => DeckRenderer.load(pptx),
+ );
+ }
+ const pending = this._renderer;
+ const renderer = await pending;
+ // newer navigation, a mode change or a new source has taken over
+ if (
+ pending !== this._renderer ||
+ slide !== this.slide ||
+ !stage.isConnected
+ ) {
+ return;
+ }
+ this.style.setProperty(
+ "--slide-deck-aspect-ratio",
+ `${renderer.aspectRatio}`,
+ );
+ await renderer.render(stage, slide - 1);
+ this.rendered = true;
+ } catch (error) {
+ this.rendered = false;
+ console.error(`slide-deck: ${error.message}`);
+ }
+ }
+
+ goTo(number) {
+ const total = this.slides.length;
+ if (total) {
+ this.slide = Math.min(Math.max(number, 1), total);
+ }
+ }
+
+ showSlide(number) {
+ this.mode = "slide";
+ this.goTo(number);
+ }
+
+ toggleMode() {
+ this.mode = this.mode === "grid" ? "slide" : "grid";
+ }
+
+ async togglePresenting() {
+ if (globalThis.document.fullscreenElement === this) {
+ await globalThis.document.exitFullscreen();
+ } else if (this.requestFullscreen) {
+ this.mode = "slide";
+ await this.requestFullscreen();
+ }
+ }
+
+ async copyLink() {
+ const url = new URL(globalThis.location.href);
+ url.hash = `${this.hashPrefix}-slide-${this.slide}`;
+ try {
+ await globalThis.navigator.clipboard.writeText(url.href);
+ this._announce(this.t.linkCopied);
+ } catch (error) {
+ console.error(`slide-deck: ${error.message}`);
+ }
+ }
+
+ _onFullscreenChange() {
+ this.presenting = globalThis.document.fullscreenElement === this;
+ }
+
+ _onHashChange() {
+ this._readHash();
+ }
+
+ _readHash() {
+ const prefix = `#${this.hashPrefix}-slide-`;
+ const { hash } = globalThis.location;
+ const number = hash.slice(prefix.length);
+ if (hash.startsWith(prefix) && /^\d+$/.test(number)) {
+ this.goTo(Number(number));
+ }
+ }
+
+ _syncHash() {
+ const url = new URL(globalThis.location.href);
+ url.hash = `${this.hashPrefix}-slide-${this.slide}`;
+ if (url.href === globalThis.location.href) {
+ return;
+ }
+ // a bare "#hash" would resolve against the HAX , not this page
+ globalThis.history.replaceState(null, "", url.href);
+ }
+
+ _announce(message) {
+ this._message = message;
+ this.requestUpdate();
+ }
+
+ _onKeyDown(event) {
+ const keys = {
+ ArrowLeft: () => this.goTo(this.slide - 1),
+ ArrowRight: () => this.goTo(this.slide + 1),
+ Home: () => this.goTo(1),
+ End: () => this.goTo(this.slides.length),
+ };
+ if (keys[event.key]) {
+ event.preventDefault();
+ keys[event.key]();
+ }
+ }
+
+ static get styles() {
+ return [
+ super.styles,
+ css`
+ :host {
+ display: block;
+ font-family: var(--ddd-font-navigation);
+ color: var(--ddd-theme-primary);
+ }
+ :host([presenting]) {
+ background-color: var(--ddd-theme-default-coalyGray, #000);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+ :host([status="error"]) #stage {
+ display: none;
+ }
+ #stage {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1 / var(--slide-deck-aspect-ratio, 0.5625);
+ overflow: hidden;
+ background-color: var(--ddd-theme-default-white, #fff);
+ border: var(--ddd-border-xs);
+ }
+ /* the painted slide is decorative; the manifest text below is what
+ assistive technology reads */
+ #stage > * {
+ pointer-events: none;
+ }
+ .text {
+ padding: var(--ddd-spacing-3);
+ border: var(--ddd-border-xs);
+ border-top: none;
+ }
+ :host([rendered]) .text {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ border: none;
+ padding: 0;
+ }
+ .bar {
+ display: flex;
+ align-items: center;
+ gap: var(--ddd-spacing-1);
+ padding: var(--ddd-spacing-1) 0;
+ }
+ .count {
+ font-size: var(--ddd-font-size-4xs);
+ min-width: 4em;
+ text-align: center;
+ }
+ .spacer {
+ flex: 1;
+ }
+ .grid {
+ display: grid;
+ gap: var(--ddd-spacing-3);
+ }
+ .card {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--ddd-spacing-3);
+ padding: var(--ddd-spacing-2);
+ border: var(--ddd-border-xs);
+ text-align: left;
+ background: none;
+ font: inherit;
+ color: inherit;
+ cursor: pointer;
+ }
+ .card:focus-visible {
+ outline: var(--ddd-border-sm);
+ }
+ .notes {
+ font-size: var(--ddd-font-size-4xs);
+ }
+ .notes p {
+ white-space: pre-line;
+ }
+ .message {
+ padding: var(--ddd-spacing-3);
+ }
+ @media (max-width: 640px) {
+ .card {
+ grid-template-columns: 1fr;
+ }
+ }
+ `,
+ ];
+ }
+
+ renderToolbar() {
+ const last = this.slides.length;
+ return html`