@elmethis/qwik 1.0.0-alpha.27 → 1.0.0-alpha.29

package/lib/q-manifest.json

@@ -1,6 +1,6 @@
 {
 	"version": "1",
-	"manifestHash": "hmurka",
+	"manifestHash": "w0o7qg",
 	"options": {
 		"target": "lib",
 		"buildMode": "development",
@@ -30,8 +30,8 @@
 	"mapping": {},
 	"bundles": {
 		"../index.qwik.cjs": {
-			"size": 467302,
-			"total": 467302,
+			"size": 489408,
+			"total": 489408,
 			"origins": [
 				"src/components/a2ui/catalog/basic-catalog.tsx",
 				"src/components/a2ui/catalog/block-catalog.tsx",
@@ -115,6 +115,8 @@
 				"src/components/icon/elm-toggle-theme.module.css",
 				"src/components/icon/elm-toggle-theme.tsx",
 				"src/components/icon/language-glyph.tsx",
+				"src/components/media/elm-audio-player.module.css",
+				"src/components/media/elm-audio-player.tsx",
 				"src/components/media/elm-block-image.module.css",
 				"src/components/media/elm-block-image.tsx",
 				"src/components/media/elm-file.module.css",
@@ -185,7 +187,7 @@
 	"assets": {
 		"style.css": {
 			"name": "style.css.css",
-			"size": 69011
+			"size": 79234
 		},
 		"assets/bundle-graph.BqrDAOEV.json": {
 			"name": "bundle-graph.json",

package/lib/style.css

@@ -761,6 +761,453 @@
     color: var(--elmethis-color-primary);
   }
 }
+._elm-audio-player_p7xym_1 {
+  box-sizing: border-box;
+  width: 100%;
+  margin-block-start: var(--elmethis-margin-block-start);
+  padding: 0.875rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--elmethis-color-surface-sunken);
+  border-radius: 0.75rem;
+  background-color: var(--elmethis-color-surface-raised);
+  user-select: none;
+}
+
+/* Hairline accent that warms as playback advances. */
+._elm-audio-player_p7xym_1::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    var(--elmethis-color-primary)
+      calc(var(--elmethis-scoped-progress, 0) * 100%),
+    var(--elmethis-color-neutral-weak)
+      calc(var(--elmethis-scoped-progress, 0) * 100%)
+  );
+  opacity: 0.5;
+  transition: opacity 300ms ease;
+}
+
+._elm-audio-player_p7xym_1._loading_p7xym_34::before {
+  opacity: 0.3;
+}
+
+/* ---- Header ------------------------------------------------------------- */
+
+._header_p7xym_40 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+._artwork_p7xym_46 {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  color: var(--elmethis-color-surface-raised);
+  background: linear-gradient(
+    145deg,
+    var(--elmethis-color-primary-strong),
+    var(--elmethis-color-primary)
+  );
+  box-shadow: 0 0.25rem 0.5rem -0.25rem var(--elmethis-box-shadow-color);
+}
+
+/* Error: the artwork tile turns into a red alert badge. */
+._artwork-error_p7xym_63 {
+  color: var(--elmethis-color-accent-error);
+  background: var(--elmethis-color-accent-error-surface);
+  box-shadow: none;
+}
+
+._meta_p7xym_69 {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+._title_p7xym_77 {
+  overflow: hidden;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--elmethis-color-neutral-strong);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+._artist_p7xym_87 {
+  overflow: hidden;
+  font-family: var(--elmethis-font-family-monospace);
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--elmethis-color-neutral);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Now-playing equalizer — four bars that only dance while live. */
+._equalizer_p7xym_99 {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  i {
+    flex: 1;
+    height: 25%;
+    border-radius: 1px;
+    background-color: var(--elmethis-color-neutral-weak);
+    transition: background-color 300ms ease;
+  }
+}
+
+._playing_p7xym_116 ._equalizer_p7xym_99 i {
+  background-color: var(--elmethis-color-primary);
+  animation: _elm-eq_p7xym_1 900ms ease-in-out infinite;
+}
+
+._playing_p7xym_116 ._equalizer_p7xym_99 i:nth-child(1) {
+  animation-delay: -200ms;
+}
+
+._playing_p7xym_116 ._equalizer_p7xym_99 i:nth-child(2) {
+  animation-delay: -600ms;
+}
+
+._playing_p7xym_116 ._equalizer_p7xym_99 i:nth-child(3) {
+  animation-delay: -100ms;
+}
+
+._playing_p7xym_116 ._equalizer_p7xym_99 i:nth-child(4) {
+  animation-delay: -450ms;
+}
+
+@keyframes _elm-eq_p7xym_1 {
+  0%,
+  100% {
+    height: 22%;
+  }
+
+  50% {
+    height: 100%;
+  }
+}
+
+/* ---- Seek line ---------------------------------------------------------- */
+
+/* A roomy hit area so the thin line stays easy to grab. */
+._seekbar_p7xym_151 {
+  position: relative;
+  width: 100%;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  touch-action: none;
+}
+
+._seekbar_p7xym_151:focus-visible {
+  outline: 2px solid var(--elmethis-color-primary);
+  outline-offset: 4px;
+  border-radius: 0.25rem;
+}
+
+._track_p7xym_167 {
+  position: relative;
+  width: 100%;
+  height: 0.25rem;
+  border-radius: 999px;
+  background-color: var(--elmethis-color-neutral-weak);
+  overflow: hidden;
+}
+
+._fill_p7xym_176 {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: calc(var(--elmethis-scoped-progress, 0) * 100%);
+  border-radius: 999px;
+  background-color: var(--elmethis-color-primary);
+}
+
+._playing_p7xym_116 ._fill_p7xym_176 {
+  box-shadow: 0 0 0.375rem 0 var(--elmethis-color-primary);
+}
+
+/* Draggable handle, parked at the play position. */
+._thumb_p7xym_189 {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--elmethis-scoped-progress, 0) * 100%);
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: var(--elmethis-color-primary-strong);
+  box-shadow: 0 0.125rem 0.375rem -0.0625rem var(--elmethis-box-shadow-color);
+  transform: translate(-50%, -50%);
+  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+}
+
+._seekbar_p7xym_151:hover ._thumb_p7xym_189,
+._seekbar_p7xym_151:focus-visible ._thumb_p7xym_189 {
+  transform: translate(-50%, -50%) scale(1.25);
+}
+
+/* Faint marker that tracks the cursor on hover. */
+._hover-thumb_p7xym_209 {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--elmethis-scoped-hover, 0) * 100%);
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background-color: var(--elmethis-color-primary);
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 160ms ease;
+  pointer-events: none;
+}
+
+._seekbar_p7xym_151:hover ._hover-thumb_p7xym_209 {
+  opacity: 0.35;
+}
+
+._loading_p7xym_34 ._seekbar_p7xym_151 {
+  cursor: progress;
+}
+
+._loading_p7xym_34 ._track_p7xym_167 {
+  animation: _elm-pulse_p7xym_1 1.4s ease-in-out infinite;
+}
+
+@keyframes _elm-pulse_p7xym_1 {
+  0%,
+  100% {
+    opacity: 0.55;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ---- Controls ----------------------------------------------------------- */
+
+._controls_p7xym_248 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+._time_p7xym_254 {
+  flex: 0 0 auto;
+  min-width: 3ch;
+  font-family: var(--elmethis-font-family-monospace);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.03em;
+  color: var(--elmethis-color-neutral);
+}
+
+._time-current_p7xym_264 {
+  color: var(--elmethis-color-primary);
+  text-align: left;
+}
+
+._time-total_p7xym_269 {
+  text-align: right;
+}
+
+._transport_p7xym_273 {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+._icon-button_p7xym_281 {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  color: var(--elmethis-color-neutral-strong);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease,
+    transform 120ms ease;
+}
+
+._icon-button_p7xym_281:hover {
+  color: var(--elmethis-color-primary);
+  background-color: var(--elmethis-color-primary-hover);
+}
+
+._icon-button_p7xym_281:active {
+  transform: scale(0.92);
+}
+
+._icon-button_p7xym_281:focus-visible {
+  outline: 2px solid var(--elmethis-color-primary);
+  outline-offset: 2px;
+}
+
+._play-button_p7xym_312 {
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  color: var(--elmethis-color-surface-raised);
+  background: linear-gradient(
+    145deg,
+    var(--elmethis-color-primary-strong),
+    var(--elmethis-color-primary)
+  );
+  cursor: pointer;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--elmethis-color-primary) 40%, transparent),
+    0 0.375rem 0.875rem -0.375rem var(--elmethis-color-primary);
+  transition:
+    transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 160ms ease;
+}
+
+._play-button_p7xym_312:hover {
+  transform: scale(1.06);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--elmethis-color-primary) 60%, transparent),
+    0 0.5rem 1.25rem -0.375rem var(--elmethis-color-primary);
+}
+
+._play-button_p7xym_312:active {
+  transform: scale(0.96);
+}
+
+._play-button_p7xym_312:focus-visible {
+  outline: 2px solid var(--elmethis-color-primary-strong);
+  outline-offset: 3px;
+}
+
+._playing_p7xym_116 ._play-button_p7xym_312 {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--elmethis-color-primary) 50%, transparent),
+    0 0 0 6px var(--elmethis-color-primary-hover);
+}
+
+/* ---- Volume ------------------------------------------------------------- */
+
+._volume_p7xym_359 {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+._volume-slider_p7xym_366 {
+  width: 0;
+  height: 0.25rem;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  appearance: none;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    var(--elmethis-color-primary) calc(var(--elmethis-scoped-volume, 1) * 100%),
+    var(--elmethis-color-neutral-weak)
+      calc(var(--elmethis-scoped-volume, 1) * 100%)
+  );
+  cursor: pointer;
+  transition:
+    width 220ms ease,
+    opacity 220ms ease;
+}
+
+._volume_p7xym_359:hover ._volume-slider_p7xym_366,
+._volume_p7xym_359:focus-within ._volume-slider_p7xym_366 {
+  width: 4rem;
+  opacity: 1;
+}
+
+._volume-slider_p7xym_366::-webkit-slider-thumb {
+  appearance: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--elmethis-color-primary-strong);
+  box-shadow: 0 0.125rem 0.25rem -0.0625rem var(--elmethis-box-shadow-color);
+}
+
+._volume-slider_p7xym_366::-moz-range-thumb {
+  width: 0.75rem;
+  height: 0.75rem;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--elmethis-color-primary-strong);
+}
+
+/* ---- Error -------------------------------------------------------------- */
+
+._errored_p7xym_412 {
+  border-color: color-mix(
+    in srgb,
+    var(--elmethis-color-accent-error) 45%,
+    var(--elmethis-color-neutral-weak)
+  );
+}
+
+/* Replaces the seek line + transport with a plain, labeled message. */
+._error-notice_p7xym_421 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: 0.5rem;
+  color: var(--elmethis-color-accent-error);
+  background-color: var(--elmethis-color-accent-error-surface);
+}
+
+._error-message_p7xym_431 {
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._playing_p7xym_116 ._equalizer_p7xym_99 i,
+  ._loading_p7xym_34 ._track_p7xym_167 {
+    animation: none;
+  }
+
+  ._elm-audio-player_p7xym_1 *,
+  ._elm-audio-player_p7xym_1 {
+    transition-duration: 0.01ms !important;
+  }
+}
 ._elm-block-image_kwjx3_1 {
   margin-block-start: var(--elmethis-margin-block-start);
   margin-inline: 0;

package/lib-types/components/a2ui/catalog/block-catalog.stories.d.ts

@@ -13,6 +13,8 @@ export declare const Divider: Story;
 export declare const Toggle: Story;
 export declare const Bookmark: Story;
 export declare const File: Story;
+export declare const Audio: Story;
+export declare const Video: Story;
 export declare const BlockImage: Story;
 export declare const CodeBlock: Story;
 export declare const Katex: Story;

package/lib-types/components/media/elm-audio-player.browser.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-types/components/media/elm-audio-player.d.ts

@@ -0,0 +1,37 @@
+import { PropsOf } from "@qwik.dev/core";
+export interface ElmAudioPlayerProps extends Omit<PropsOf<"div">, "title"> {
+    /**
+     * Audio source URL.
+     */
+    src: string;
+    /**
+     * Track title shown in the header. Falls back to the file name in `src`.
+     */
+    title?: string;
+    /**
+     * Secondary line under the title (artist, album, podcast name, …).
+     */
+    artist?: string;
+    /**
+     * Message shown when the audio fails to load (bad URL, network/CORS error,
+     * unsupported codec). Replaces the transport with a labeled alert.
+     *
+     * @defaultValue "This audio couldn't be loaded."
+     */
+    errorMessage?: string;
+    /**
+     * Seconds the skip-back / skip-forward controls jump.
+     *
+     * @defaultValue 10
+     */
+    seekStep?: number;
+    /**
+     * Loop playback when the track ends. Forwarded to the native `<audio>`.
+     */
+    loop?: boolean;
+    /**
+     * Begin playing as soon as the audio can. Forwarded to the native `<audio>`.
+     */
+    autoPlay?: boolean;
+}
+export declare const ElmAudioPlayer: import("@qwik.dev/core").Component<ElmAudioPlayerProps>;

package/lib-types/components/media/elm-audio-player.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-types/components/media/elm-audio-player.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { type ElmAudioPlayerProps } from "./elm-audio-player";
+declare const meta: Meta<ElmAudioPlayerProps>;
+export default meta;
+type Story = StoryObj<ElmAudioPlayerProps>;
+export declare const Primary: Story;
+export declare const TitleOnly: Story;
+export declare const ArtistOnly: Story;
+export declare const FilenameFallback: Story;
+export declare const BigSeekStep: Story;
+export declare const Errored: Story;

package/lib-types/index.d.ts

@@ -58,6 +58,7 @@ export { ElmLanguageIcon, type ElmLanguageIconProps, } from "./components/icon/e
 export { ElmMdiIcon, type ElmMdiIconProps, } from "./components/icon/elm-mdi-icon";
 export { ElmSquareLoadingIcon, type ElmSquareLoadingIconProps, } from "./components/icon/elm-square-loading-icon";
 export { ElmToggleTheme, type ElmToggleThemeProps, } from "./components/icon/elm-toggle-theme";
+export { ElmAudioPlayer, type ElmAudioPlayerProps, } from "./components/media/elm-audio-player";
 export { ElmBlockImage, type ElmBlockImageProps, } from "./components/media/elm-block-image";
 export { ElmFile, type ElmFileProps } from "./components/media/elm-file";
 export { ElmBookmark, type ElmBookmarkProps, } from "./components/navigation/elm-bookmark";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.29",
   "publishConfig": {
     "access": "public"
   },
@@ -83,7 +83,7 @@
     "uuid": "^14.0.0",
     "zod": "^3",
     "zod-to-json-schema": "^3.25.2",
-    "@elmethis/core": "^0.11.0"
+    "@elmethis/core": "^0.13.0"
   },
   "peerDependencies": {
     "@qwik.dev/core": ">=2.0.0-beta.31"
@@ -104,8 +104,8 @@
     "test.unit": "vitest --run",
     "test.browser": "vitest --run --config vitest.browser.config.ts",
     "test.build": "pnpm run build && pnpm run build-storybook",
-    "check": "concurrently -g \"pnpm:fmt.check\" \"pnpm:lint\" \"pnpm:lint.css\" \"pnpm:build.types\" \"pnpm:test.unit\" \"pnpm:test.browser\"",
-    "check.ci": "concurrently -g \"pnpm:check\" \"pnpm:test.build\"",
+    "check": "concurrently -g \"pnpm:fmt.check\" \"pnpm:lint\" \"pnpm:lint.css\" \"pnpm:build.types\" \"pnpm:test.unit\"",
+    "check.ci": "concurrently -g \"pnpm:check\" \"pnpm:test.build\" \"pnpm:test.browser\"",
     "qwik": "qwik"
   }
 }