@universal-ember/docs-support 0.9.1 → 0.9.3

package/README.md

@@ -2,5 +2,4 @@
 
 These are public, and initially lived in ember-primitives directly, but were extracted due to being useful outside of ember-primitives.
 
-
 They are still tested in the main test-app though, just to keep the infrastructure in this repo simpler.

package/declarations/errors.d.ts

@@ -1,7 +1,7 @@
 import type { TOC } from '@ember/component/template-only';
 export declare const OopsError: TOC<{
     Args: {
-        error: string;
+        error: any;
     };
     Blocks: {
         default: [];

package/declarations/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.gts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,EAAE,GAAG,CAAC;IAC1B,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CA4BC,CAAC"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.gts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,EAAE,GAAG,CAAC;IAC1B,IAAI,EAAE;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC;IACrB,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CA+BC,CAAC"}

package/declarations/index.d.ts

@@ -5,7 +5,7 @@ export { H2 } from './h2';
 export { IndexPage } from './index-page';
 export { InternalLink, Link } from './links';
 export { ResponsiveMenuLayout } from './menu-layout';
-export { PageLayout, TopRight } from './page-layout';
+export { hasReason, PageError, PageLayout, PageLoader, TopRight } from './page-layout';
 export { Shell } from './shell';
 export { Text } from './text';
 export { ThemeToggle } from './theme-toggle';

package/declarations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.gts"],"names":[],"mappings":"AAWA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAC,IAAI,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.gts"],"names":[],"mappings":"AAWA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/declarations/page-layout.d.ts

@@ -1,10 +1,30 @@
 import type { TOC } from '@ember/component/template-only';
+export declare const PageLoader: TOC<{
+    Blocks: {
+        defaultl: [];
+    };
+}>;
+export declare function hasReason(error: unknown): error is {
+    reason: string;
+    original: Error;
+};
+export declare const PageError: TOC<{
+    Args: {
+        error: string | {
+            reason: string;
+            original: Error;
+        };
+    };
+}>;
 export declare const PageLayout: TOC<{
     Blocks: {
         logoLink: [];
         topRight: [];
         editLink: [typeof EditLink];
-        error: [error: string];
+        error: [error: string | {
+            reason: string;
+            original: Error;
+        }];
     };
 }>;
 declare const EditLink: TOC<{

package/declarations/page-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../src/page-layout.gts"],"names":[],"mappings":"AAkJA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AA4B1D,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC;QAC5B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KACxB,CAAC;CACH,CAyHC,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAgBrE,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAcpD,CAAC"}
+{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../src/page-layout.gts"],"names":[],"mappings":"AAyNA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AA2B1D,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE,CAAC;KACd,CAAC;CACH,CAgBC,CAAC;AAEH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAA;CAAE,CAOtF;AAED,eAAO,MAAM,SAAS,EAAE,GAAG,CAAC;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,GAAG;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,KAAK,CAAA;SAAE,CAAC;KACrD,CAAC;CACH,CA6BC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC;QAC5B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,KAAK,CAAA;SAAE,CAAC,CAAC;KAC9D,CAAC;CACH,CAuHC,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAgBrE,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAcpD,CAAC"}

package/declarations/side-nav.d.ts

@@ -6,9 +6,7 @@ export declare class SideNav extends Component<{
         onClick?: () => void;
     };
 }> {
-    #private;
     router: RouterService;
-    get humanSelected(): string | undefined;
     get rootUrl(): string;
     closeNav: (event: Event) => void;
 }

package/declarations/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../src/side-nav.gts"],"names":[],"mappings":"AA8LA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAW3C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AA0H/D,qBAAa,OAAQ,SAAQ,SAAS,CAAC;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,CAAC;;IAI2B,MAAM,EAAE,aAAa,CAAC;IAEjD,IAAI,aAAa,uBAMhB;IAED,IAAI,OAAO,WAEV;IAED,QAAQ,GAAI,OAAO,KAAK,UAItB;CA2DH"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../src/side-nav.gts"],"names":[],"mappings":"AAkLA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAU3C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AA0H/D,qBAAa,OAAQ,SAAQ,SAAS,CAAC;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,CAAC;IAC2B,MAAM,EAAE,aAAa,CAAC;IAEjD,IAAI,OAAO,WAEV;IAED,QAAQ,GAAI,OAAO,KAAK,UAItB;CA2DH"}

package/dist/index-page.css

@@ -19,4 +19,3 @@ body.dark .gradient-background {
     background-position: 0% 50%;
   }
 }
-

package/dist/index.js

@@ -1,5 +1,5 @@
-import "./index-page.css"
 import "./theme-toggle.css"
+import "./index-page.css"
 import "./site-css/site.css"
 import "./site-css/components.css"
 import "./site-css/featured-demo.css"
@@ -9,7 +9,9 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 import { LightBulb, Menu, Sun, Moon } from './icons.js';
-import { Hero } from 'ember-primitives/layout/hero';
+import { modifier } from 'ember-modifier';
+import { cell } from 'ember-resources';
+import { PageNav, Page } from 'kolay/components';
 import { ExternalLink } from 'ember-primitives/components/external-link';
 import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
 import Component from '@glimmer/component';
@@ -17,14 +19,11 @@ import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 import { sentenceCase } from 'change-case';
 import { link } from 'ember-primitives/helpers';
-import { selected } from 'kolay';
-import { PageNav, Page } from 'kolay/components';
 import { getAnchor } from 'should-handle-link';
 import { g, i } from 'decorator-transforms/runtime';
-import { modifier } from 'ember-modifier';
-import { cell } from 'ember-resources';
 import { Switch } from 'ember-primitives';
 import { colorScheme } from 'ember-primitives/color-scheme';
+import { Hero } from 'ember-primitives/layout/hero';
 import 'ember-mobile-menu/themes/android';
 
 /**
@@ -75,23 +74,6 @@ const Callout = setComponentTemplate(precompileTemplate("<div class=\"flex p-6 m
   })
 }), templateOnly());
 
-const OopsError = setComponentTemplate(precompileTemplate("<div data-page-error class=\"dark:text-white text:slate-900\" style=\"border: 1px solid red; padding: 1rem; word-break: break-all;\">\n  <h1>Oops!</h1><br />\n  {{@error}}\n\n  <br />\n  <br />\n  {{yield}}\n</div>", {
-  strictMode: true
-}), templateOnly());
-
-const H2 = setComponentTemplate(precompileTemplate("<h2 class=\"text-3xl\">{{yield}}</h2>", {
-  strictMode: true
-}), templateOnly());
-
-;
-
-const IndexPage = setComponentTemplate(precompileTemplate("<Hero class=\"shadow-xl shadow-slate-900/5 gradient-background\">\n  <header class=\"absolute md:sticky right-0 bottom-0 md:top-0 z-50 p-4 flex items-center\">\n    {{yield to=\"header\"}}\n  </header>\n\n  <div class=\"h-full flex flex-col gap-8 justify-center items-center\">\n    <div style=\"width: 66%; margin: 0 auto; transform: translateY(-20%);\" class=\"grid gap-4\">\n      <h1 style=\"filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));\">\n        {{yield to=\"logo\"}}\n      </h1>\n      <p class=\"italic text-white w-full md:w-1/2 mx-auto\">\n        {{yield to=\"tagline\"}}\n      </p>\n    </div>\n    {{yield to=\"callToAction\"}}\n  </div>\n</Hero>\n\n{{yield to=\"content\"}}\n\n<hr />\n<footer style=\"padding: 3rem; width: 66%;\" class=\"mx-auto gap-12 flex-wrap flex justify-between\">\n  {{yield to=\"footer\"}}\n</footer>", {
-  strictMode: true,
-  scope: () => ({
-    Hero
-  })
-}), templateOnly());
-
 const linkClasses = `
   text-sm font-semibold
   dark:text-sky-400
@@ -169,18 +151,10 @@ const SubSectionLink = setComponentTemplate(precompileTemplate("{{#let (link @hr
   })
 }), templateOnly());
 class SideNav extends Component {
-  get #selected() {
-    return selected(this);
-  }
   static {
     g(this.prototype, "router", [service('router')]);
   }
   #router = (i(this, "router"), void 0);
-  get humanSelected() {
-    const path = this.#selected?.path;
-    if (!path) return undefined;
-    return path.split('/').filter(Boolean).map(titleize).join(' / ');
-  }
   get rootUrl() {
     return this.router.rootURL;
   }
@@ -276,7 +250,19 @@ const onWindowScroll = modifier(() => {
     window.removeEventListener('scroll', onScroll);
   };
 });
-const PageLayout = setComponentTemplate(precompileTemplate("<ResponsiveMenuLayout>\n  <:header as |Toggle|>\n    <header class=\"sticky top-0 z-50 transition duration-500 shadow-md shadow-slate-900/5 dark:shadow-none bg-white/95\n        {{if isScrolled.current \"dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75\" \"dark:bg-slate-900/95\"}}\" {{onWindowScroll}}>\n      <div class=\"outer-content flex flex-none flex-wrap items-center justify-between py-4\">\n        <div class=\"flex mr-6 lg:hidden\">\n          <Toggle />\n        </div>\n        <div class=\"relative flex items-center flex-grow basis-0\">\n          <a href=\"/\" aria-label=\"Home page\">\n            {{yield to=\"logoLink\"}}\n          </a>\n        </div>\n        {{!--\n          If we ever have a search bar\n            <div class=\"mr-6 -my-5 sm:mr-8 md:mr-0\">\n                input here\n            </div>\n          --}}\n        <TopRight>\n          {{yield to=\"topRight\"}}\n        </TopRight>\n      </div>\n    </header>\n  </:header>\n  <:content>\n    <section data-main-scroll-container class=\"flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none\">\n      <Article>\n        <Page>\n          <:pending>\n            <div class=\"fixed top-12 p-4 rounded z-50 transition border border-slate-800 duration-500 shadow-xl shadow-slate-900/5 bg-white/95 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'\">\n              Loading, Compiling, etc\n            </div>\n          </:pending>\n\n          <:error as |error|>\n            <section>\n              {{yield error to=\"error\"}}\n            </section>\n          </:error>\n\n          <:success as |prose|>\n            <prose />\n            {{(removeLoader)}}\n            {{!-- this is probably really bad, and anti-patterny\n                but ember doesn't have a good way to have libraries\n                tie in to the URL without a bunch of setup -- which is maybe fine?\n                needs some experimenting -- there is a bit of a disconnect with\n                deriving data from the URL, and the timing of the model hooks.\n                It might be possible to have an afterModel hook wait until the page is\n                compiled.\n                (that's why we have async state, because we're compiling, not loading)\n            --}}\n            {{resetScroll prose}}\n          </:success>\n        </Page>\n      </Article>\n\n      {{#if (has-block \"editLink\")}}\n\n        <div class=\"flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800\">\n\n          {{yield EditLink to=\"editLink\"}}\n        </div>\n      {{/if}}\n    </section>\n  </:content>\n\n</ResponsiveMenuLayout>", {
+const PageLoader = setComponentTemplate(precompileTemplate("<div class=\"loading-page\" role=\"status\">\n  {{yield}}\n</div>\n\n<style>\n  @keyframes shimmer {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n\n  .loading-page {\n    position: fixed;\n    top: 0rem;\n    padding: 0.5rem 1rem;\n    background: linear-gradient(\n      90deg,\n      rgba(40, 40, 50, 0.9),\n      rgba(60, 60, 70, 0.9),\n      rgba(40, 40, 50, 0.9)\n    );\n    background-size: 1000px 100%;\n    animation: shimmer 2s infinite;\n    filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.8));\n    color: white;\n    right: 0;\n    width: 100%;\n    border-bottom-left-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .loading-page {\n      animation: shimmer 10s infinite;\n    }\n  }\n</style>", {
+  strictMode: true
+}), templateOnly());
+function hasReason(error) {
+  return typeof error === 'object' && error !== null && 'reason' in error && typeof error.reason === 'string';
+}
+const PageError = setComponentTemplate(precompileTemplate("<div class=\"error\" data-page-error role=\"alert\">\n  {{#if (hasReason @error)}}\n    {{@error.reason}}\n    <details>\n      <summary>Original error</summary>\n      <pre>{{@error.original.stack}}</pre>\n    </details>\n  {{else}}\n    {{@error}}\n  {{/if}}\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    hasReason
+  })
+}), templateOnly());
+const PageLayout = setComponentTemplate(precompileTemplate("<ResponsiveMenuLayout>\n  <:header as |Toggle|>\n    <header class=\"sticky top-0 z-50 transition duration-500 shadow-md shadow-slate-900/5 dark:shadow-none bg-white/95\n        {{if isScrolled.current \"dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75\" \"dark:bg-slate-900/95\"}}\" {{onWindowScroll}}>\n      <div class=\"outer-content flex flex-none flex-wrap items-center justify-between py-4\">\n        <div class=\"flex mr-6 lg:hidden\">\n          <Toggle />\n        </div>\n        <div class=\"relative flex items-center flex-grow basis-0\">\n          <a href=\"/\" aria-label=\"Home page\">\n            {{yield to=\"logoLink\"}}\n          </a>\n        </div>\n        {{!--\n          If we ever have a search bar\n            <div class=\"mr-6 -my-5 sm:mr-8 md:mr-0\">\n                input here\n            </div>\n          --}}\n        <TopRight>\n          {{yield to=\"topRight\"}}\n        </TopRight>\n      </div>\n    </header>\n  </:header>\n  <:content>\n    <section data-main-scroll-container class=\"flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none\">\n      <Article>\n        <Page>\n          <:pending>\n            <PageLoader>\n              Loading, Compiling, etc\n            </PageLoader>\n          </:pending>\n\n          <:error as |error|>\n            <section>\n              {{yield error to=\"error\"}}\n            </section>\n          </:error>\n\n          <:success as |prose|>\n            <prose />\n            {{(removeLoader)}}\n            {{!-- this is probably really bad, and anti-patterny\n                but ember doesn't have a good way to have libraries\n                tie in to the URL without a bunch of setup -- which is maybe fine?\n                needs some experimenting -- there is a bit of a disconnect with\n                deriving data from the URL, and the timing of the model hooks.\n                It might be possible to have an afterModel hook wait until the page is\n                compiled.\n                (that's why we have async state, because we're compiling, not loading)\n            --}}\n            {{resetScroll prose}}\n          </:success>\n        </Page>\n      </Article>\n\n      {{#if (has-block \"editLink\")}}\n\n        <div class=\"flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800\">\n\n          {{yield EditLink to=\"editLink\"}}\n        </div>\n      {{/if}}\n    </section>\n  </:content>\n\n</ResponsiveMenuLayout>", {
   strictMode: true,
   scope: () => ({
     ResponsiveMenuLayout,
@@ -285,6 +271,7 @@ const PageLayout = setComponentTemplate(precompileTemplate("<ResponsiveMenuLayou
     TopRight,
     Article,
     Page,
+    PageLoader,
     removeLoader,
     resetScroll,
     EditLink
@@ -303,6 +290,26 @@ const TopRight = setComponentTemplate(precompileTemplate("<div class=\"relative
   })
 }), templateOnly());
 
+const OopsError = setComponentTemplate(precompileTemplate("<div data-page-error class=\"dark:text-white text:slate-900\" style=\"border: 1px solid red; padding: 1rem; word-break: break-all;\">\n  <h1>Oops!</h1><br />\n  <PageError @error={{@error}} />\n\n  <br />\n  <br />\n  {{yield}}\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    PageError
+  })
+}), templateOnly());
+
+const H2 = setComponentTemplate(precompileTemplate("<h2 class=\"text-3xl\">{{yield}}</h2>", {
+  strictMode: true
+}), templateOnly());
+
+;
+
+const IndexPage = setComponentTemplate(precompileTemplate("<Hero class=\"shadow-xl shadow-slate-900/5 gradient-background\">\n  <header class=\"absolute md:sticky right-0 bottom-0 md:top-0 z-50 p-4 flex items-center\">\n    {{yield to=\"header\"}}\n  </header>\n\n  <div class=\"h-full flex flex-col gap-8 justify-center items-center\">\n    <div style=\"width: 66%; margin: 0 auto; transform: translateY(-20%);\" class=\"grid gap-4\">\n      <h1 style=\"filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));\">\n        {{yield to=\"logo\"}}\n      </h1>\n      <p class=\"italic text-white w-full md:w-1/2 mx-auto\">\n        {{yield to=\"tagline\"}}\n      </p>\n    </div>\n    {{yield to=\"callToAction\"}}\n  </div>\n</Hero>\n\n{{yield to=\"content\"}}\n\n<hr />\n<footer style=\"padding: 3rem; width: 66%;\" class=\"mx-auto gap-12 flex-wrap flex justify-between\">\n  {{yield to=\"footer\"}}\n</footer>", {
+  strictMode: true,
+  scope: () => ({
+    Hero
+  })
+}), templateOnly());
+
 ;
 
 ;
@@ -337,5 +344,5 @@ const Text = setComponentTemplate(precompileTemplate("<span class=\"dark:text-wh
   strictMode: true
 }), templateOnly());
 
-export { Article, Callout, H2, IndexPage, InternalLink, Link, OopsError, PageLayout, ResponsiveMenuLayout, Shell, Text, ThemeToggle, TopRight };
+export { Article, Callout, H2, IndexPage, InternalLink, Link, OopsError, PageError, PageLayout, PageLoader, ResponsiveMenuLayout, Shell, Text, ThemeToggle, TopRight, hasReason };
 //# sourceMappingURL=index.js.map

package/dist/site-css/components.css

@@ -20,4 +20,3 @@
 .prose pre {
   max-height: 520px;
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-ember/docs-support",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -41,38 +41,38 @@
     "@fontsource/lexend": "^5.2.11",
     "@tailwindcss/typography": "^0.5.15",
     "change-case": "^5.4.4",
-    "decorator-transforms": "^2.3.0",
+    "decorator-transforms": "2.3.1",
     "ember-mobile-menu": "^6.0.0",
-    "ember-modifier": "^4.2.2",
+    "ember-modifier": "^4.3.0",
     "ember-resources": "^7.0.7",
     "inter-ui": "^4.0.2",
-    "kolay": "^3.5.6",
+    "kolay": "^5.1.2",
     "package-up": "^5.0.0",
     "read-package-up": "^12.0.0",
     "should-handle-link": "^1.2.2",
     "tailwindcss": "^3.4.14",
-    "ember-primitives": "0.52.0"
+    "ember-primitives": "^0.53.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/plugin-transform-typescript": "^7.28.5",
-    "@babel/runtime": "^7.28.4",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-typescript": "^7.28.6",
+    "@babel/runtime": "^7.28.6",
     "@ember/library-tsconfig": "^2.0.0",
-    "@embroider/addon-dev": "^8.2.0",
+    "@embroider/addon-dev": "^8.3.0",
     "@glimmer/component": "^2.0.0",
-    "@glint/ember-tsc": "^1.0.8",
-    "@glint/template": "^1.7.3",
-    "@glint/tsserver-plugin": "^2.0.8",
+    "@glint/ember-tsc": "^1.1.1",
+    "@glint/template": "1.7.4",
+    "@glint/tsserver-plugin": "^2.1.0",
     "@nullvoxpopuli/eslint-configs": "^5.5.0",
     "@rollup/plugin-babel": "^6.1.0",
-    "babel-plugin-ember-template-compilation": "^2.2.5",
+    "babel-plugin-ember-template-compilation": "^4.0.0",
     "concurrently": "^9.2.1",
-    "ember-source": "^5.12.0",
+    "ember-source": "^6.10.1",
     "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",
-    "prettier": "^3.7.4",
-    "prettier-plugin-ember-template-tag": "^2.1.2",
-    "rollup": "^4.54.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-ember-template-tag": "^2.1.3",
+    "rollup": "^4.57.1",
     "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.9.3"
   },
@@ -92,12 +92,14 @@
   "scripts": {
     "build": "rollup --config",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
-    "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:'",
+    "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:' && pnpm format",
     "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "ember-tsc --noEmit",
+    "lint:prettier": "prettier --check .",
+    "format": "prettier --write .",
     "dev": "rollup --config --watch --no-watch.clearScreen",
     "start": "rollup --config --watch --no-watch.clearScreen"
   }

package/src/errors.gts

@@ -1,7 +1,9 @@
+import { PageError } from './page-layout.gts';
+
 import type { TOC } from '@ember/component/template-only';
 
 export const OopsError: TOC<{
-  Args: { error: string };
+  Args: { error: any };
   Blocks: { default: [] };
 }> = <template>
   <div
@@ -10,7 +12,7 @@ export const OopsError: TOC<{
     style="border: 1px solid red; padding: 1rem; word-break: break-all;"
   >
     <h1>Oops!</h1><br />
-    {{@error}}
+    <PageError @error={{@error}} />
 
     <br />
     <br />

package/src/index-page.css

@@ -19,4 +19,3 @@ body.dark .gradient-background {
     background-position: 0% 50%;
   }
 }
-

package/src/index.gts

@@ -3,9 +3,9 @@ export { Callout } from './callout.gts';
 export { OopsError } from './errors.gts';
 export { H2 } from './h2.gts';
 export { IndexPage } from './index-page.gts';
-export { InternalLink,Link } from './links.gts';
+export { InternalLink, Link } from './links.gts';
 export { ResponsiveMenuLayout } from './menu-layout.gts';
-export { PageLayout, TopRight } from './page-layout.gts';
+export { hasReason, PageError, PageLayout, PageLoader, TopRight } from './page-layout.gts';
 export { Shell } from './shell.gts';
 export { Text } from './text.gts';
 export { ThemeToggle } from './theme-toggle.gts';

package/src/page-layout.gts

@@ -15,7 +15,6 @@ function removeLoader() {
   document.querySelector('#initial-loader')?.remove();
 }
 
- 
 function resetScroll(..._args: unknown[]) {
   document.querySelector('html')?.scrollTo(0, 0);
 }
@@ -35,12 +34,86 @@ const onWindowScroll = modifier(() => {
   };
 });
 
+export const PageLoader: TOC<{
+  Blocks: {
+    defaultl: [];
+  };
+}> = <template>
+  <div class="loading-page" role="status">
+    {{yield}}
+  </div>
+
+  <style>
+    @keyframes shimmer {
+      0% {
+        background-position: -1000px 0;
+      }
+      100% {
+        background-position: 1000px 0;
+      }
+    }
+
+    .loading-page {
+      position: fixed;
+      top: 0rem;
+      padding: 0.5rem 1rem;
+      background: linear-gradient(
+        90deg,
+        rgba(40, 40, 50, 0.9),
+        rgba(60, 60, 70, 0.9),
+        rgba(40, 40, 50, 0.9)
+      );
+      background-size: 1000px 100%;
+      animation: shimmer 2s infinite;
+      filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.8));
+      color: white;
+      right: 0;
+      width: 100%;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .loading-page {
+        animation: shimmer 10s infinite;
+      }
+    }
+  </style>
+</template>;
+
+export function hasReason(error: unknown): error is { reason: string; original: Error } {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'reason' in error &&
+    typeof error.reason === 'string'
+  );
+}
+
+export const PageError: TOC<{
+  Args: {
+    error: string | { reason: string; original: Error };
+  };
+}> = <template>
+  <div class="error" data-page-error role="alert">
+    {{#if (hasReason @error)}}
+      {{@error.reason}}
+      <details>
+        <summary>Original error</summary>
+        <pre>{{@error.original.stack}}</pre>
+      </details>
+    {{else}}
+      {{@error}}
+    {{/if}}
+  </div>
+</template>;
+
 export const PageLayout: TOC<{
   Blocks: {
     logoLink: [];
     topRight: [];
     editLink: [typeof EditLink];
-    error: [error: string];
+    error: [error: string | { reason: string; original: Error }];
   };
 }> = <template>
   <ResponsiveMenuLayout>
@@ -80,11 +153,9 @@ export const PageLayout: TOC<{
         <Article>
           <Page>
             <:pending>
-              <div
-                class="fixed top-12 p-4 rounded z-50 transition border border-slate-800 duration-500 shadow-xl shadow-slate-900/5 bg-white/95 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'"
-              >
+              <PageLoader>
                 Loading, Compiling, etc
-              </div>
+              </PageLoader>
             </:pending>
 
             <:error as |error|>

package/src/side-nav.gts

@@ -4,7 +4,6 @@ import { service } from '@ember/service';
 
 import { sentenceCase } from 'change-case';
 import { link } from 'ember-primitives/helpers';
-import { selected } from 'kolay';
 import { PageNav } from 'kolay/components';
 import { getAnchor } from 'should-handle-link';
 
@@ -125,19 +124,8 @@ export class SideNav extends Component<{
     onClick?: () => void;
   };
 }> {
-  get #selected() {
-    return selected(this);
-  }
   @service('router') declare router: RouterService;
 
-  get humanSelected() {
-    const path = this.#selected?.path;
-
-    if (!path) return undefined;
-
-    return path.split('/').filter(Boolean).map(titleize).join(' / ');
-  }
-
   get rootUrl() {
     return this.router.rootURL;
   }

package/src/site-css/components.css

@@ -20,4 +20,3 @@
 .prose pre {
   max-height: 520px;
 }
-