Loading notes...
+
-
- stacks/
+
+ Represents the shorthand notation of the AWS Region where resources are deployed
+ Either short or fixed notation
+ Fixed is always 3 letters
+ Short is 3-4 letters typically
+
+
+ us-east-1 in short is use1us-east-1 in fixed is ue1
+
+ A classification for different life cycles in infrastructure management
+ In industry, usually referred to as environment
+ Examples: Dev, Staging, Prod, Auto
+ Grouped by tenant
+
+
+
+
+ A tenant is a logical grouping of stages
+ Typically mirrors AWS Organizational Units (OUs)
+ We typically have 2: Core and Platform (plat)
+ Can have multiple Platform tenants with the same stages
+
+
+
+
+ https://docs.cloudposse.com/
+
+
+ Use the README to get started
+ ADRs are Architecture Design Records
+ Setup docs include how to get started with different layers of architecture
+ Component READMEs describe getting started with that individual component
+
+
+
+
+ Terraform Configuration:
+ Components holds Terraform code
+ Stacks holds your Organization's configuration for your components
+
+
+ components/terraform/ and stacks/atmos.yamlmake all and make run| Host | +Container | +
|---|---|
| ~/ ($HOME dir) | +/localhost/ | +
| $PROJECT_ROOT/rootfs/ | +/ | +
make allmake all.
+
+ References
+
+ Atmos: https://atmos.tools/
+ Geodesic: github.com/cloudposse/geodesic
+ Cloud Posse Docs: docs.cloudposse.com
+ Support: /support/
+
+
+
+ Next Steps
+
+ Build Geodesic locally
+ Install Leapp
+ Read Identity and Authentication Fundamentals
+
+ Next Call
+
+ Identity and Authentication
+
+
+
+
+ );
+}
+
+export default Slide;
diff --git a/src/components/SlideDeck/SlideCode.tsx b/src/components/SlideDeck/SlideCode.tsx
new file mode 100644
index 000000000..a8ff9ce4c
--- /dev/null
+++ b/src/components/SlideDeck/SlideCode.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import type { SlideCodeProps } from './types';
+
+export function SlideCode({
+ children,
+ language = 'yaml',
+ showLineNumbers = false,
+ className = '',
+}: SlideCodeProps) {
+ return (
+
+ {children}
+
+
+
+ {children}
+
+
+ );
+}
+
+export default SlideCode;
diff --git a/src/components/SlideDeck/SlideContent.css b/src/components/SlideDeck/SlideContent.css
new file mode 100644
index 000000000..5262dfc1b
--- /dev/null
+++ b/src/components/SlideDeck/SlideContent.css
@@ -0,0 +1,317 @@
+/* SlideTitle - compact for embedded mode */
+.slide-title {
+ font-size: 1.25rem !important;
+ font-weight: 700 !important;
+ line-height: 1.2 !important;
+ margin: 0 0 0.5rem 0 !important;
+ color: var(--ifm-heading-color, #1c1e21) !important;
+ display: block !important;
+ visibility: visible !important;
+ opacity: 1 !important;
+}
+
+html[data-theme='dark'] .slide-title {
+ color: var(--ifm-heading-color, #e3e3e3) !important;
+}
+
+.slide--title .slide-title {
+ font-size: 1.75rem;
+ margin-bottom: 0.75rem;
+}
+
+/* SlideSubtitle */
+.slide-subtitle {
+ font-size: 0.9rem;
+ font-weight: 500;
+ line-height: 1.3;
+ margin: 0 0 0.5rem 0;
+ color: var(--ifm-color-emphasis-700);
+}
+
+html[data-theme='dark'] .slide-subtitle {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.slide--title .slide-subtitle {
+ font-size: 1rem;
+ color: var(--ifm-color-emphasis-600);
+}
+
+/* SlideContent */
+.slide-content {
+ font-size: 0.8rem;
+ line-height: 1.4;
+ color: var(--ifm-font-color-base);
+}
+
+.slide-content p {
+ margin: 0 0 0.5rem 0;
+}
+
+.slide-content p:last-child {
+ margin-bottom: 0;
+}
+
+/* SlideList */
+.slide-list {
+ font-size: 0.8rem;
+ line-height: 1.4;
+ margin: 0.25rem 0;
+ padding-left: 1.25rem;
+ text-align: left;
+}
+
+.slide-list li {
+ margin-bottom: 0.25rem;
+}
+
+.slide-list li:last-child {
+ margin-bottom: 0;
+}
+
+.slide-list--ordered {
+ list-style-type: decimal;
+}
+
+/* SlideCode */
+.slide-code {
+ width: 100%;
+ font-size: 0.65rem;
+ margin: 0.25rem 0;
+}
+
+.slide-code pre {
+ margin: 0;
+ border-radius: 4px;
+ padding: 0.5rem !important;
+}
+
+/* SlideImage */
+.slide-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0.25rem 0;
+}
+
+.slide-image img {
+ border-radius: 4px;
+ max-height: 150px;
+ object-fit: contain;
+}
+
+/* SlideSplit */
+.slide-split {
+ display: flex;
+ gap: 1rem;
+ width: 100%;
+ align-items: flex-start;
+}
+
+.slide-split > * {
+ flex: 1;
+ min-width: 0;
+}
+
+.slide-split--1-2 > *:first-child {
+ flex: 1;
+}
+
+.slide-split--1-2 > *:last-child {
+ flex: 2;
+}
+
+.slide-split--2-1 > *:first-child {
+ flex: 2;
+}
+
+.slide-split--2-1 > *:last-child {
+ flex: 1;
+}
+
+/* Desktop fullscreen - scale text to fill larger slide area */
+.slide-deck--fullscreen .slide-title {
+ font-size: clamp(2.5rem, 4vw, 4rem);
+ margin: 0 0 1rem 0 !important;
+}
+
+.slide-deck--fullscreen .slide--title .slide-title {
+ font-size: clamp(3.5rem, 5vw, 5.5rem);
+ margin-bottom: 1.5rem;
+}
+
+.slide-deck--fullscreen .slide-subtitle {
+ font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+ margin: 0 0 1rem 0;
+}
+
+.slide-deck--fullscreen .slide--title .slide-subtitle {
+ font-size: clamp(1.75rem, 3vw, 3rem);
+}
+
+.slide-deck--fullscreen .slide-content {
+ font-size: clamp(1.25rem, 2vw, 2rem);
+}
+
+.slide-deck--fullscreen .slide-content p {
+ margin: 0 0 1rem 0;
+}
+
+.slide-deck--fullscreen .slide-list {
+ font-size: clamp(1.25rem, 2vw, 2rem);
+ margin: 1rem 0;
+}
+
+.slide-deck--fullscreen .slide-list li {
+ margin-bottom: 0.75rem;
+}
+
+.slide-deck--fullscreen .slide-code {
+ font-size: clamp(0.9rem, 1.2vw, 1.3rem);
+ margin: 1rem 0;
+}
+
+.slide-deck--fullscreen .slide-code pre {
+ padding: 1rem !important;
+}
+
+.slide-deck--fullscreen .slide-split {
+ gap: 2rem;
+ align-items: center;
+}
+
+.slide-deck--fullscreen .slide-image img {
+ max-height: none;
+}
+
+/* Responsive */
+@media screen and (max-width: 996px) {
+ .slide-title {
+ font-size: 2rem;
+ }
+
+ .slide--title .slide-title {
+ font-size: 2.5rem;
+ }
+
+ .slide-subtitle {
+ font-size: 1.25rem;
+ }
+
+ .slide-content,
+ .slide-list {
+ font-size: 1.1rem;
+ }
+
+ .slide-split {
+ flex-direction: column;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .slide-title {
+ font-size: 1.5rem;
+ }
+
+ .slide--title .slide-title {
+ font-size: 2rem;
+ }
+
+ .slide-subtitle {
+ font-size: 1.1rem;
+ }
+
+ .slide-content,
+ .slide-list {
+ font-size: 1rem;
+ }
+
+ .slide-code {
+ font-size: 0.8rem;
+ }
+}
+
+/* Small Mobile */
+@media screen and (max-width: 480px) {
+ .slide-title {
+ font-size: 1.25rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .slide--title .slide-title {
+ font-size: 1.5rem;
+ }
+
+ .slide-subtitle {
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .slide-content,
+ .slide-list {
+ font-size: 0.9rem;
+ line-height: 1.5;
+ }
+
+ .slide-list {
+ padding-left: 1rem;
+ }
+
+ .slide-list li {
+ margin-bottom: 0.5rem;
+ }
+
+ .slide-code {
+ font-size: 0.7rem;
+ }
+
+ .slide-image img {
+ border-radius: 4px;
+ }
+}
+
+/* Mobile Portrait Fullscreen - use smaller font sizes for narrow viewports */
+@media screen and (max-width: 768px) and (orientation: portrait) {
+ .slide-deck--fullscreen .slide-title {
+ font-size: clamp(1.25rem, 5vw, 1.75rem);
+ margin-bottom: 0.5rem;
+ }
+
+ .slide-deck--fullscreen .slide--title .slide-title {
+ font-size: clamp(1.5rem, 6vw, 2.25rem);
+ }
+
+ .slide-deck--fullscreen .slide-subtitle {
+ font-size: clamp(1rem, 4vw, 1.25rem);
+ margin-bottom: 0.5rem;
+ }
+
+ .slide-deck--fullscreen .slide--title .slide-subtitle {
+ font-size: clamp(1rem, 4.5vw, 1.5rem);
+ }
+
+ .slide-deck--fullscreen .slide-content,
+ .slide-deck--fullscreen .slide-list {
+ font-size: clamp(0.875rem, 3.5vw, 1.1rem);
+ line-height: 1.5;
+ }
+
+ .slide-deck--fullscreen .slide-list li {
+ margin-bottom: 0.5rem;
+ }
+
+ .slide-deck--fullscreen .slide-code {
+ font-size: clamp(0.7rem, 2.5vw, 0.9rem);
+ }
+
+ /* Split layouts in portrait - stack vertically */
+ .slide-deck--fullscreen .slide--split .slide__inner {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .slide-deck--fullscreen .slide--split .slide-image img,
+ .slide-deck--fullscreen .slide--split img {
+ max-height: 30vh;
+ }
+}
diff --git a/src/components/SlideDeck/SlideContent.tsx b/src/components/SlideDeck/SlideContent.tsx
new file mode 100644
index 000000000..42f42f3d1
--- /dev/null
+++ b/src/components/SlideDeck/SlideContent.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SlideContentProps } from './types';
+
+export function SlideContent({ children, className = '' }: SlideContentProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default SlideContent;
diff --git a/src/components/SlideDeck/SlideDeck.css b/src/components/SlideDeck/SlideDeck.css
new file mode 100644
index 000000000..e49fa82d3
--- /dev/null
+++ b/src/components/SlideDeck/SlideDeck.css
@@ -0,0 +1,557 @@
+/* SlideDeck Container */
+.slide-deck {
+ position: relative;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ background: var(--ifm-background-color, #ffffff);
+ border-radius: 8px;
+ overflow: hidden;
+ /* Use 16:9 aspect ratio */
+ aspect-ratio: 16 / 9;
+ max-height: calc(100vh - 250px);
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Dark mode explicit styles */
+html[data-theme='dark'] .slide-deck {
+ background: var(--ifm-background-color, #1b1b1d);
+ border-color: var(--ifm-color-emphasis-300);
+}
+
+/* Page mode styles - slides embedded in page content */
+
+/* Fullscreen Mode - z-index must be higher than Docusaurus navbar (var(--ifm-z-index-fixed) = 100) */
+.slide-deck--fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ max-width: none;
+ margin: 0;
+ border-radius: 0;
+ border: none;
+ z-index: 99999;
+ display: flex;
+ flex-direction: column;
+ background: var(--ifm-background-color);
+}
+
+.slide-deck--fullscreen .slide-deck__main {
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.slide-deck--fullscreen .slide-deck__container {
+ padding-top: 0;
+ height: 100%;
+ background: var(--ifm-background-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.slide-deck--fullscreen .slide-deck__slide-wrapper {
+ position: relative;
+ top: auto;
+ left: auto;
+ right: auto;
+ bottom: auto;
+ /* Size based on viewport height to fill screen while maintaining 16:9 */
+ height: calc(100vh - 60px);
+ width: calc((100vh - 60px) * 16 / 9);
+ max-width: calc(100vw - 80px);
+ max-height: calc((100vw - 80px) * 9 / 16);
+ aspect-ratio: 16 / 9;
+}
+
+/* Left area - drawer trigger zone */
+.slide-deck__left-area {
+ display: flex;
+ align-items: stretch;
+ flex-shrink: 0;
+ cursor: pointer;
+ min-width: 40px;
+}
+
+/* Controls Hidden State */
+.slide-deck--controls-hidden .slide-deck__left-area {
+ opacity: 0;
+ transform: translateX(-100%);
+ pointer-events: none;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.slide-deck__left-area {
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.slide-deck--controls-hidden .slide-deck__side-nav--next {
+ opacity: 0;
+ transform: translateX(100%);
+ pointer-events: none;
+}
+
+.slide-deck--controls-hidden .slide-deck__toolbar {
+ opacity: 0;
+ transform: translateY(100%);
+ pointer-events: none;
+}
+
+.slide-deck--controls-hidden .slide-deck__progress-bar {
+ opacity: 0;
+}
+
+/* Main layout with side navigation */
+.slide-deck__main {
+ display: flex;
+ align-items: stretch;
+ position: relative;
+ flex: 1;
+ min-height: 400px;
+}
+
+/* Side navigation buttons */
+.slide-deck__side-nav {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ flex-shrink: 0;
+ border: none;
+ background: transparent;
+ color: var(--ifm-color-emphasis-500);
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: all 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
+ opacity: 1;
+ /* Ensure nav buttons are above notes panel backdrop (z-index: 100) and panel (z-index: 101) */
+ z-index: 102;
+ position: relative;
+}
+
+.slide-deck__side-nav:hover:not(:disabled) {
+ color: var(--ifm-color-primary);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.slide-deck__side-nav:disabled {
+ color: var(--ifm-color-emphasis-300);
+ cursor: not-allowed;
+}
+
+html[data-theme='dark'] .slide-deck__side-nav:disabled {
+ color: var(--ifm-color-emphasis-600);
+}
+
+/* Slide Container */
+.slide-deck__container {
+ position: relative;
+ flex: 1;
+ min-width: 0;
+ min-height: 400px;
+ background: var(--ifm-background-color, #ffffff);
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+html[data-theme='dark'] .slide-deck__container {
+ background: var(--ifm-background-color, #1b1b1d);
+}
+
+.slide-deck__slide-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Ensure the slide inside the wrapper fills it */
+.slide-deck__slide-wrapper > .slide {
+ width: 100%;
+ height: 100%;
+}
+
+/* Bottom Toolbar - minimal */
+.slide-deck__toolbar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem 1rem;
+ background: #ffffff;
+ background: var(--ifm-background-color, #ffffff);
+ border-top: 1px solid rgba(0, 0, 0, 0.06);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+html[data-theme='dark'] .slide-deck__toolbar {
+ background: #1b1b1d;
+ background: var(--ifm-background-color, #1b1b1d);
+ border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.slide-deck__tool-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-500);
+ font-size: 1.125rem;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.slide-deck__tool-button:hover:not(:disabled) {
+ color: var(--ifm-color-primary);
+ background: var(--ifm-color-emphasis-100);
+}
+
+html[data-theme='dark'] .slide-deck__tool-button:hover:not(:disabled) {
+ background: var(--ifm-color-emphasis-200);
+}
+
+/* Active state for toggle buttons */
+.slide-deck__tool-button--active {
+ color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary-lightest);
+}
+
+html[data-theme='dark'] .slide-deck__tool-button--active {
+ background: rgba(30, 91, 184, 0.2);
+}
+
+.slide-deck__tool-button:disabled {
+ opacity: 0.5;
+ cursor: wait;
+}
+
+/* Spinning animation for loading states */
+.slide-deck__spin {
+ animation: slide-deck-spin 1s linear infinite;
+}
+
+@keyframes slide-deck-spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.slide-deck__progress {
+ font-size: 0.8125rem;
+ color: var(--ifm-color-emphasis-500);
+ font-variant-numeric: tabular-nums;
+ font-weight: 500;
+}
+
+/* Progress Bar */
+.slide-deck__progress-bar {
+ height: 2px;
+ background: var(--ifm-color-emphasis-200);
+ transition: opacity 0.3s ease;
+}
+
+/* Extend progress bar to full width in page mode */
+.markdown .slide-deck__progress-bar,
+.theme-doc-markdown .slide-deck__progress-bar {
+ margin-left: -2rem;
+ margin-right: -2rem;
+}
+
+html[data-theme='dark'] .slide-deck__progress-bar {
+ background: var(--ifm-color-emphasis-700);
+}
+
+.slide-deck__progress-bar-fill {
+ height: 100%;
+ background: var(--ifm-color-primary);
+ transition: width 0.3s ease;
+}
+
+/* Notes Shrink Mode - Resize slide container to make room for notes panel */
+.slide-deck--notes-shrink.slide-deck--notes-right .slide-deck__main {
+ padding-right: 320px;
+ transition: padding-right 0.3s ease;
+}
+
+.slide-deck--notes-shrink.slide-deck--notes-bottom {
+ padding-bottom: 25vh;
+ transition: padding-bottom 0.3s ease;
+}
+
+/* Fullscreen shrink mode adjustments */
+.slide-deck--fullscreen.slide-deck--notes-shrink.slide-deck--notes-right .slide-deck__slide-wrapper {
+ max-width: calc((100vh - 60px) * 16 / 9 - 320px);
+}
+
+.slide-deck--fullscreen.slide-deck--notes-shrink.slide-deck--notes-bottom .slide-deck__slide-wrapper {
+ height: calc(100vh - 60px - 25vh);
+ max-height: calc((100vw - 80px) * 9 / 16 - 25vh);
+}
+
+/* Responsive - Tablet */
+@media screen and (max-width: 996px) {
+ .markdown .slide-deck,
+ .theme-doc-markdown .slide-deck {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ height: calc(100vh - 100px);
+ max-height: calc(100vh - 100px);
+ }
+
+ .markdown .slide-deck .slide-deck__container,
+ .theme-doc-markdown .slide-deck .slide-deck__container {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .markdown .slide-deck .slide-deck__slide-wrapper,
+ .theme-doc-markdown .slide-deck .slide-deck__slide-wrapper {
+ max-width: calc((100vh - 140px) * 16 / 9);
+ }
+}
+
+/* Responsive - Mobile (increased to 996px to catch large phones in landscape) */
+@media screen and (max-width: 996px) and (max-height: 500px),
+ screen and (max-width: 768px) {
+ .markdown .slide-deck,
+ .theme-doc-markdown .slide-deck {
+ padding-left: 0;
+ padding-right: 0;
+ height: auto;
+ max-height: none;
+ min-height: 300px;
+ }
+
+ .markdown .slide-deck .slide-deck__main,
+ .theme-doc-markdown .slide-deck .slide-deck__main {
+ flex: none;
+ }
+
+ .markdown .slide-deck .slide-deck__container,
+ .theme-doc-markdown .slide-deck .slide-deck__container {
+ padding-left: 0;
+ padding-right: 0;
+ height: auto;
+ padding-top: 0;
+ }
+
+ .markdown .slide-deck .slide-deck__slide-wrapper,
+ .theme-doc-markdown .slide-deck .slide-deck__slide-wrapper {
+ width: 100%;
+ max-width: 100%;
+ }
+
+ .slide-deck__slide-wrapper {
+ left: 0;
+ right: 0;
+ }
+
+ .slide-deck__side-nav {
+ width: 28px;
+ font-size: 1.125rem;
+ }
+
+ .slide-deck__toolbar {
+ padding: 0.375rem 0.5rem;
+ gap: 0.5rem;
+ }
+
+ .slide-deck__tool-button {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+
+ .slide-deck__progress {
+ font-size: 0.7rem;
+ }
+
+ /* Mobile fullscreen - fill entire viewport and center content */
+ .slide-deck--fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 99999;
+ background: var(--ifm-background-color);
+ }
+
+ /* Collapse the left area container but keep children visible (nav buttons are fixed positioned) */
+ .slide-deck--fullscreen .slide-deck__left-area {
+ width: 0;
+ min-width: 0;
+ overflow: visible;
+ }
+
+ .slide-deck--fullscreen .slide-deck__main {
+ flex: 1;
+ display: flex;
+ align-items: stretch;
+ min-height: 0;
+ }
+
+ .slide-deck--fullscreen .slide-deck__container {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ padding: 0 !important;
+ }
+
+ .slide-deck--fullscreen .slide-deck__slide-wrapper {
+ /* Fill entire viewport on mobile - no 16:9 constraint */
+ position: relative !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ aspect-ratio: auto;
+ }
+
+ .slide-deck--fullscreen .slide-deck__slide-wrapper .slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 0 2rem 4rem;
+ overflow-y: auto;
+ /* Flexbox with min-height allows centering when short, scrolling when tall */
+ display: flex;
+ flex-direction: column;
+ }
+
+ .slide-deck--fullscreen .slide-deck__slide-wrapper .slide .slide__inner {
+ margin: auto;
+ flex-shrink: 0;
+ }
+
+ /* Ensure controls are visible on mobile */
+ .slide-deck--fullscreen .slide-deck__toolbar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: var(--ifm-background-color);
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ z-index: 10;
+ }
+
+ .slide-deck--fullscreen .slide-deck__side-nav {
+ position: fixed;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 10;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ width: 36px;
+ height: 36px;
+ }
+
+ html[data-theme='dark'] .slide-deck--fullscreen .slide-deck__side-nav {
+ background: rgba(0, 0, 0, 0.7);
+ }
+
+ .slide-deck--fullscreen .slide-deck__side-nav--prev {
+ left: 0.5rem;
+ }
+
+ .slide-deck--fullscreen .slide-deck__side-nav--next {
+ right: 0.5rem;
+ }
+}
+
+/* Responsive - Small Mobile */
+@media screen and (max-width: 480px) {
+ .slide-deck__side-nav {
+ width: 24px;
+ font-size: 1rem;
+ }
+
+ .slide-deck__left-area {
+ min-width: 24px;
+ }
+
+ .slide-deck__toolbar {
+ padding: 0.25rem 0.5rem;
+ gap: 0.25rem;
+ }
+
+ .slide-deck__tool-button {
+ width: 36px;
+ height: 36px;
+ font-size: 0.9rem;
+ }
+
+ .slide-deck__progress {
+ font-size: 0.65rem;
+ }
+}
+
+/* Mobile Portrait - specific handling for tall narrow viewports */
+@media screen and (max-width: 768px) and (orientation: portrait) {
+ .slide-deck--fullscreen {
+ /* Account for mobile browser UI (URL bar, etc.) using dvh */
+ height: 100dvh;
+ padding-top: env(safe-area-inset-top);
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+
+ .slide-deck--fullscreen .slide-deck__main {
+ /* Leave room for toolbar at bottom */
+ height: calc(100dvh - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+ }
+
+ .slide-deck--fullscreen .slide-deck__slide-wrapper .slide {
+ /* Add top padding to account for any browser UI overlap */
+ padding-top: 1rem;
+ padding-bottom: 5rem;
+ }
+
+ .slide-deck--fullscreen .slide-deck__toolbar {
+ padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
+ }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .slide-deck__side-nav,
+ .slide-deck__tool-button,
+ .slide-deck__toolbar,
+ .slide-deck__progress-bar {
+ transition: none;
+ }
+
+ .slide-deck__progress-bar-fill {
+ transition: none;
+ }
+
+ /* Show controls always when reduced motion is preferred */
+ .slide-deck--controls-hidden .slide-deck__left-area,
+ .slide-deck--controls-hidden .slide-deck__side-nav,
+ .slide-deck--controls-hidden .slide-deck__toolbar,
+ .slide-deck--controls-hidden .slide-deck__progress-bar {
+ opacity: 1;
+ transform: none;
+ pointer-events: auto;
+ }
+}
diff --git a/src/components/SlideDeck/SlideDeck.tsx b/src/components/SlideDeck/SlideDeck.tsx
new file mode 100644
index 000000000..ba8073305
--- /dev/null
+++ b/src/components/SlideDeck/SlideDeck.tsx
@@ -0,0 +1,504 @@
+import React, { useEffect, useCallback, useState, useRef, Children, isValidElement, ReactElement } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+ RiArrowLeftSLine,
+ RiArrowRightSLine,
+ RiFullscreenLine,
+ RiFullscreenExitLine,
+ RiMenuLine,
+ RiSpeakLine,
+ RiArrowGoBackLine,
+ RiPlayLine,
+ RiPauseLine,
+ RiLoader4Line,
+} from 'react-icons/ri';
+import { SlideDeckProvider, useSlideDeck } from './SlideDeckContext';
+import { SlideDrawer } from './SlideDrawer';
+import { SlideNotesPanel } from './SlideNotesPanel';
+import { SlideNotesPopout } from './SlideNotesPopout';
+import { TTSPlayer } from './TTSPlayer';
+import { useTTS } from './useTTS';
+import { Tooltip } from './Tooltip';
+import type { SlideDeckProps } from './types';
+import './SlideDeck.css';
+
+type SlideDeckInnerProps = Omit
+ {/* Slide container with side navigation */}
+ {
+ autoPlayRef.current = false;
+ setIsAutoPlaying(false);
+ // Clear any pending auto-advance timer.
+ if (autoAdvanceTimerRef.current) {
+ clearTimeout(autoAdvanceTimerRef.current);
+ autoAdvanceTimerRef.current = null;
+ }
+ tts.pause();
+ }}
+ onResume={() => {
+ autoPlayRef.current = true;
+ setIsAutoPlaying(true);
+ tts.resume();
+ }}
+ />
+ )}
+
+ {/* Progress bar */}
+
+ {children}
+
+ )}
+
+ {/* Speaker notes panel - hide when popped out */}
+
+ );
+}
+
+export function SlideDeck({
+ children,
+ startSlide = 1,
+ ...props
+}: SlideDeckProps) {
+ const slides = Children.toArray(children).filter(isValidElement);
+ const totalSlides = slides.length;
+
+ return (
+
+ {/* Left navigation area - triggers drawer on hover */}
+
+
+
+ )}
+
+
+ {/* Bottom toolbar - minimal */}
+
+ {showNavigation && (
+
+
+
+ )}
+
+
+ {/* Slide content area */}
+
+
+
+ {currentSlideElement}
+
+
+
+
+ {/* Right navigation button */}
+ {showNavigation && (
+
+ {showDrawer && (
+
+
+
+ )}
+
+
+
+
+
+ {/* TTS Play/Pause button - always show, use isAutoPlaying for state during transitions */}
+
+
+
+
+ {showProgress && (
+
+
+
+ )}
+
+
+ {/* TTS Player bar - shows when playing, paused, or in auto-play mode (between slides) */}
+ {(tts.isPlaying || tts.isPaused || isAutoPlaying) && (
+
+ {currentSlide} / {totalSlides}
+
+ )}
+
+ {showFullscreen && (
+
+
+
+
+ {/* Slide drawer */}
+ {showDrawer && (
+
+
+
+ Slides
+ +
+ {slides.map((slide, index) => {
+ const slideNumber = index + 1;
+ const isActive = slideNumber === currentSlide;
+
+ return (
+
+ );
+ })}
+
+
+ 
+
+ );
+}
+
+export default SlideImage;
diff --git a/src/components/SlideDeck/SlideIndex.css b/src/components/SlideDeck/SlideIndex.css
new file mode 100644
index 000000000..1ccfd6a73
--- /dev/null
+++ b/src/components/SlideDeck/SlideIndex.css
@@ -0,0 +1,148 @@
+/* SlideIndex Container */
+.slide-index {
+ width: 100%;
+}
+
+.slide-index--empty {
+ text-align: center;
+ padding: 3rem;
+ color: var(--ifm-color-emphasis-600);
+}
+
+/* Grid Layout */
+.slide-index__grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 1.5rem;
+}
+
+/* Card */
+.slide-index__card {
+ display: flex;
+ flex-direction: column;
+ background: var(--ifm-card-background-color);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 12px;
+ overflow: hidden;
+ text-decoration: none;
+ color: inherit;
+ transition: all 0.2s ease;
+}
+
+.slide-index__card:hover {
+ border-color: var(--ifm-color-primary);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+ text-decoration: none;
+}
+
+html[data-theme='dark'] .slide-index__card {
+ border-color: var(--ifm-color-emphasis-300);
+}
+
+html[data-theme='dark'] .slide-index__card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Thumbnail */
+.slide-index__thumbnail {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ background: var(--ifm-color-emphasis-100);
+ overflow: hidden;
+}
+
+html[data-theme='dark'] .slide-index__thumbnail {
+ background: var(--ifm-color-emphasis-200);
+}
+
+.slide-index__thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Card Content */
+.slide-index__card-content {
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.slide-index__card-title {
+ font-size: 1.125rem;
+ font-weight: 600;
+ margin: 0;
+ color: var(--ifm-heading-color);
+}
+
+.slide-index__card-description {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+ margin: 0;
+ line-height: 1.5;
+}
+
+html[data-theme='dark'] .slide-index__card-description {
+ color: var(--ifm-color-emphasis-500);
+}
+
+/* Meta */
+.slide-index__card-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 0.5rem;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.slide-index__slide-count {
+ font-size: 0.75rem;
+ color: var(--ifm-color-emphasis-600);
+ font-weight: 500;
+}
+
+/* Tags */
+.slide-index__tags {
+ display: flex;
+ gap: 0.375rem;
+ flex-wrap: wrap;
+}
+
+.slide-index__tag {
+ font-size: 0.6875rem;
+ padding: 0.125rem 0.5rem;
+ background: var(--ifm-color-primary-lightest);
+ color: var(--ifm-color-primary-darkest);
+ border-radius: 9999px;
+ font-weight: 500;
+}
+
+html[data-theme='dark'] .slide-index__tag {
+ background: var(--ifm-color-primary-darkest);
+ color: var(--ifm-color-primary-lightest);
+}
+
+/* Responsive */
+@media screen and (max-width: 768px) {
+ .slide-index__grid {
+ grid-template-columns: 1fr;
+ }
+
+ .slide-index__card-content {
+ padding: 1rem;
+ }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .slide-index__card {
+ transition: none;
+ }
+
+ .slide-index__card:hover {
+ transform: none;
+ }
+}
diff --git a/src/components/SlideDeck/SlideIndex.tsx b/src/components/SlideDeck/SlideIndex.tsx
new file mode 100644
index 000000000..3879a333b
--- /dev/null
+++ b/src/components/SlideDeck/SlideIndex.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import type { SlideIndexProps, SlideDeckMeta } from './types';
+import './SlideIndex.css';
+
+function SlideCard({ deck }: { deck: SlideDeckMeta }) {
+ return (
+
+ {deck.thumbnail && (
+
+ 
+
+ )}
+
+
+
+ );
+}
+
+export function SlideIndex({ decks, className = '' }: SlideIndexProps) {
+ if (decks.length === 0) {
+ return (
+ {deck.title}
+{deck.description}
+
+ {deck.slideCount} slides
+ {deck.tags && deck.tags.length > 0 && (
+
+
+ {deck.tags.map((tag, index) => (
+ {tag}
+ ))}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ No slide decks available.
+
+
+ );
+}
+
+export default SlideIndex;
diff --git a/src/components/SlideDeck/SlideList.tsx b/src/components/SlideDeck/SlideList.tsx
new file mode 100644
index 000000000..80975d398
--- /dev/null
+++ b/src/components/SlideDeck/SlideList.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SlideListProps } from './types';
+
+export function SlideList({ children, ordered = false, className = '' }: SlideListProps) {
+ const Tag = ordered ? 'ol' : 'ul';
+ return (
+
+ {decks.map((deck) => (
+
+
+
+
+
+
+ Speaker Notes
+
+ {/* Position toggle */}
+
+
+
+
+ {/* Display mode toggle */}
+
+
+
+
+ {/* Popout button - desktop only */}
+ {!isMobile && (
+
+
+
+ )}
+
+ {/* Close button */}
+
+
+
+ {currentNotes ? (
+
+
+ {currentNotes}
+
+ ) : (
+
+
+ )}
+ No speaker notes for slide {currentSlide}.
+
+
+
+
+ 📝 Speaker Notes
+
+
+
+
+
+
+
+
+ `);
+ popout.document.close();
+
+ // Immediately update with current slide state (avoids "Loading..." flash).
+ // Use setTimeout to ensure DOM is ready after document.close().
+ setTimeout(() => {
+ if (popout && !popout.closed) {
+ updatePopoutContent(popout);
+ }
+ }, 0);
+
+ // Handle popout window being closed by user.
+ const checkClosed = setInterval(() => {
+ if (popout.closed) {
+ clearInterval(checkClosed);
+ setNotesPopout(false);
+ }
+ }, 500);
+
+ return () => {
+ clearInterval(checkClosed);
+ };
+ }, [notesPreferences.isPopout, setNotesPopout]);
+
+ // Update the popout window content when notes change.
+ useEffect(() => {
+ if (!notesPreferences.isPopout || !popoutWindowRef.current || popoutWindowRef.current.closed) {
+ return;
+ }
+
+ updatePopoutContent(popoutWindowRef.current);
+ }, [currentSlide, totalSlides, currentNotes, notesPreferences.isPopout]);
+
+ // This component doesn't render anything in the main window.
+ return null;
+}
+
+export default SlideNotesPopout;
diff --git a/src/components/SlideDeck/SlideSplit.tsx b/src/components/SlideDeck/SlideSplit.tsx
new file mode 100644
index 000000000..1c2202d50
--- /dev/null
+++ b/src/components/SlideDeck/SlideSplit.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SlideSplitProps } from './types';
+
+export function SlideSplit({ children, ratio = '1:1', className = '' }: SlideSplitProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default SlideSplit;
diff --git a/src/components/SlideDeck/SlideSubtitle.tsx b/src/components/SlideDeck/SlideSubtitle.tsx
new file mode 100644
index 000000000..be5dff8fc
--- /dev/null
+++ b/src/components/SlideDeck/SlideSubtitle.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SlideSubtitleProps } from './types';
+
+export function SlideSubtitle({ children, className = '' }: SlideSubtitleProps) {
+ return (
+ + {children} +
+ ); +} + +export default SlideSubtitle; diff --git a/src/components/SlideDeck/SlideTitle.tsx b/src/components/SlideDeck/SlideTitle.tsx new file mode 100644 index 000000000..540cf6210 --- /dev/null +++ b/src/components/SlideDeck/SlideTitle.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import type { SlideTitleProps } from './types'; + +export function SlideTitle({ children, className = '' }: SlideTitleProps) { + return ( ++ {children} +
+ ); +} + +export default SlideTitle; diff --git a/src/components/SlideDeck/TTSPlayer.css b/src/components/SlideDeck/TTSPlayer.css new file mode 100644 index 000000000..061e9d1f6 --- /dev/null +++ b/src/components/SlideDeck/TTSPlayer.css @@ -0,0 +1,201 @@ +.tts-player { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: #f5f6f7; + background: var(--ifm-background-surface-color, #f5f6f7); + border-top: 1px solid var(--ifm-color-emphasis-200); +} + +html[data-theme='dark'] .tts-player, +.slide-deck--fullscreen .tts-player { + background: rgba(26, 26, 46, 0.95); + border-top-color: rgba(255, 255, 255, 0.1); +} + +.tts-player__btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + background: var(--ifm-color-emphasis-200); + color: var(--ifm-font-color-base); + cursor: pointer; + transition: all 0.15s ease; + flex-shrink: 0; +} + +.tts-player__btn:hover:not(:disabled) { + background: var(--ifm-color-primary); + color: white; +} + +.tts-player__btn--play { + width: 40px; + height: 40px; + background: var(--ifm-color-primary); + color: white; +} + +.tts-player__btn--play:hover:not(:disabled) { + background: var(--ifm-color-primary-dark); +} + +.tts-player__btn:disabled { + opacity: 0.5; + cursor: wait; +} + +.tts-player__btn--muted { + color: var(--ifm-color-danger); +} + +.tts-player__btn--muted:hover:not(:disabled) { + background: var(--ifm-color-danger); + color: white; +} + +html[data-theme='dark'] .tts-player__btn, +.slide-deck--fullscreen .tts-player__btn { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); +} + +html[data-theme='dark'] .tts-player__btn:hover:not(:disabled), +.slide-deck--fullscreen .tts-player__btn:hover:not(:disabled) { + background: var(--ifm-color-primary); + color: white; +} + +html[data-theme='dark'] .tts-player__btn--play, +.slide-deck--fullscreen .tts-player__btn--play { + background: var(--ifm-color-primary); + color: white; +} + +.tts-player__spin { + animation: tts-spin 1s linear infinite; +} + +@keyframes tts-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.tts-player__progress { + flex: 1; + height: 6px; + min-width: 80px; + background: var(--ifm-color-emphasis-200); + border-radius: 3px; + cursor: pointer; + overflow: hidden; + position: relative; +} + +html[data-theme='dark'] .tts-player__progress, +.slide-deck--fullscreen .tts-player__progress { + background: rgba(255, 255, 255, 0.15); +} + +.tts-player__progress:hover { + height: 8px; +} + +.tts-player__progress-fill { + height: 100%; + background: var(--ifm-color-primary); + transition: width 0.1s linear; + border-radius: 3px; +} + +.tts-player__time { + font-size: 0.75rem; + font-variant-numeric: tabular-nums; + color: var(--ifm-color-emphasis-600); + min-width: 70px; + text-align: center; + flex-shrink: 0; +} + +html[data-theme='dark'] .tts-player__time, +.slide-deck--fullscreen .tts-player__time { + color: rgba(255, 255, 255, 0.6); +} + +.tts-player__select { + padding: 0.25rem 0.5rem; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 4px; + background: var(--ifm-background-color); + color: var(--ifm-font-color-base); + font-size: 0.75rem; + cursor: pointer; + flex-shrink: 0; +} + +.tts-player__select:focus { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 1px; +} + +html[data-theme='dark'] .tts-player__select, +.slide-deck--fullscreen .tts-player__select { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + color: white; +} + +.tts-player__error { + color: var(--ifm-color-danger); + font-size: 0.75rem; + flex-shrink: 0; +} + +/* Mobile adjustments */ +@media (max-width: 768px) { + .tts-player { + flex-wrap: wrap; + gap: 0.375rem; + padding: 0.375rem 0.5rem; + } + + .tts-player__btn--play { + width: 36px; + height: 36px; + } + + .tts-player__btn { + width: 28px; + height: 28px; + } + + .tts-player__progress { + order: 5; + flex-basis: 100%; + margin: 0.25rem 0; + } + + .tts-player__time { + order: 6; + flex-basis: 100%; + text-align: center; + min-width: auto; + } + + .tts-player__select { + font-size: 0.7rem; + padding: 0.2rem 0.4rem; + } +} + +/* Very small screens */ +@media (max-width: 480px) { + .tts-player__select { + max-width: 60px; + } +} diff --git a/src/components/SlideDeck/TTSPlayer.tsx b/src/components/SlideDeck/TTSPlayer.tsx new file mode 100644 index 000000000..d4858b4b9 --- /dev/null +++ b/src/components/SlideDeck/TTSPlayer.tsx @@ -0,0 +1,221 @@ +import React from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + RiPlayLine, + RiPauseLine, + RiStopLine, + RiLoader4Line, + RiVolumeMuteLine, + RiVolumeUpLine, +} from 'react-icons/ri'; +import type { TTSVoice, UseTTSReturn } from './useTTS'; +import { Tooltip } from './Tooltip'; +import './TTSPlayer.css'; + +interface TTSPlayerProps { + tts: UseTTSReturn; + currentSlide: number; + onStop?: () => void; + onPause?: () => void; + onResume?: () => void; +} + +const VOICES: { value: TTSVoice; label: string }[] = [ + { value: 'alloy', label: 'Alloy' }, + { value: 'echo', label: 'Echo' }, + { value: 'fable', label: 'Fable' }, + { value: 'nova', label: 'Nova' }, + { value: 'onyx', label: 'Onyx' }, + { value: 'shimmer', label: 'Shimmer' }, +]; + +const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2]; + +/** + * TTSPlayer - A full-featured audio player bar for TTS playback. + * + * Features: + * - Play/Pause/Stop controls + * - Mute toggle + * - Progress bar with seek + * - Speed selector + * - Voice selector + */ +export function TTSPlayer({ tts, currentSlide, onStop, onPause, onResume }: TTSPlayerProps) { + const { + isPlaying, + isLoading, + isPaused, + isMuted, + error, + progress, + duration, + currentTime, + voice, + playbackRate, + play, + pause, + resume, + stop, + seek, + toggleMute, + setVoice, + setPlaybackRate, + } = tts; + + const handlePlayPause = () => { + if (isPlaying) { + onPause ? onPause() : pause(); + } else if (isPaused) { + onResume ? onResume() : resume(); + } else { + play(currentSlide); + } + }; + + const handleStop = () => { + onStop ? onStop() : stop(); + }; + + const handleProgressClick = (e: React.MouseEvent
+
+
+
+ {/* Time Display */}
+
+ {formatTime(currentTime)} / {formatTime(duration)}
+
+
+ {/* Speed Selector */}
+
+ {children}
+
+ {isVisible && (
+
+ {content}
+
+ )}
+
+
+ );
+}
+
+export default Tooltip;
diff --git a/src/components/SlideDeck/index.tsx b/src/components/SlideDeck/index.tsx
new file mode 100644
index 000000000..5436cbdba
--- /dev/null
+++ b/src/components/SlideDeck/index.tsx
@@ -0,0 +1,57 @@
+// Main exports for SlideDeck component library.
+import './SlideDeck.css';
+import './Slide.css';
+import './SlideIndex.css';
+import './SlideContent.css';
+import './SlideDrawer.css';
+import './SlideImage.css';
+import './SlideNotes.css';
+import './Tooltip.css';
+import './TTSPlayer.css';
+
+export { SlideDeck } from './SlideDeck';
+export { Slide } from './Slide';
+export { SlideTitle } from './SlideTitle';
+export { SlideSubtitle } from './SlideSubtitle';
+export { SlideContent } from './SlideContent';
+export { SlideList } from './SlideList';
+export { SlideCode } from './SlideCode';
+export { SlideImage } from './SlideImage';
+export { SlideSplit } from './SlideSplit';
+export { SlideIndex } from './SlideIndex';
+export { SlideDrawer } from './SlideDrawer';
+export { SlideNotes } from './SlideNotes';
+export { SlideNotesPanel } from './SlideNotesPanel';
+export { SlideNotesPopout } from './SlideNotesPopout';
+export { TTSPlayer } from './TTSPlayer';
+export { Tooltip } from './Tooltip';
+
+// Context exports for advanced usage.
+export { SlideDeckProvider, useSlideDeck } from './SlideDeckContext';
+
+// Hook exports.
+export { useTTS } from './useTTS';
+
+// Type exports.
+export type {
+ SlideDeckProps,
+ SlideProps,
+ SlideTitleProps,
+ SlideSubtitleProps,
+ SlideContentProps,
+ SlideListProps,
+ SlideCodeProps,
+ SlideImageProps,
+ SlideSplitProps,
+ SlideLayout,
+ SlideDeckContextValue,
+ SlideDeckMeta,
+ SlideIndexProps,
+ SlideNotesProps,
+ SlideNotesPanelProps,
+ NotesPosition,
+ NotesDisplayMode,
+ NotesPreferences,
+} from './types';
+
+export type { TTSVoice, UseTTSReturn } from './useTTS';
diff --git a/src/components/SlideDeck/types.ts b/src/components/SlideDeck/types.ts
new file mode 100644
index 000000000..76d100c55
--- /dev/null
+++ b/src/components/SlideDeck/types.ts
@@ -0,0 +1,135 @@
+import React, { ReactNode } from 'react';
+
+// Slide layout variants.
+export type SlideLayout = 'title' | 'content' | 'split' | 'code' | 'quote';
+
+// Notes panel position.
+export type NotesPosition = 'right' | 'bottom';
+
+// Notes display mode.
+export type NotesDisplayMode = 'overlay' | 'shrink';
+
+// Notes preferences stored in localStorage.
+export interface NotesPreferences {
+ position: NotesPosition;
+ displayMode: NotesDisplayMode;
+ isPopout: boolean;
+}
+
+// Props for the SlideDeck container component.
+export interface SlideDeckProps {
+ children: ReactNode;
+ title?: string;
+ showProgress?: boolean;
+ showNavigation?: boolean;
+ showFullscreen?: boolean;
+ showDrawer?: boolean;
+ startSlide?: number;
+ className?: string;
+}
+
+// Props for individual Slide components.
+export interface SlideProps {
+ children: ReactNode;
+ layout?: SlideLayout;
+ background?: string;
+ className?: string;
+}
+
+// Props for SlideTitle component.
+export interface SlideTitleProps {
+ children: ReactNode;
+ className?: string;
+}
+
+// Props for SlideSubtitle component.
+export interface SlideSubtitleProps {
+ children: ReactNode;
+ className?: string;
+}
+
+// Props for SlideContent component.
+export interface SlideContentProps {
+ children: ReactNode;
+ className?: string;
+}
+
+// Props for SlideList component.
+export interface SlideListProps {
+ children: ReactNode;
+ ordered?: boolean;
+ className?: string;
+}
+
+// Props for SlideCode component.
+export interface SlideCodeProps {
+ children: string;
+ language?: string;
+ showLineNumbers?: boolean;
+ className?: string;
+}
+
+// Props for SlideImage component.
+export interface SlideImageProps {
+ src: string;
+ alt: string;
+ className?: string;
+ width?: number | string;
+ height?: number | string;
+ metallic?: boolean;
+}
+
+// Props for SlideSplit component.
+export interface SlideSplitProps {
+ children: ReactNode;
+ ratio?: '1:1' | '1:2' | '2:1';
+ className?: string;
+}
+
+// Context for slide navigation state.
+export interface SlideDeckContextValue {
+ currentSlide: number;
+ totalSlides: number;
+ goToSlide: (index: number) => void;
+ nextSlide: () => void;
+ prevSlide: () => void;
+ isFullscreen: boolean;
+ toggleFullscreen: () => void;
+ showNotes: boolean;
+ toggleNotes: () => void;
+ currentNotes: React.ReactNode | null;
+ setCurrentNotes: (notes: React.ReactNode | null) => void;
+ // Notes preferences.
+ notesPreferences: NotesPreferences;
+ setNotesPosition: (position: NotesPosition) => void;
+ setNotesDisplayMode: (mode: NotesDisplayMode) => void;
+ setNotesPopout: (isPopout: boolean) => void;
+ isMobile: boolean;
+}
+
+// Metadata for slide deck index page.
+export interface SlideDeckMeta {
+ title: string;
+ description: string;
+ thumbnail?: string;
+ slideCount: number;
+ tags?: string[];
+ slug: string;
+}
+
+// Props for SlideIndex component.
+export interface SlideIndexProps {
+ decks: SlideDeckMeta[];
+ className?: string;
+}
+
+// Props for SlideNotes component.
+export interface SlideNotesProps {
+ children: ReactNode;
+}
+
+// Props for SlideNotesPanel component.
+export interface SlideNotesPanelProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
diff --git a/src/components/SlideDeck/useTTS.ts b/src/components/SlideDeck/useTTS.ts
new file mode 100644
index 000000000..49680d88e
--- /dev/null
+++ b/src/components/SlideDeck/useTTS.ts
@@ -0,0 +1,408 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export type TTSVoice = 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+
+interface UseTTSOptions {
+ deckName: string;
+ onEnded?: () => void; // Callback when audio finishes.
+}
+
+export interface UseTTSReturn {
+ // State.
+ isPlaying: boolean;
+ isLoading: boolean;
+ isPaused: boolean;
+ isMuted: boolean;
+ error: string | null;
+ progress: number; // 0-100.
+ duration: number; // seconds.
+ currentTime: number; // seconds.
+ voice: TTSVoice;
+ playbackRate: number;
+
+ // Actions.
+ play: (slideNumber: number) => Promise