@universal-ember/docs-support 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,12 +1,341 @@
-export { H2 } from './h2.js';
-export { Callout } from './callout.js';
-export { Text } from './text.js';
-export { Article } from './article.js';
-export { Shell } from './shell.js';
-export { IndexPage } from './index-page.js';
-export { InternalLink, Link } from './links.js';
-export { OopsError } from './errors.js';
-export { ResponsiveMenuLayout } from './menu-layout.js';
-export { PageLayout, TopRight } from './page-layout.js';
-export { ThemeToggle } from './theme-toggle.js';
+import "./index-page.css"
+import "./theme-toggle.css"
+import "./site-css/site.css"
+import "./site-css/components.css"
+import "./site-css/featured-demo.css"
+import "./site-css/shiki.css"
+import "./site-css/shell.css"
+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 { ExternalLink } from 'ember-primitives/components/external-link';
+import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
+import Component from '@glimmer/component';
+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 'ember-mobile-menu/themes/android';
+
+/**
+ * TODO: use CSS, this is silly.
+ */
+const proseClasses = `
+  prose prose-slate max-w-none
+  dark:prose-invert dark:text-slate-400
+  prose-th:table-cell
+  prose-headings:inline-block
+  prose-headings:scroll-mt-28
+  prose-headings:font-display
+  prose-headings:font-normal
+  lg:prose-headings:scroll-mt-[8.5rem]
+  prose-h1:text-3xl
+
+  prose-lead:text-slate-500
+  dark:prose-lead:text-slate-400
+
+  prose-a:font-semibold
+  dark:prose-a:text-sky-400
+  prose-a:no-underline
+  prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
+  hover:prose-a:[--tw-prose-underline-size:3px]
+  dark:[--tw-prose-background:theme(colors.slate.900)]
+  dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
+  dark:hover:prose-a:[--tw-prose-underline-size:6px]
+  prose-pre:rounded-xl prose-pre:bg-slate-900
+  prose-pre:shadow-lg
+  dark:prose-pre:bg-slate-800/60
+  dark:prose-pre:shadow-none
+  dark:prose-pre:ring-1
+  dark:prose-pre:ring-slate-300/10
+  dark:prose-hr:border-slate-800
+  dark:prose-code:text-slate-50
+`;
+const Article = setComponentTemplate(precompileTemplate("<article class={{proseClasses}} ...attributes>\n  {{yield}}\n</article>", {
+  strictMode: true,
+  scope: () => ({
+    proseClasses
+  })
+}), templateOnly());
+
+const Callout = setComponentTemplate(precompileTemplate("<div class=\"flex p-6 my-8 rounded-3xl bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10\">\n  <LightBulb class=\"flex-none w-8 h-8\" />\n  <div class=\"flex-auto min-w-0 ml-4\">\n    <div class=\"text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 dark:text-slate-50 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\">\n      {{yield}}\n    </div>\n  </div>\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    LightBulb
+  })
+}), 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
+  no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
+  hover:[--tw-prose-underline-size:6px]
+  dark:[--tw-prose-background:theme(colors.slate.900)]
+  dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
+  dark:hover:[--tw-prose-underline-size:6px]
+`;
+const InternalLink = setComponentTemplate(precompileTemplate("<a class={{linkClasses}} href=\"#\" ...attributes>\n  {{yield}}\n</a>", {
+  strictMode: true,
+  scope: () => ({
+    linkClasses
+  })
+}), templateOnly());
+const Link = setComponentTemplate(precompileTemplate("<ExternalLink class={{linkClasses}} ...attributes>\n  {{yield}}\n</ExternalLink>", {
+  strictMode: true,
+  scope: () => ({
+    ExternalLink,
+    linkClasses
+  })
+}), templateOnly());
+
+function fixWords(text) {
+  switch (text.toLowerCase()) {
+    case 'ui':
+      return 'UI';
+    case 'iframe':
+      return 'IFrame';
+    default:
+      return text;
+  }
+}
+const joinUrl = (...strs) => {
+  const prefix = strs[0]?.startsWith('/') ? '/' : '';
+  return prefix + strs.map(s => s.replace(/^\//, '').replace(/\/$/, '')).filter(x => !!x).join('/');
+};
+/**
+ * Converts 1-2-hyphenated-thing
+ * to
+ *   Hyphenated Thing
+ */
+const titleize = str => {
+  return str.split(/-|\s/).filter(Boolean).filter(text => !text.match(/^[\d]+$/)).map(text => `${text[0]?.toLocaleUpperCase()}${text.slice(1, text.length)}`).map(text => fixWords(text)).join(' ').split('.')[0] || '';
+};
+function nameFor(x) {
+  if ('componentName' in x) {
+    return String(x.componentName);
+  }
+  const page = x;
+  return page.title ? page.title : sentenceCase(page.name);
+}
+const asComponent = str => {
+  return `<${str.split('.')[0]?.replaceAll(' ', '')} />`;
+};
+const isComponents = str => str === 'components';
+const SectionLink = setComponentTemplate(precompileTemplate("{{#let (link @href) as |l|}}\n  <a href={{@href}} class=\"font-medium font-display\n      {{if l.isActive \"text-sky-500\" \"text-slate-900 hover:text-slate-600 dark:text-white  dark:hover:text-slate-300\"}}\" {{on \"click\" l.handleClick}} ...attributes>\n    {{#if (isComponents @name)}}\n      {{asComponent (titleize @name)}}\n    {{else}}\n      {{titleize @name}}\n    {{/if}}\n  </a>\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    link,
+    on,
+    isComponents,
+    asComponent,
+    titleize
+  })
+}), templateOnly());
+const SubSectionLink = setComponentTemplate(precompileTemplate("{{#let (link @href) as |l|}}\n  <a href={{@href}} class=\"block w-full before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full\n      {{if l.isActive \"font-semibold text-sky-500 before:bg-sky-500\" \"text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300\"}}\" {{on \"click\" l.handleClick}} ...attributes>\n    {{#if (isComponents @name)}}\n      {{asComponent (titleize @name)}}\n    {{else}}\n      {{titleize @name}}\n    {{/if}}\n  </a>\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    link,
+    on,
+    isComponents,
+    asComponent,
+    titleize
+  })
+}), 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;
+  }
+  closeNav = event => {
+    if (!getAnchor(event)) return;
+    this.args.onClick?.();
+  };
+  /**
+  *
+  * This nav needs an aria-label to get around
+  *  "Ensure landmarks are unique"
+  *  because some demos render navs, and it's important that those
+  *  demos are as simple as possible.
+  *
+  *
+  *  nav isn't actually made in to an interactive element,
+  *  it's an event delegation handler.
+  *  The links themselves remain the actual interactive elements.
+  */
+  static {
+    setComponentTemplate(precompileTemplate("<aside class=\"bg-white dark:bg-slate-900\" ...attributes>\n  <PageNav aria-label=\"Main Navigation\">\n    <:page as |x|>\n      <SubSectionLink @href={{joinUrl this.rootUrl x.page.path}} @name={{nameFor x.page}} {{on \"click\" this.closeNav}} />\n    </:page>\n\n    <:collection as |x|>\n      {{#if x.index}}\n        <SectionLink @href={{joinUrl this.rootUrl x.index.page.path}} @name={{titleize x.collection.name}} {{on \"click\" this.closeNav}} />\n      {{else}}\n        <h2>\n          {{titleize x.collection.name}}\n        </h2>\n      {{/if}}\n    </:collection>\n  </PageNav>\n</aside>", {
+      strictMode: true,
+      scope: () => ({
+        PageNav,
+        SubSectionLink,
+        joinUrl,
+        nameFor,
+        on,
+        SectionLink,
+        titleize
+      })
+    }), this);
+  }
+}
+
+// @ts-expect-error - no types are provided for ember-mobile-menu
+
+const Toggle = setComponentTemplate(precompileTemplate("<@toggle>\n  <Menu class=\"w-6 h-6 stroke-slate-500\" />\n</@toggle>", {
+  strictMode: true,
+  scope: () => ({
+    Menu
+  })
+}), templateOnly());
+const ResponsiveMenuLayout = setComponentTemplate(precompileTemplate("<MenuWrapper as |mmw|>\n  <mmw.MobileMenu @mode=\"push\" @maxWidth={{300}} as |mm|>\n    <SideNav @onClick={{mm.actions.close}} />\n  </mmw.MobileMenu>\n\n  <mmw.Content>\n    {{yield (component Toggle toggle=mmw.Toggle) to=\"header\"}}\n\n    <div class=\"outer-content\">\n      <SideNav />\n\n      <main class=\"relative grid justify-center flex-auto w-full mx-auto max-w-8xl\">\n        {{yield to=\"content\"}}\n      </main>\n    </div>\n  </mmw.Content>\n</MenuWrapper>", {
+  strictMode: true,
+  scope: () => ({
+    MenuWrapper,
+    SideNav,
+    Toggle
+  })
+}), templateOnly());
+
+;
+
+function toggleTheme() {
+  if (colorScheme.current === 'dark') {
+    colorScheme.update('light');
+  } else {
+    colorScheme.update('dark');
+  }
+}
+function isDark() {
+  return colorScheme.current === 'dark';
+}
+const ThemeToggle = setComponentTemplate(precompileTemplate("<Switch class=\"site-theme-toggle\" as |s|>\n  <s.Control name=\"color-scheme\" checked={{(isDark)}} {{on \"change\" toggleTheme}} />\n  <s.Label>\n    <span class=\"sr-only\">Toggle between light and dark mode</span>\n    {{!--\n      \uD83C\uDFB5 It's raining, it's pouring, ... \uD83C\uDFB5\n      https://www.youtube.com/watch?v=ll5ykbAumD4\n    --}}\n    <Moon class=\"fill-sky-400\" />\n    <Sun class=\"fill-yellow-400\" />\n    <span class=\"ball\"></span>\n  </s.Label>\n</Switch>", {
+  strictMode: true,
+  scope: () => ({
+    Switch,
+    isDark,
+    on,
+    toggleTheme,
+    Moon,
+    Sun
+  })
+}), templateOnly());
+
+function removeLoader() {
+  document.querySelector('#initial-loader')?.remove();
+}
+function resetScroll(..._args) {
+  document.querySelector('html')?.scrollTo(0, 0);
+}
+const isScrolled = cell(false);
+const onWindowScroll = modifier(() => {
+  function onScroll() {
+    isScrolled.current = window.scrollY > 0;
+  }
+  onScroll();
+  window.addEventListener('scroll', onScroll, {
+    passive: true
+  });
+  return () => {
+    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>", {
+  strictMode: true,
+  scope: () => ({
+    ResponsiveMenuLayout,
+    isScrolled,
+    onWindowScroll,
+    TopRight,
+    Article,
+    Page,
+    removeLoader,
+    resetScroll,
+    EditLink
+  })
+}), templateOnly());
+const EditLink = setComponentTemplate(precompileTemplate("<Link class=\"edit-page flex\" href={{@href}}>\n  {{yield}}\n</Link>", {
+  strictMode: true,
+  scope: () => ({
+    Link
+  })
+}), templateOnly());
+const TopRight = setComponentTemplate(precompileTemplate("<div class=\"relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow\">\n  <ThemeToggle />\n  {{yield}}\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    ThemeToggle
+  })
+}), templateOnly());
+
+;
+
+;
+
+;
+
+;
+
+;
+
+const Shell = setComponentTemplate(precompileTemplate("{{(syncBodyClass)}}\n{{yield}}", {
+  strictMode: true,
+  scope: () => ({
+    syncBodyClass
+  })
+}), templateOnly());
+function syncBodyClass() {
+  if (colorScheme.isDark) {
+    document.body.classList.add('dark');
+    document.body.classList.add('theme-dark');
+    document.body.classList.remove('theme-light');
+    document.body.classList.remove('light');
+  } else {
+    document.body.classList.remove('theme-dark');
+    document.body.classList.remove('dark');
+    document.body.classList.add('theme-light');
+    document.body.classList.add('light');
+  }
+}
+
+const Text = setComponentTemplate(precompileTemplate("<span class=\"dark:text-white text:slate-900\">{{yield}}</span>", {
+  strictMode: true
+}), templateOnly());
+
+export { Article, Callout, H2, IndexPage, InternalLink, Link, OopsError, PageLayout, ResponsiveMenuLayout, Shell, Text, ThemeToggle, TopRight };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/site-css/featured-demo.css

@@ -1,9 +1,9 @@
 .featured-demo .glimdown-render,
-.featured-demo [data-repl-output] {
+.featured-demo .repl-sdk__demo {
   @apply w-full max-w-full p-20 bg-gradient-to-r from-violet-600 to-indigo-600 rounded-xl max-h-80 text-slate-50;
 }
 
 .featured-demo.auto-height .glimdown-render,
-.featured-demo.auto-height [data-repl-output] {
+.featured-demo.auto-height .repl-sdk__demo {
   @apply max-h-none;
 }

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@universal-ember/docs-support",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
   ],
-  "repository": "",
+  "repository": "https://github.com/universal-ember/ember-primitives",
   "license": "MIT",
-  "author": "",
+  "author": "nullvoxpopuli",
   "exports": {
     ".": {
-      "types": "./declarations/index.gts.d.ts",
+      "types": "./declarations/index.d.ts",
       "default": "./dist/index.js"
     },
     "./tailwind": {
       "import": "./tailwind.mjs"
     },
     "./*": {
-      "types": "./declarations/*.gts.d.ts",
+      "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
     },
     "./addon-main.js": "./addon-main.cjs"
@@ -33,54 +33,48 @@
     "addon-main.cjs",
     "tailwind.mjs",
     "declarations",
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@embroider/addon-shim": "^1.10.2",
-    "@fontsource/lexend": "^5.2.5",
+    "@fontsource/lexend": "^5.2.11",
     "@tailwindcss/typography": "^0.5.15",
     "change-case": "^5.4.4",
-    "decorator-transforms": "^2.0.0",
+    "decorator-transforms": "^2.3.0",
     "ember-mobile-menu": "^6.0.0",
-    "ember-modifier": "^4.2.0",
-    "ember-primitives": "^0.48.0",
-    "ember-resources": "^7.0.3",
+    "ember-modifier": "^4.2.2",
+    "ember-resources": "^7.0.7",
     "inter-ui": "^4.0.2",
     "kolay": "^3.5.6",
     "package-up": "^5.0.0",
     "read-package-up": "^12.0.0",
     "should-handle-link": "^1.2.2",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.4.14",
+    "ember-primitives": "0.51.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-typescript": "^7.24.4",
-    "@babel/runtime": "^7.24.4",
-    "@embroider/addon-dev": "^6.0.1",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@ember/library-tsconfig": "^2.0.0",
+    "@embroider/addon-dev": "^8.2.0",
     "@glimmer/component": "^2.0.0",
-    "@glint/core": "unstable",
-    "@glint/environment-ember-loose": "unstable",
-    "@glint/environment-ember-template-imports": "unstable",
-    "@glint/template": "1.5.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@tsconfig/ember": "^3.0.6",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@typescript-eslint/parser": "^8.13.0",
+    "@glint/ember-tsc": "^1.0.8",
+    "@glint/template": "^1.7.3",
+    "@glint/tsserver-plugin": "^2.0.8",
+    "@nullvoxpopuli/eslint-configs": "^5.5.0",
+    "@rollup/plugin-babel": "^6.1.0",
     "babel-plugin-ember-template-compilation": "^2.2.5",
     "concurrently": "^9.2.1",
     "ember-source": "^5.12.0",
-    "ember-template-lint": "^6.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^12.0.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.3.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
-    "prettier-plugin-ember-template-tag": "^2.0.2",
-    "rollup": "^4.16.4",
+    "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",
     "rollup-plugin-copy": "^3.5.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -96,18 +90,15 @@
     "app-js": {}
   },
   "scripts": {
-    "build": "concurrently 'pnpm:build:*'",
-    "build:js": "rollup --config",
-    "build:types": "glint --declaration",
+    "build": "rollup --config",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
     "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:'",
     "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": "glint",
-    "start": "concurrently 'pnpm:start:*'",
-    "start:js": "rollup --config --watch --no-watch.clearScreen",
-    "start:types": "glint --declaration --watch"
+    "lint:types": "ember-tsc --noEmit",
+    "dev": "rollup --config --watch --no-watch.clearScreen",
+    "start": "rollup --config --watch --no-watch.clearScreen"
   }
 }

package/{dist/article.js → src/article.gts}

@@ -1,6 +1,4 @@
-import { precompileTemplate } from '@ember/template-compilation';
-import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import type { TOC } from '@ember/component/template-only';
 
 /**
  * TODO: use CSS, this is silly.
@@ -36,12 +34,9 @@ const proseClasses = `
   dark:prose-hr:border-slate-800
   dark:prose-code:text-slate-50
 `;
-const Article = setComponentTemplate(precompileTemplate("\n  <article class={{proseClasses}} ...attributes>\n    {{yield}}\n  </article>\n", {
-  strictMode: true,
-  scope: () => ({
-    proseClasses
-  })
-}), templateOnly());
 
-export { Article };
-//# sourceMappingURL=article.js.map
+export const Article: TOC<{ Element: HTMLElement; Blocks: { default: [] } }> = <template>
+  <article class={{proseClasses}} ...attributes>
+    {{yield}}
+  </article>
+</template>;

package/src/callout.gts

@@ -0,0 +1,18 @@
+import { LightBulb } from './icons.gts';
+
+import type { TOC } from '@ember/component/template-only';
+
+export const Callout: TOC<{ Blocks: { default: [] } }> = <template>
+  <div
+    class="flex p-6 my-8 rounded-3xl bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10"
+  >
+    <LightBulb class="flex-none w-8 h-8" />
+    <div class="flex-auto min-w-0 ml-4">
+      <div
+        class="text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 dark:text-slate-50 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+      >
+        {{yield}}
+      </div>
+    </div>
+  </div>
+</template>;

package/src/errors.gts

@@ -0,0 +1,19 @@
+import type { TOC } from '@ember/component/template-only';
+
+export const OopsError: TOC<{
+  Args: { error: string };
+  Blocks: { default: [] };
+}> = <template>
+  <div
+    data-page-error
+    class="dark:text-white text:slate-900"
+    style="border: 1px solid red; padding: 1rem; word-break: break-all;"
+  >
+    <h1>Oops!</h1><br />
+    {{@error}}
+
+    <br />
+    <br />
+    {{yield}}
+  </div>
+</template>;

package/src/h2.gts

@@ -0,0 +1,5 @@
+import type { TOC } from '@ember/component/template-only';
+
+export const H2: TOC<{ Blocks: { default: [] } }> = <template>
+  <h2 class="text-3xl">{{yield}}</h2>
+</template>;