@kpritam/grimoire-output-docusaurus 0.1.8

package/templates/spellbook/src/components/SpellbookChat/voiceStyles.module.css

@@ -0,0 +1,334 @@
+/* Spellbook voice mode — dark / purple / mystical; respects reduced motion */
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  font-family: var(--ifm-font-family-base, "Georgia", serif);
+}
+
+.status {
+  font-size: 0.8125rem;
+  color: rgba(230, 220, 255, 0.75);
+  text-align: center;
+  max-width: 22rem;
+  line-height: 1.45;
+}
+
+.transcript {
+  width: 100%;
+  max-width: 22rem;
+  min-height: 2.5rem;
+  padding: 0.65rem 0.85rem;
+  border-radius: 10px;
+  background: rgba(40, 24, 72, 0.45);
+  border: 1px solid rgba(167, 139, 250, 0.25);
+  color: rgba(248, 244, 255, 0.92);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.transcriptLabel {
+  display: block;
+  font-size: 0.6875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(196, 181, 253, 0.65);
+  margin-bottom: 0.35rem;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.micOuter {
+  position: relative;
+  width: 5.5rem;
+  height: 5.5rem;
+  display: grid;
+  place-items: center;
+}
+
+.micRing {
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.micRingListening {
+  border: 2px solid rgba(248, 113, 113, 0.85);
+  animation: voicePulse 1.4s ease-in-out infinite;
+}
+
+.micButton {
+  position: relative;
+  z-index: 1;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: #f5f3ff;
+  background: radial-gradient(
+    circle at 30% 25%,
+    rgba(192, 132, 252, 0.95),
+    rgba(88, 28, 135, 0.98) 55%,
+    rgba(49, 10, 80, 1) 100%
+  );
+  box-shadow:
+    0 0 0 1px rgba(216, 180, 254, 0.35),
+    0 0 28px rgba(167, 139, 250, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.2s ease;
+}
+
+.micButton:hover:not(:disabled) {
+  transform: scale(1.04);
+  box-shadow:
+    0 0 0 1px rgba(216, 180, 254, 0.5),
+    0 0 36px rgba(192, 132, 252, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.micButton:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.micButton:focus-visible {
+  outline: 2px solid rgba(196, 181, 253, 0.9);
+  outline-offset: 3px;
+}
+
+.micButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  filter: grayscale(0.35);
+  box-shadow: none;
+}
+
+.micButtonIdle {
+  animation: voiceGlow 3.2s ease-in-out infinite;
+}
+
+.micButtonListening {
+  background: radial-gradient(
+    circle at 35% 28%,
+    rgba(252, 165, 165, 0.35),
+    rgba(88, 28, 135, 0.98) 50%,
+    rgba(49, 10, 80, 1) 100%
+  );
+  box-shadow:
+    0 0 0 1px rgba(248, 113, 113, 0.45),
+    0 0 32px rgba(248, 113, 113, 0.35);
+}
+
+.micButtonSpeaking {
+  background: radial-gradient(
+    circle at 30% 25%,
+    rgba(129, 140, 248, 0.95),
+    rgba(49, 46, 129, 0.98) 55%,
+    rgba(30, 27, 75, 1) 100%
+  );
+  box-shadow:
+    0 0 0 1px rgba(165, 180, 252, 0.45),
+    0 0 28px rgba(99, 102, 241, 0.4);
+}
+
+.micIcon {
+  width: 1.65rem;
+  height: 1.65rem;
+}
+
+.caption {
+  font-size: 0.8125rem;
+  color: rgba(216, 211, 244, 0.88);
+  text-align: center;
+}
+
+.thinking {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.spinner {
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 2px solid rgba(167, 139, 250, 0.25);
+  border-top-color: rgba(196, 181, 253, 0.95);
+  border-radius: 50%;
+  animation: voiceSpin 0.85s linear infinite;
+}
+
+.stopButton {
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0.45rem 1rem;
+  border-radius: 999px;
+  border: 1px solid rgba(248, 113, 113, 0.45);
+  background: rgba(127, 29, 29, 0.35);
+  color: #fecaca;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.stopButton:hover {
+  background: rgba(153, 27, 27, 0.45);
+  border-color: rgba(252, 165, 165, 0.55);
+}
+
+.stopButton:focus-visible {
+  outline: 2px solid rgba(252, 165, 165, 0.85);
+  outline-offset: 2px;
+}
+
+.wave {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 4px;
+  height: 28px;
+}
+
+.waveBar {
+  width: 4px;
+  border-radius: 2px;
+  background: linear-gradient(
+    180deg,
+    rgba(165, 180, 252, 0.95),
+    rgba(79, 70, 229, 0.6)
+  );
+  animation: voiceWave 0.9s ease-in-out infinite;
+}
+
+.waveBar:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+.waveBar:nth-child(3) {
+  animation-delay: 0.16s;
+}
+
+.waveBar:nth-child(4) {
+  animation-delay: 0.24s;
+}
+
+.waveBar:nth-child(5) {
+  animation-delay: 0.32s;
+}
+
+@keyframes voiceGlow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px rgba(216, 180, 254, 0.35),
+      0 0 22px rgba(167, 139, 250, 0.38);
+  }
+  50% {
+    box-shadow:
+      0 0 0 1px rgba(233, 213, 255, 0.55),
+      0 0 36px rgba(192, 132, 252, 0.55);
+  }
+}
+
+@keyframes voicePulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.85;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
+}
+
+@keyframes voiceSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes voiceWave {
+  0%,
+  100% {
+    height: 8px;
+    opacity: 0.65;
+  }
+  50% {
+    height: 26px;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .micRingListening,
+  .micButtonIdle,
+  .spinner,
+  .waveBar {
+    animation: none;
+  }
+
+  .micRingListening {
+    opacity: 0.95;
+  }
+
+  .micButtonIdle {
+    box-shadow:
+      0 0 0 1px rgba(216, 180, 254, 0.35),
+      0 0 22px rgba(167, 139, 250, 0.38);
+  }
+
+  .waveBar {
+    height: 14px;
+    opacity: 0.85;
+  }
+}
+
+/* =============================================================
+   LIGHT THEME OVERRIDES — voice mode was built dark-first;
+   all hardcoded dark rgba() values are corrected here for the
+   parchment theme. The mic button stays purple (brand accent).
+   ============================================================= */
+
+:global([data-theme="light"]) .status {
+  color: oklch(0.48 0.08 295);
+}
+
+:global([data-theme="light"]) .transcript {
+  background: color-mix(in oklch, oklch(0.5 0.22 298) 8%, oklch(0.945 0.012 80));
+  border-color: oklch(0.5 0.22 298 / 0.25);
+  color: oklch(0.185 0.028 290);
+}
+
+:global([data-theme="light"]) .transcriptLabel {
+  color: oklch(0.48 0.12 295);
+}
+
+:global([data-theme="light"]) .caption {
+  color: oklch(0.45 0.06 285);
+}
+
+:global([data-theme="light"]) .stopButton {
+  background: oklch(0.97 0.015 25);
+  border-color: oklch(0.65 0.18 25 / 0.45);
+  color: oklch(0.38 0.2 25);
+}
+
+:global([data-theme="light"]) .stopButton:hover {
+  background: oklch(0.94 0.03 25);
+  border-color: oklch(0.6 0.2 25 / 0.55);
+}

package/templates/spellbook/src/components/SpellbookChat/webllm-ssr-stub.ts

@@ -0,0 +1,8 @@
+/**
+ * Docusaurus SSR build must not import `@mlc-ai/web-llm` (WebGPU / browser-only).
+ * Webpack aliases the real package to this stub on the server target.
+ */
+
+export function CreateMLCEngine(): Promise<never> {
+  throw new Error("WebLLM is browser-only");
+}

package/templates/spellbook/src/components/SpellbookChatDisabled.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+/**
+ * Compile-time replacement for `SpellbookChat` when the chat feature is
+ * disabled (`index.enabled: false` in `.grimoire/config.yml`, or an
+ * explicit `SPELLBOOK_ENABLED=false` at site-build time).
+ *
+ * `docusaurus.config.ts` swaps this stub in via webpack's
+ * `NormalModuleReplacementPlugin`, which short-circuits webpack's import
+ * graph traversal at the module-resolution step. That breaks the chain to
+ * `react-markdown`, `@huggingface/transformers`, `@mlc-ai/web-llm`, `ai`,
+ * `@ai-sdk/*`, `highlight.js`, … so none of those heavy deps end up in
+ * any chunk of the production bundle.
+ *
+ * The component renders nothing — `Root.tsx` lazy-imports it inside a
+ * `<Suspense fallback={null}>`, so the chat slot stays empty.
+ */
+export default function SpellbookChatDisabled(): ReactNode {
+  return null;
+}

package/templates/spellbook/src/theme/Root.tsx

@@ -0,0 +1,29 @@
+import { Suspense, lazy, type ReactNode } from "react";
+
+/**
+ * Lazy-loaded Spellbook chat dialog.
+ *
+ * When the feature is disabled (`index.enabled: false` in
+ * `.grimoire/config.yml`, or `SPELLBOOK_ENABLED=false` at site-build
+ * time), `spellbookWebpackPlugin` swaps this import target for
+ * `SpellbookChatDisabled.tsx` via `NormalModuleReplacementPlugin`. That
+ * happens at module-resolution time, so webpack tree-shakes the entire
+ * SpellbookChat dependency tree (`@huggingface/transformers`,
+ * `@mlc-ai/web-llm`, `ai`, `@ai-sdk/*`, `react-markdown`, `highlight.js`,
+ * …) out of the production bundle — the resulting chunk is just an empty
+ * stub. We pre-load this lazy module unconditionally; the cost when
+ * disabled is essentially zero.
+ */
+const SpellbookChat = lazy(() => import("../components/SpellbookChat"));
+
+export default function Root(props: { readonly children: ReactNode }): ReactNode {
+  const { children } = props;
+  return (
+    <>
+      {children}
+      <Suspense fallback={null}>
+        <SpellbookChat />
+      </Suspense>
+    </>
+  );
+}