skills/nexu-io__open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-09-20 06:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
chore/plugin-previews
nexu-io__open-design/plugins/_official/examples/html-ppt-testing-safety-alert/example.html
T
Tom Huang bc6a246c65 feat(slides): enhance deck project experience (#5083) 
* feat(deck): enhance slide deck functionality with speaker notes and navigation improvements

- Added a switch for including speaker notes in slide decks, defaulting to true.
- Updated keyboard navigation to include 'R' for resetting to the first slide.
- Implemented click navigation for half-slide transitions.
- Enhanced the deck framework to support hidden programmatic prev/next controls.
- Improved handling of file inputs in question forms to support file submissions.

This update aims to improve user experience in creating and presenting slide decks, ensuring better accessibility and functionality.

* feat(artifacts): enforce semantic naming for user-facing deliverables

- Updated guidelines to require semantic filenames derived from user briefs for new artifacts, moving away from defaulting to `index.html`.
- Enhanced documentation to clarify naming conventions for HTML files, emphasizing the use of descriptive names like `investor-pitch-deck.html`.
- Adjusted prompts and hints across the system to reflect these changes, ensuring consistency in user-facing outputs.
- Improved test coverage to validate the new naming conventions and ensure proper implementation in various contexts.

This update aims to enhance clarity and usability in project file management, promoting better organization and user experience.

* feat(file-viewer): enhance speaker notes display and improve file workspace functionality

- Updated the speaker notes section to include a styled placeholder for empty notes, improving user experience.
- Changed the icon in the file workspace from "slides" to "panel-left" for better clarity.
- Introduced new sub-category filtering options in the file workspace, enhancing organization and navigation.
- Improved styling for the page creator search input and added visual feedback for loading states.

These changes aim to enhance usability and visual consistency across the file viewer and workspace components.

* test(web): align workspace tests with pages switcher

* test(e2e): open design files through pages menu

* fix(deck): keep source mode reachable

* fix(workspace): restore uploaded file tabs

* feat(deck-thumbnail): implement virtualized thumbnail rail for improved performance

- Introduced a new `DeckThumbnailRail` component to optimize the rendering of deck thumbnails, reducing memory usage and improving load times.
- Enhanced the `FileViewer` to integrate the new thumbnail rail, allowing for lazy loading of thumbnails based on viewport visibility.
- Added tests for the `DeckThumbnailRail` to ensure correct functionality and caching behavior.
- Updated styles for better visual consistency and performance during thumbnail rendering.

These changes aim to enhance user experience by providing a smoother and more efficient way to navigate through deck slides.

* feat(deck): enhance deck rendering with thumbnail support and keyboard shortcuts

- Integrated `DeckSlideThumbnail` for rendering individual slides in a shadow root, improving performance and reducing main-thread load.
- Updated `DeckThumbnailRail` to utilize the new thumbnail component, allowing for efficient slide navigation.
- Implemented keyboard shortcuts for deck navigation, enhancing user experience during presentations.
- Added tests for `buildDeckRenderInput` to ensure proper functionality of the deck stage fallback.
- Improved styling for loading states in the viewer, providing a smoother visual experience.

These changes aim to optimize the deck viewing experience by reducing resource consumption and enhancing interactivity.

* feat(deck): improve thumbnail loading and speaker notes editing experience

- Refactored `DeckSlideThumbnail` to enhance loading states with a new shimmer effect, improving visual feedback during thumbnail rendering.
- Updated `DeckThumbnailRail` to manage loading states for thumbnails, ensuring a smoother user experience.
- Simplified the speaker notes editing interface by removing the toggle switch, allowing direct editing from the notes body.
- Enhanced accessibility by adding roles and focus states to speaker notes elements.
- Added tests to verify the new loading states and speaker notes functionality.

These changes aim to optimize the user experience in deck navigation and speaker notes management, providing a more intuitive and responsive interface.

* feat(file-viewer): enhance version export functionality and speaker notes interaction

- Introduced new export options for file versions, including PDF and image formats, improving the ability to download and share content.
- Implemented a streamlined process for exporting version content, with progress indicators and error handling for a better user experience.
- Enhanced speaker notes editing by refining event handling to prevent unintended focus shifts, ensuring a smoother editing experience.
- Updated styles for improved visual consistency in the file version download interface.
- Added tests to verify the functionality of version exports and speaker notes interactions.

These changes aim to optimize the file viewer's usability and enhance the overall experience when managing and exporting project files.

* fix(web): polish export menus and creator filters

* fix(file-viewer): fall back to preview exports

* test(file-viewer): cover version export fallbacks

* test(file-viewer): assert loading skeleton by role

* fix(file-viewer): restore html source mode affordance

* fix(file-viewer): capture full version fallback snapshots

* docs: trim slides handoff eof

* test(exports): cover full preview snapshot requests

* test(file-viewer): account for snapshot options arg

* refactor(file-viewer, file-workspace): streamline export functions and enhance page creator dialog visibility

* test(file-workspace): enhance slide template creation and mock plugin responses

* feat(export): add support for versioned exports and enhance HTML export functionality

* feat(export): implement versioned export support across multiple formats and enhance related tests

* feat(file-viewer): enhance manual edit functionality with commit sequence tracking and add test for inline text session saving

* style(speaker-notes): update filmstrip and thumb-frame styles for improved responsiveness and add corresponding tests

* feat(file-viewer): enhance comment composer functionality with portal metrics and improve draw toolbar layout for mobile views

* feat(analytics): track slide deck viewing experience

Add analytics for the new deck/slides experience introduced in this PR:
the deck viewer surface, in-deck slide navigation, thumbnail rail, and
speaker-notes authoring. Presentation entry stays on the existing
present_popover click to avoid double-counting.

- contracts: DeckViewerSurfaceViewProps (surface_view),
  DeckViewerClickProps (ui_click), SpeakerNotesSaveResultProps
  (new speaker_notes_save_result event), wired into the event unions.
- web: track* wrappers + fire helpers in FileViewer — deck_viewer
  surface_view on deck mount, slide_prev/next/reset, thumbnail_select,
  thumbnail_rail_toggle (expand/collapse), speaker_notes_edit, and
  speaker_notes_save_result (preview + presenter surfaces).
- tests: deck analytics suite asserting the emitted (event, props) pairs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(file-viewer, file-workspace): enhance export toast functionality and improve localization for page creation

* feat(home-view, plugins-home-section, agent-skill): update default facet preference, enhance category selection handling, and improve localization support

- Set `preferDefaultFacet` to true in HomeView component for better user experience.
- Introduced `handlePickCategory` function in PluginsHomeSection to manage category selection based on card layout visibility.
- Updated PRIMARY_CATEGORIES to reflect the new order and added localization for titles and descriptions in adaptAgentSkill.
- Enhanced tests to verify the correct handling of display copy and tags from SKILL frontmatter.

* feat(plugins-home, file-workspace): introduce commercial category labels and enhance deck handling

- Added a new module for resolving and localizing commercial category labels for plugins.
- Updated the FileWorkspace and PluginCard components to display the commercial category label on deck cards.
- Enhanced the PageCreatorPresetFrame to adjust frame classes based on deck presets.
- Refactored subcategory handling in facets to align with the new commercial category taxonomy.
- Improved localization support for new category labels across multiple languages.

* feat(deck-preview): implement deck preview scaling and enhance home hero layout

- Introduced `useDeckPreviewScale` hook to manage scaling of deck previews within a fixed 1280×720 logical viewport, ensuring proportional rendering across various templates.
- Updated `FileWorkspace`, `HomeHero`, and `PluginCard` components to utilize the new scaling functionality for improved visual consistency.
- Enhanced the layout of the home hero section to accommodate new subtype chips and descriptions, including a "More" dropdown for overflow handling.
- Improved localization support for new UI elements across multiple languages.

* fix(PreviewModal): clarify sidebar prop documentation and update test description

- Updated the documentation for the `PreviewSidebar` interface to specify that the sidebar's stage-edge handles are not shown when the sidebar prop is absent.
- Modified the test suite description for `PreviewModal` to be more concise and relevant.

* test(e2e): select prototype visual card

---------

Co-authored-by: free666799 <293857035+free666799@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-10 09:41:47 +00:00

411 lines
28 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brief a Health-System Board on Data Governance like a Chief Compliance Officer - Government &amp; policy</title>
<style>/* html-ppt :: shared webfonts (only families actually used by this deck) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
</style>
<style>/* html-ppt :: base.css — reset + shared tokens + layout primitives */
/* Default tokens. Themes in assets/themes/*.css override the :root block. */
:root {
--bg: #ffffff;
--bg-soft: #f7f7f8;
--surface: #ffffff;
--surface-2: #f2f2f4;
--border: rgba(0,0,0,.08);
--border-strong: rgba(0,0,0,.16);
--text-1: #111216;
--text-2: #55596a;
--text-3: #8a8f9e;
--accent: #c11f33;
--accent-2: #c11f33;
--accent-3: #b45309;
--good: #1a7a4d;
--warn: #b45309;
--bad: #c11f33;
--grad: none;
--grad-soft: none;
--radius: 4px;
--radius-sm: 3px;
--radius-lg: 6px;
--shadow: none;
--shadow-lg: none;
--font-sans: 'Archivo',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
--font-serif: Georgia,serif;
--font-mono: 'IBM Plex Mono',SFMono-Regular,Menlo,monospace;
--font-display: var(--font-sans);
--letter-tight: -.03em;
--letter-normal: -.01em;
--ease: cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
font-family:var(--font-sans);font-weight:400;line-height:1.6;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
letter-spacing:var(--letter-normal)}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,samp{font-family:var(--font-mono)}
/* ================= SLIDE SYSTEM ================= */
.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
.slide{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;
padding:72px 96px;
box-sizing:border-box;
opacity:0;pointer-events:none;
transition:opacity .5s var(--ease), transform .5s var(--ease);
transform:translateX(30px);
overflow:hidden;
}
.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
.slide.is-prev{transform:translateX(-30px)}
/* single-page standalone (used when a layout file is opened directly) */
body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
/* ================= TYPOGRAPHY ================= */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
h1.title,.h1{font-family:var(--font-display);font-size:72px;line-height:1.05;font-weight:800;letter-spacing:var(--letter-tight);margin:0 0 18px;color:var(--text-1)}
h2.title,.h2{font-family:var(--font-display);font-size:54px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px}
h3,.h3{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 10px}
h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
.lede{font-size:22px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
.dim{color:var(--text-2)}
.dim2{color:var(--text-3)}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* ================= LAYOUT PRIMITIVES ================= */
.stack>*+*{margin-top:14px}
.row{display:flex;gap:24px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{display:flex;align-items:center;justify-content:center;text-align:center}
.fill{flex:1}
.sp-t{padding-top:24px}.sp-b{padding-bottom:24px}
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
.mb-s{margin-bottom:8px}.mb-m{margin-bottom:18px}.mb-l{margin-bottom:32px}
/* ================= CARDS ================= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card-soft{background:var(--surface-2);border:1px solid var(--border)}
.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
.card-accent{background:var(--surface);border-top:3px solid var(--accent)}
.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;
background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
/* ================= BARS / DIVIDERS ================= */
.divider{height:1px;background:var(--border);width:100%}
.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
/* ================= CHROME (header/footer/progress) ================= */
.deck-header{position:absolute;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
font-size:12px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
.deck-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
font-size:12px;color:var(--text-3);z-index:10;pointer-events:none}
.slide-number::before{content:attr(data-current)}
.slide-number::after{content:" / " attr(data-total)}
.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:20}
.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
/* ================= PRESENTER / OVERVIEW ================= */
.notes{display:none!important}
.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
padding:20px 32px;font-size:16px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
.notes-overlay.open{transform:translateY(0)}
.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
display:none;padding:40px;overflow:auto}
.overview.open{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start}
.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:12px;
aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:16px;
font-size:11px;transition:transform .2s var(--ease)}
.overview .thumb:hover{transform:scale(1.04)}
.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
/* ================= PRESENTER VIEW ================= */
/* Presenter view opens in a separate popup window (S key).
* All presenter styles are self-contained in the popup HTML generated by runtime.js.
* The audience window (this file) is NOT affected — it stays as normal deck view.
* Only the .notes class below is needed to hide speaker notes from audience. */
/* ================= UTILITY ================= */
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
.uppercase{text-transform:uppercase;letter-spacing:.12em}
/* ================= PRINT ================= */
@media print{
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
.deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
}
</style>
<style>/* testing-safety-alert — industrial warning-sign style · hazard stripes + red/amber/green signal system
polish pass: Archivo replaces Inter; removed glow shadows / gradient-fill cards; radii tightened to 3-6px;
checklist switched to hairline groups; mono for chrome/labels; contrast raised above AA */
.tpl-testing-safety-alert{
--ts-bg:#f7f5f0;
--ts-ink:#15151a;
--ts-ink2:#43434d;
--ts-muted:#73737d;
--ts-line:rgba(21,21,26,.14);
--ts-line-strong:rgba(21,21,26,.32);
--ts-red:#c11f33;
--ts-red-soft:#f8e9ea;
--ts-amber:#a85408;
--ts-amber-soft:#f7eedd;
--ts-green:#1a6b45;
--ts-green-soft:#e7f1e9;
background:var(--ts-bg);
color:var(--ts-ink);
font-family:'Archivo',-apple-system,sans-serif;
}
.tpl-testing-safety-alert .slide{background:var(--ts-bg);color:var(--ts-ink);padding:64px 84px}
.tpl-testing-safety-alert .ts-stripe{position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(45deg,var(--ts-red) 0 18px,#15151a 18px 36px)}
.tpl-testing-safety-alert .ts-stripe-b{position:absolute;bottom:0;left:0;right:0;height:5px;background:repeating-linear-gradient(45deg,var(--ts-red) 0 10px,#15151a 10px 20px);opacity:.55}
.tpl-testing-safety-alert .ts-chrome{display:flex;justify-content:space-between;align-items:center;margin:22px 0 16px}
.tpl-testing-safety-alert .ts-alert-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:3px;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;background:var(--ts-red);color:#fff}
.tpl-testing-safety-alert .ts-alert-tag::before{content:'⚠\FE0E';font-size:15px}
.tpl-testing-safety-alert .ts-alert-tag.amber{background:var(--ts-amber)}
.tpl-testing-safety-alert .ts-alert-tag.green{background:var(--ts-green)}
.tpl-testing-safety-alert .ts-alert-tag.green::before{content:'✓'}
.tpl-testing-safety-alert .ts-page{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ts-muted);letter-spacing:.15em;font-weight:500}
.tpl-testing-safety-alert .ts-kicker{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--ts-red);letter-spacing:.1em;margin-bottom:10px;text-transform:uppercase}
.tpl-testing-safety-alert .ts-h1{font-size:clamp(56px,9.5vh,72px);font-weight:800;line-height:1.08;letter-spacing:-.028em;margin:8px 0 14px;color:var(--ts-ink)}
.tpl-testing-safety-alert .ts-h1 .red{color:var(--ts-red)}
.tpl-testing-safety-alert .ts-h1 .strike{position:relative;display:inline-block}
.tpl-testing-safety-alert .ts-h1 .strike::after{content:'';position:absolute;left:-3%;right:-3%;top:52%;height:9px;background:var(--ts-red);transform:skewX(-12deg)}
.tpl-testing-safety-alert .ts-h2{font-size:52px;font-weight:800;line-height:1.06;letter-spacing:-.024em;margin:0 0 14px}
.tpl-testing-safety-alert .ts-sub{font-size:19px;line-height:1.55;color:var(--ts-ink2);max-width:62ch;margin-top:8px}
.tpl-testing-safety-alert .ts-highlight-red{display:inline-block;padding:3px 13px;background:var(--ts-red);color:#fff;border-radius:3px;font-weight:800}
.tpl-testing-safety-alert .ts-highlight-amber{display:inline-block;padding:3px 13px;background:var(--ts-amber-soft);color:var(--ts-amber);border-radius:3px;font-weight:800;border:1px solid var(--ts-amber)}
.tpl-testing-safety-alert .ts-highlight-green{display:inline-block;padding:3px 13px;background:var(--ts-green-soft);color:var(--ts-green);border-radius:3px;font-weight:800;border:1px solid var(--ts-green)}
.tpl-testing-safety-alert .ts-alert-box{border:1.5px solid var(--ts-red);border-left-width:8px;border-radius:4px;padding:20px 26px;background:var(--ts-red-soft);margin-top:22px;position:relative}
.tpl-testing-safety-alert .ts-alert-box.amber{border-color:var(--ts-amber);background:var(--ts-amber-soft)}
.tpl-testing-safety-alert .ts-alert-box.green{border-color:var(--ts-green);background:var(--ts-green-soft)}
.tpl-testing-safety-alert .ts-alert-box h3{font-size:27px;font-weight:800;letter-spacing:-.015em;margin:0 0 8px}
.tpl-testing-safety-alert .ts-alert-box p{font-size:16px;line-height:1.55;color:var(--ts-ink2);margin:0;max-width:65ch}
.tpl-testing-safety-alert .ts-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.tpl-testing-safety-alert .ts-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.tpl-testing-safety-alert .ts-card{border:1px solid var(--ts-line);border-radius:4px;padding:22px 24px;background:#fdfcfa}
.tpl-testing-safety-alert .ts-card .lbl{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ts-muted);margin-bottom:8px}
.tpl-testing-safety-alert .ts-card h4{font-size:25px;font-weight:800;letter-spacing:-.015em;line-height:1.18;margin-bottom:8px}
.tpl-testing-safety-alert .ts-card p{font-size:14px;color:var(--ts-ink2);line-height:1.55}
.tpl-testing-safety-alert .ts-checklist{display:flex;flex-direction:column;gap:0;margin-top:20px;max-width:920px;border-top:1.5px solid var(--ts-line-strong)}
.tpl-testing-safety-alert .ts-check{display:flex;gap:16px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid var(--ts-line);background:transparent}
.tpl-testing-safety-alert .ts-check .box{flex:0 0 30px;height:30px;border-radius:3px;border:2px solid var(--ts-red);display:grid;place-items:center;font-weight:800;color:var(--ts-red);background:var(--ts-red-soft)}
.tpl-testing-safety-alert .ts-check.ok .box{border-color:var(--ts-green);color:var(--ts-green);background:var(--ts-green-soft)}
.tpl-testing-safety-alert .ts-check .txt{font-size:17.5px;line-height:1.5;font-weight:500;padding-top:2px}
.tpl-testing-safety-alert .ts-codebox{background:#15151a;color:#f3efe6;border-radius:4px;padding:14px 22px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;margin-top:14px;border-left:8px solid var(--ts-red);overflow:hidden}
.tpl-testing-safety-alert .ts-codebox+.ts-stripe-b{display:block}
.tpl-testing-safety-alert .slide:has(.ts-codebox) .ts-h2{font-size:44px;margin-bottom:8px}
.tpl-testing-safety-alert .slide:has(.ts-codebox) .ts-chrome{margin:18px 0 10px}
.tpl-testing-safety-alert .ts-codebox .cm{color:#8d8a82}
.tpl-testing-safety-alert .ts-codebox .kw{color:#f0a36e}
.tpl-testing-safety-alert .ts-codebox .st{color:#a9d9b6}
.tpl-testing-safety-alert .ts-codebox .bad{color:#f08a99;font-weight:700}
.tpl-testing-safety-alert .ts-footer{position:absolute;left:84px;right:84px;bottom:34px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ts-muted);letter-spacing:.08em}
/* Entrance motion: transform/opacity only, staggered delays, reduced-motion fallback */
@keyframes ts-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.tpl-testing-safety-alert .slide>*{animation:ts-rise .6s cubic-bezier(.16,1,.3,1) both}
.tpl-testing-safety-alert .slide>:nth-child(3){animation-delay:.06s}
.tpl-testing-safety-alert .slide>:nth-child(4){animation-delay:.12s}
.tpl-testing-safety-alert .slide>:nth-child(5){animation-delay:.18s}
.tpl-testing-safety-alert .slide>:nth-child(6){animation-delay:.24s}
.tpl-testing-safety-alert .slide>:nth-child(7){animation-delay:.3s}
.tpl-testing-safety-alert .slide>.ts-stripe,
.tpl-testing-safety-alert .slide>.ts-stripe-b,
.tpl-testing-safety-alert .slide>.ts-footer{animation:none}
@media (prefers-reduced-motion:reduce){.tpl-testing-safety-alert .slide>*{animation:none}}
</style>
<style>
/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
.deck{height:auto;min-height:100vh;overflow:visible}
.slide{position:relative;inset:auto;opacity:1;pointer-events:auto;transform:none;height:100vh;page-break-after:always}
.deck-header,.deck-footer,.slide-number,.progress-bar,.notes-overlay,.overview{pointer-events:none}
.notes{display:none!important}
</style></head>
<body class="tpl-testing-safety-alert">
<div class="deck">
<!-- 1. COVER -->
<section class="slide is-active">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag">compliance briefing · board approval requested</span><span class="ts-page">01 / 08</span></div>
<div class="ts-kicker">Meridian Health System · Board Briefing on Data Governance</div>
<h1 class="ts-h1" style="font-size:clamp(40px,7vh,54px)">Stop asking whether AI vendors<br><span class="strike">can be trusted with patient data</span><br><span class="red">Approve a governance framework instead</span></h1>
<p class="ts-sub">In the last six months Meridian shared identifiable patient records with 14 external vendors. Only 3 of those connections sit behind a current Business Associate Agreement mapped to a data-loss-prevention control.</p>
<div class="ts-alert-box">
<h3>What this briefing asks of the board tonight</h3>
<p>Ratify the four-tier Data Governance Framework, suspend the two research pilots operating past their approval date, and authorize the Chief Compliance Officer to shut down non-compliant vendor access without a further board vote.<br><b>Prepared by the Office of Compliance · For board vote</b>.</p>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>MERIDIAN HEALTH SYSTEM · DATA GOVERNANCE BRIEF · 2026</span><span>01 / 08</span></div>
</section>
<!-- 2. SECTION -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag amber">section · data flow</span><span class="ts-page">02 / 08</span></div>
<div style="margin:auto 0">
<div class="ts-kicker">Chapter One</div>
<h1 class="ts-h1" style="font-size:110px">Follow the <span class="red">record</span></h1>
<p class="ts-sub" style="font-size:28px">A single emergency-department visit touches 11 systems before the chart closes.<br>Every hop is a chance for protected health information to leave a controlled boundary.</p>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>section · patient-data flow across the system</span><span>02 / 08</span></div>
</section>
<!-- 3. CONTENT risk levels -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag">exposure levels · 3 tiers</span><span class="ts-page">03 / 08</span></div>
<h2 class="ts-h2">Three data flows, three exposure levels</h2>
<div class="ts-grid-3">
<div class="ts-card" style="border-top:4px solid var(--ts-green)"><div class="lbl">Tier 1 · Green</div><h4>Governed &amp; logged</h4><p>Care-team access inside the electronic health record, role-based, audit-logged, minimum-necessary enforced.<br><b style="color:var(--ts-green)">Risk: acceptable and monitored</b></p></div>
<div class="ts-card" style="border-top:4px solid var(--ts-amber)"><div class="lbl">Tier 2 · Amber</div><h4>Vendor-shared under BAA</h4><p>Imaging AI, billing clearinghouse, population-health analytics — contracts exist but DLP coverage is partial.<br><b style="color:var(--ts-amber)">Risk: contractual, not technical</b></p></div>
<div class="ts-card" style="border-top:4px solid var(--ts-red)"><div class="lbl">Tier 3 · Red</div><h4>Ungoverned pilot access</h4><p>Two research pilots and one care-coordination app pull full records with no BAA renewal on file.<br><b style="color:var(--ts-red)">Risk: reportable breach exposure</b></p></div>
</div>
<div class="ts-alert-box amber">
<h3>162,000 patient records currently sit in Tier 3</h3>
<p>Internal audit (March 2026) found this figure exceeds our entire annual outpatient volume. Remediation is required within 45 days to stay ahead of the next OCR audit cycle.</p>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>exposure levels · 3 tiers</span><span>03 / 08</span></div>
</section>
<!-- 4. CODE -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag">policy as enforcement</span><span class="ts-page">04 / 08</span></div>
<div class="ts-kicker">Don't govern by memo · govern by machine-enforced policy</div>
<h2 class="ts-h2">One access policy, four tiers,<br><span class="ts-highlight-red">enforced at the gateway</span></h2>
<pre class="ts-codebox"><span class="cm"># data-governance-policy.yaml · enforced at the API gateway</span>
<span class="kw">tier_1_internal_clinical</span>:
- systems: [<span class="st">epic_ehr</span>, <span class="st">pharmacy_system</span>]
control: <span class="st">role_based_access + minimum_necessary</span>
<span class="kw">tier_2_vendor_baa</span>:
- systems: [<span class="st">imaging_ai</span>, <span class="st">billing_clearinghouse</span>, <span class="st">population_health</span>]
control: <span class="st">dlp_scan + signed_baa + quarterly_audit</span>
<span class="kw">tier_3_research_pilot</span>:
- systems: [<span class="st">research_registry</span>, <span class="st">care_coordination_app</span>]
control: <span class="st">irb_approval AND deidentification AND 90_day_review</span>
<span class="bad">forbidden_always</span>:
- <span class="bad">"phi export to personal email"</span>
- <span class="bad">"unencrypted usb transfer"</span>
- <span class="bad">"vendor access without a signed baa"</span></pre>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>policy · gateway-enforced tiers</span><span>04 / 08</span></div>
</section>
<!-- 5. CHART -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag amber">evidence · cost of inaction</span><span class="ts-page">05 / 08</span></div>
<h2 class="ts-h2">One settlement costs <span class="red">14x</span> the governance program</h2>
<p class="ts-sub">OCR's 2025 median settlement for uncontrolled vendor access was $4.2M. The proposed governance office costs $310K per year to run.</p>
<svg viewBox="0 0 1040 360" style="width:100%;max-width:1040px;margin-top:18px" xmlns="http://www.w3.org/2000/svg">
<g font-family="Archivo,sans-serif" font-size="14" fill="#43434d">
<line x1="70" y1="320" x2="1000" y2="320" stroke="#15151a" stroke-opacity=".3" stroke-width="1.5"/>
<!-- cost columns: median OCR settlement vs annual governance program cost -->
<g transform="translate(180,0)">
<rect x="0" y="70" width="120" height="250" fill="#c11f33"/>
<text x="60" y="345" text-anchor="middle" font-weight="700">OCR settlement</text>
<text x="60" y="58" text-anchor="middle" font-weight="800" fill="#15151a">$4.2M</text>
</g>
<g transform="translate(460,0)">
<rect x="0" y="298" width="120" height="22" fill="#1a6b45"/>
<text x="60" y="345" text-anchor="middle" font-weight="700">Governance program</text>
<text x="60" y="286" text-anchor="middle" font-weight="800" fill="#15151a">$310K / yr</text>
</g>
<!-- legend -->
<g transform="translate(720,60)">
<rect x="0" y="0" width="16" height="16" fill="#c11f33"/><text x="24" y="13" font-weight="700">Median OCR settlement, uncontrolled access</text>
<rect x="0" y="26" width="16" height="16" fill="#1a6b45"/><text x="24" y="39" font-weight="700">Governance office · annual operating cost</text>
<text x="0" y="74" font-size="13" fill="#73737d">A single prevented incident over a 3-year horizon</text>
<text x="0" y="92" font-size="13" fill="#73737d">pays for the governance program more than 4 times over.</text>
</g>
</g>
</svg>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>evidence · settlement vs program cost</span><span>05 / 08</span></div>
</section>
<!-- 6. CHECKLIST -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag green">risk control checklist</span><span class="ts-page">06 / 08</span></div>
<h2 class="ts-h2">7 controls the board must confirm <span class="red">are in force</span></h2>
<div class="ts-checklist">
<div class="ts-check ok"><div class="box">✓</div><div class="txt">Every Tier 2/3 vendor has a current signed BAA on file, verified quarterly.</div></div>
<div class="ts-check ok"><div class="box">✓</div><div class="txt">DLP scanning blocks PHI leaving the network without exception, logged to the compliance dashboard.</div></div>
<div class="ts-check"><div class="box">!</div><div class="txt">Two research pilots are still operating past their IRB renewal date — access suspended pending board sign-off.</div></div>
<div class="ts-check ok"><div class="box">✓</div><div class="txt">The breach-response runbook designates the CCO as incident commander with a 24-hour OCR notification clock.</div></div>
<div class="ts-check"><div class="box">!</div><div class="txt">Vendor risk assessments are 8 months overdue for 3 of the 14 active integrations.</div></div>
<div class="ts-check ok"><div class="box">✓</div><div class="txt">All care-team access requires MFA and is logged to an immutable audit trail retained for 6 years.</div></div>
<div class="ts-check"><div class="box">!</div><div class="txt">No standing board-level data governance committee currently exists to own this policy after tonight.</div></div>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>checklist · risk controls</span><span>06 / 08</span></div>
</section>
<!-- 7. CTA -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag green">decision requested tonight</span><span class="ts-page">07 / 08</span></div>
<h2 class="ts-h2">Three approvals <span class="ts-highlight-red">the board must give tonight</span></h2>
<div class="ts-grid-3">
<div class="ts-card"><div class="lbl">1 · Approve the framework</div><h4>Ratify the<br>four-tier policy</h4><p>Adopt the Data Governance Framework as binding institutional policy, effective immediately.</p></div>
<div class="ts-card"><div class="lbl">2 · Approve the moratorium</div><h4>Suspend overdue<br>pilots, recertify BAAs</h4><p>Halt the two overdue research pilots and recertify all 14 vendor BAAs within 45 days.</p></div>
<div class="ts-card"><div class="lbl">3 · Approve the committee</div><h4>Charter a standing<br>governance committee</h4><p>Chartered committee chaired by the CCO, reporting quarterly to the full board.</p></div>
</div>
<div class="ts-alert-box green">
<h3>Approval reduces exposure, not optics</h3>
<p>This framework does not eliminate risk. It gives the board a defensible record that Meridian identified its exposure and acted before a regulator had to point it out.</p>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>decision · board approvals</span><span>07 / 08</span></div>
</section>
<!-- 8. THANKS -->
<section class="slide">
<div class="ts-stripe"></div>
<div class="ts-chrome"><span class="ts-alert-tag amber">recorded for the board minutes</span><span class="ts-page">08 / 08</span></div>
<div style="margin:auto 0">
<div class="ts-kicker">Motion to approve the Data Governance Framework</div>
<h1 class="ts-h1" style="font-size:120px">so <span class="red">·</span> moved</h1>
<p class="ts-sub" style="font-size:24px">Framework effective today · Vendor recertification due in 45 days · Committee's first report due next quarter.</p>
</div>
<div class="ts-stripe-b"></div>
<div class="ts-footer"><span>end of briefing</span><span>08 / 08</span></div>
</section>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink