feat: publish av-tools 0.1.0

2026-07-24 14:58:03 +02:00
commit fcc537b024
254 changed files with 63270 additions and 0 deletions
--- a/src/components/visual-editor.css
+++ b/src/components/visual-editor.css
@@ -0,0 +1,577 @@
+.crop-editor,
+.waveform-editor {
+  --visual-editor-border: var(--toolbox-border, #ced7df);
+  --visual-editor-surface: var(--toolbox-surface, #fff);
+  --visual-editor-soft: var(--toolbox-surface-soft, #eef3f5);
+  --visual-editor-text: var(--toolbox-text, #17232b);
+  --visual-editor-muted: var(--toolbox-muted, #61717c);
+  --visual-editor-accent: var(--toolbox-accent, #137c72);
+  --visual-editor-focus: var(--toolbox-focus, #3ba8ff);
+  min-width: 0;
+  color: var(--visual-editor-text);
+}
+
+.crop-editor button,
+.crop-editor input,
+.crop-editor select,
+.waveform-editor button,
+.waveform-editor input {
+  font: inherit;
+}
+
+.crop-editor__stage {
+  position: relative;
+  width: 100%;
+  max-height: min(66vh, 46rem);
+  overflow: hidden;
+  border: 1px solid var(--visual-editor-border);
+  border-radius: calc(var(--toolbox-radius, 0.6rem) + 0.2rem);
+  background:
+    linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
+    linear-gradient(-45deg, rgb(255 255 255 / 4%) 25%, transparent 25%), #10161a;
+  background-position:
+    0 0,
+    8px 8px;
+  background-size: 16px 16px;
+  isolation: isolate;
+  touch-action: none;
+}
+
+.crop-editor__media {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  pointer-events: none;
+}
+
+.crop-editor__media > img,
+.crop-editor__media > video,
+.crop-editor__media > canvas,
+.crop-editor__media > picture,
+.crop-editor__media > picture > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
+.crop-editor__shade {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  pointer-events: none;
+}
+
+.crop-editor__rectangle {
+  position: absolute;
+  z-index: 2;
+  min-width: 1px;
+  min-height: 1px;
+  border: 2px solid #fff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 70%),
+    0 0 0 9999px rgb(4 10 14 / 62%);
+}
+
+.crop-editor__rectangle::before,
+.crop-editor__rectangle::after {
+  position: absolute;
+  content: '';
+  pointer-events: none;
+}
+
+.crop-editor__rectangle::before {
+  inset: 33.333% 0;
+  border-block: 1px solid rgb(255 255 255 / 45%);
+}
+
+.crop-editor__rectangle::after {
+  inset: 0 33.333%;
+  border-inline: 1px solid rgb(255 255 255 / 45%);
+}
+
+.crop-editor__move {
+  position: absolute;
+  z-index: 1;
+  inset: 1px;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  cursor: move;
+  touch-action: none;
+}
+
+.crop-editor__move > span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  padding: 0.22rem 0.4rem;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 62%);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 120ms ease;
+}
+
+.crop-editor__rectangle:hover .crop-editor__move > span,
+.crop-editor__move:focus-visible > span {
+  opacity: 1;
+}
+
+.crop-editor__handle {
+  position: absolute;
+  z-index: 3;
+  width: 1.6rem;
+  height: 1.6rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+}
+
+.crop-editor__handle::after {
+  position: absolute;
+  width: 0.62rem;
+  height: 0.62rem;
+  border: 2px solid #102128;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 55%);
+  content: '';
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+}
+
+.crop-editor__handle--n {
+  top: 0;
+  left: 50%;
+  cursor: ns-resize;
+  transform: translate(-50%, -50%);
+}
+
+.crop-editor__handle--ne {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate(50%, -50%);
+}
+
+.crop-editor__handle--e {
+  top: 50%;
+  right: 0;
+  cursor: ew-resize;
+  transform: translate(50%, -50%);
+}
+
+.crop-editor__handle--se {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate(50%, 50%);
+}
+
+.crop-editor__handle--s {
+  bottom: 0;
+  left: 50%;
+  cursor: ns-resize;
+  transform: translate(-50%, 50%);
+}
+
+.crop-editor__handle--sw {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+  transform: translate(-50%, 50%);
+}
+
+.crop-editor__handle--w {
+  top: 50%;
+  left: 0;
+  cursor: ew-resize;
+  transform: translate(-50%, -50%);
+}
+
+.crop-editor__handle--nw {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  transform: translate(-50%, -50%);
+}
+
+.crop-editor__move:focus-visible,
+.crop-editor__handle:focus-visible,
+.waveform-editor__trim-handle:focus-visible,
+.waveform-editor__marker:focus-visible {
+  outline: 3px solid var(--visual-editor-focus);
+  outline-offset: 2px;
+}
+
+.crop-editor__toolbar,
+.crop-editor__numeric,
+.waveform-editor__navigation,
+.waveform-editor__trim {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  gap: 0.7rem;
+  margin-top: 0.75rem;
+}
+
+.crop-editor__toolbar {
+  align-items: end;
+}
+
+.crop-editor__toolbar > label,
+.crop-editor__numeric > label,
+.waveform-editor__navigation > label,
+.waveform-editor__trim > label {
+  min-width: 0;
+  display: grid;
+  gap: 0.3rem;
+  color: var(--visual-editor-muted);
+  font-size: 0.76rem;
+  font-weight: 720;
+}
+
+.crop-editor__toolbar > label > select,
+.crop-editor__numeric input,
+.waveform-editor__trim input,
+.waveform-editor__markers input {
+  width: 100%;
+  min-width: 0;
+  min-height: 2.35rem;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--visual-editor-border);
+  border-radius: var(--toolbox-radius, 0.6rem);
+  background: var(--visual-editor-surface);
+  color: var(--visual-editor-text);
+}
+
+.crop-editor__toolbar > button,
+.waveform-editor__trim > button,
+.waveform-editor__markers button {
+  min-height: 2.35rem;
+  padding: 0.48rem 0.68rem;
+  border: 1px solid var(--visual-editor-border);
+  border-radius: var(--toolbox-radius, 0.6rem);
+  background: var(--visual-editor-surface);
+  color: var(--visual-editor-text);
+  cursor: pointer;
+}
+
+.crop-editor__lock {
+  min-height: 2.35rem;
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
+}
+
+.crop-editor__lock input {
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0;
+  accent-color: var(--visual-editor-accent);
+}
+
+.crop-editor__numeric,
+.waveform-editor__trim {
+  padding: 0.7rem;
+  border: 1px solid var(--visual-editor-border);
+  border-radius: calc(var(--toolbox-radius, 0.6rem) + 0.12rem);
+}
+
+.crop-editor__numeric legend,
+.waveform-editor__trim legend {
+  padding-inline: 0.3rem;
+  color: var(--visual-editor-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.crop-editor__hint,
+.crop-editor__errors {
+  margin: 0.55rem 0 0;
+  color: var(--visual-editor-muted);
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+
+.crop-editor__errors {
+  color: var(--toolbox-danger, #b22f3e);
+}
+
+.waveform-editor {
+  --waveform-background: color-mix(
+    in srgb,
+    var(--toolbox-text, #17232b) 96%,
+    #000
+  );
+  --waveform-wave: color-mix(in srgb, var(--visual-editor-accent) 76%, #fff);
+  --waveform-center: rgb(255 255 255 / 22%);
+  --waveform-selection: color-mix(
+    in srgb,
+    var(--visual-editor-accent) 22%,
+    transparent
+  );
+  display: grid;
+  gap: 0.75rem;
+}
+
+.waveform-editor__header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.waveform-editor__header > div {
+  min-width: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+
+.waveform-editor__header strong {
+  font-size: 0.84rem;
+}
+
+.waveform-editor__header span,
+.waveform-editor__header output,
+.waveform-editor__markers p,
+.waveform-editor__markers > div > span {
+  color: var(--visual-editor-muted);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.waveform-editor__header output {
+  flex: none;
+  text-align: right;
+}
+
+.waveform-editor__stage {
+  position: relative;
+  min-height: 5rem;
+  overflow: hidden;
+  border: 1px solid var(--visual-editor-border);
+  border-radius: calc(var(--toolbox-radius, 0.6rem) + 0.18rem);
+  background: var(--waveform-background);
+  cursor: crosshair;
+  isolation: isolate;
+  touch-action: none;
+}
+
+.waveform-editor__canvas,
+.waveform-editor__overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.waveform-editor__canvas {
+  display: block;
+  color: var(--waveform-wave);
+}
+
+.waveform-editor__overlay {
+  pointer-events: none;
+}
+
+.waveform-editor__playhead {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #ffcd57;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
+  transform: translateX(-1px);
+}
+
+.waveform-editor__trim-handle,
+.waveform-editor__marker {
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  bottom: 0;
+  width: 1.5rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  pointer-events: auto;
+  touch-action: none;
+  transform: translateX(-50%);
+}
+
+.waveform-editor__trim-handle {
+  color: #fff;
+  cursor: ew-resize;
+}
+
+.waveform-editor__trim-handle::before,
+.waveform-editor__marker::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 1px);
+  width: 2px;
+  background: currentColor;
+  content: '';
+}
+
+.waveform-editor__trim-handle > span {
+  position: absolute;
+  top: 0.3rem;
+  left: 50%;
+  min-width: 1.7rem;
+  padding: 0.16rem 0.25rem;
+  border-radius: 0.28rem;
+  background: var(--visual-editor-accent);
+  color: var(--toolbox-accent-contrast, #fff);
+  font-size: 0.56rem;
+  font-weight: 900;
+  line-height: 1;
+  transform: translateX(-50%);
+}
+
+.waveform-editor__trim-handle--in {
+  color: #89ebdd;
+}
+
+.waveform-editor__trim-handle--out {
+  color: #ffb49d;
+}
+
+.waveform-editor__marker {
+  z-index: 3;
+  color: #ffd36f;
+  cursor: col-resize;
+}
+
+.waveform-editor__marker > span {
+  position: absolute;
+  top: 0.25rem;
+  left: 50%;
+  width: 0.72rem;
+  height: 0.72rem;
+  border: 2px solid #342a00;
+  background: currentColor;
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+  transform: translateX(-50%);
+}
+
+.waveform-editor__navigation {
+  margin-top: 0;
+}
+
+.waveform-editor__navigation > label {
+  grid-template-columns: auto minmax(5rem, 1fr) auto;
+  align-items: center;
+}
+
+.waveform-editor__navigation input[type='range'] {
+  width: 100%;
+  accent-color: var(--visual-editor-accent);
+}
+
+.waveform-editor__navigation output {
+  min-width: 5rem;
+  color: var(--visual-editor-muted);
+  font-size: 0.7rem;
+  text-align: right;
+}
+
+.waveform-editor__trim {
+  align-items: end;
+  margin-top: 0;
+}
+
+.waveform-editor__markers {
+  min-width: 0;
+}
+
+.waveform-editor__markers > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.waveform-editor__markers p {
+  margin: 0.5rem 0 0;
+}
+
+.waveform-editor__markers ol {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.waveform-editor__markers li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 0.55rem;
+}
+
+.waveform-editor__markers label {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 5rem minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--visual-editor-muted);
+  font-size: 0.72rem;
+  font-weight: 720;
+}
+
+.waveform-editor--empty {
+  min-height: 7rem;
+  place-items: center;
+  padding: 1rem;
+  border: 1px dashed var(--visual-editor-border);
+  border-radius: var(--toolbox-radius, 0.6rem);
+  background: var(--visual-editor-soft);
+  color: var(--visual-editor-muted);
+  text-align: center;
+}
+
+.waveform-editor--empty p {
+  margin: 0;
+}
+
+@media (max-width: 43rem) {
+  .waveform-editor__header {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .waveform-editor__header output {
+    text-align: left;
+  }
+
+  .waveform-editor__navigation > label {
+    grid-template-columns: 3rem minmax(4rem, 1fr);
+  }
+
+  .waveform-editor__navigation output {
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+
+  .waveform-editor__markers label {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crop-editor__move > span {
+    transition: none;
+  }
+}