@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/clock/Clock.vue

@@ -0,0 +1,200 @@
+<!--
+  A settable clock: a labelled time input under a clock face, with a day and night ring, a sun and
+  a moon, and two hands to drag. The hour hand goes round once a day. Dragging a hand sets the
+  input, snapping the minutes to its `step` (in seconds), and fires `input` and, on release,
+  `change`; the minute hand carries into the hour as it passes 12. The input stays the control for
+  keys, screen readers and forms. In an Astro page it needs `client:visible`; without it the face
+  stays hidden, holding its place, and the input works on its own. `class` and `style` go on the
+  outermost div; other attributes (name, step, disabled, ...) go on the input. In a `.vue` file,
+  `v-model` is the input's value, "HH:MM". Without one, `value` is the starting time.
+
+  @example
+  <Clock client:visible label="Wake up" value="07:30" />
+  <Clock v-model="wakeUp" label="Wake up" />
+-->
+<script setup lang="ts">
+import { onMounted, ref, useAttrs, useTemplateRef, watch } from 'vue'
+import SunIcon from '@oneonefour/rkui/icons/sun.vue'
+import MoonIcon from '@oneonefour/rkui/icons/moon.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+import {
+  FACE_STYLE,
+  RING,
+  TICKS,
+  clockHandAngles,
+  draggedTime,
+  formatTime,
+  handLength,
+  nearestHand,
+  parseTime,
+  twoDigits,
+} from '../../shared/clock-face.js'
+import { CENTRE, VIEWBOX, pointToAngle, wrap } from '../../shared/dial-geometry.js'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The clock's visible label, which is also its accessible name. */
+  label: string
+}
+
+const { label } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The input's value (`v-model`), "HH:MM"; the page's `value` attribute when left out. */
+const model = defineModel<string>()
+if (model.value === undefined) model.value = attrs.value as string | undefined
+// In the browser, what was typed before the clock woke up wins.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('clock')
+const input = useTemplateRef<HTMLInputElement>('input')
+const face = useTemplateRef<HTMLElement>('face')
+// Set once the clock runs in the browser; until then clock.css hides the face.
+const live = ref(false)
+onMounted(() => (live.value = true))
+
+/** The time the hands show: the input's, kept while the input is empty. */
+const shown = ref(parseTime(model.value ?? ''))
+/** Where the hands point, in degrees; past 360 or below 0, so each turns the short way. */
+const angles = ref(clockHandAngles(shown.value.hours, shown.value.minutes))
+watch(model, (value) => {
+  if (!value) return
+  shown.value = parseTime(value)
+  angles.value = clockHandAngles(shown.value.hours, shown.value.minutes, angles.value)
+})
+
+/** The hand being dragged, if any. */
+const grabbed = ref<'hour' | 'minute'>()
+/** The input's value when the drag began, to tell on release whether it changed. */
+let valueAtDragStart = ''
+
+/**
+ * The page's attributes: `class` and `style` for the outermost div (`outer`), the rest for the
+ * input (`inner`). `value` is left out, as the model holds it, and so is `id`, which the input
+ * always has.
+ */
+function pageAttrs() {
+  const { value, id: pageId, ...rest } = attrs
+  return splitAttrs(rest)
+}
+
+/** A hand's length and angle, for CSS. */
+function handStyle(hand: 'hour' | 'minute') {
+  return { '--rkui-hand-length': handLength(hand), '--rkui-hand-angle': `${angles.value[hand]}deg` }
+}
+
+/** The pointer's place on the face, in the face's SVG units. */
+function pointOnFace(event: PointerEvent) {
+  const box = face.value!.getBoundingClientRect()
+  return {
+    x: ((event.clientX - box.left) / box.width) * VIEWBOX,
+    y: ((event.clientY - box.top) / box.height) * VIEWBOX,
+  }
+}
+
+/** Moves the grabbed hand to the pointer, and fires `input` when the time changed. */
+function setTimeFromPointer(event: PointerEvent) {
+  const field = input.value!
+  const { x, y } = pointOnFace(event)
+  const angle = wrap(pointToAngle(x - CENTRE, y - CENTRE), 360)
+  const minuteStep = Math.max(1, Math.round(Number(field.step || 60) / 60))
+  const { hours, minutes } = draggedTime(grabbed.value!, angle, parseTime(field.value), minuteStep)
+  const value = formatTime(hours, minutes)
+  if (value === field.value) return
+  field.value = value
+  field.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+function grab(event: PointerEvent) {
+  const field = input.value!
+  if (field.disabled || event.button !== 0) return
+  face.value!.setPointerCapture(event.pointerId)
+  valueAtDragStart = field.value
+  grabbed.value = nearestHand(pointOnFace(event), angles.value)
+  setTimeFromPointer(event)
+}
+
+function drag(event: PointerEvent) {
+  if (grabbed.value) setTimeFromPointer(event)
+}
+
+/** Fires `change` once at the end of a drag, as a native input does when it's committed. */
+function release() {
+  if (!grabbed.value) return
+  grabbed.value = undefined
+  const field = input.value!
+  if (field.value !== valueAtDragStart) field.dispatchEvent(new Event('change', { bubbles: true }))
+}
+</script>
+
+<template>
+  <div class="rkui-clock" :data-rkui-live="live ? '' : undefined" v-bind="pageAttrs().outer">
+    <label :for="id">{{ label }}</label>
+    <div
+      ref="face"
+      class="rkui-clock-face"
+      aria-hidden="true"
+      :style="FACE_STYLE"
+      @pointerdown="grab"
+      @pointermove="drag"
+      @lostpointercapture="release"
+    >
+      <svg :viewBox="`0 0 ${VIEWBOX} ${VIEWBOX}`">
+        <path class="rkui-clock-day" :d="RING.day" :stroke-width="RING.width" />
+        <path class="rkui-clock-night" :d="RING.night" :stroke-width="RING.width" />
+        <circle class="rkui-clock-ring-edge" :cx="CENTRE" :cy="CENTRE" :r="RING.innerEdge" />
+        <line
+          v-for="(edge, i) in RING.edges"
+          :key="i"
+          class="rkui-clock-ring-edge"
+          :x1="edge.x1"
+          :y1="edge.y1"
+          :x2="edge.x2"
+          :y2="edge.y2"
+        />
+        <line
+          v-for="(tick, i) in TICKS"
+          :key="i"
+          :class="['rkui-clock-tick', { 'rkui-clock-tick--quarter': tick.quarter }]"
+          :x1="tick.line.x1"
+          :y1="tick.line.y1"
+          :x2="tick.line.x2"
+          :y2="tick.line.y2"
+        />
+      </svg>
+      <SunIcon class="rkui-icon rkui-clock-day-icon" />
+      <MoonIcon class="rkui-icon rkui-clock-night-icon" />
+      <span
+        class="rkui-clock-hand rkui-clock-hand--hour"
+        :style="handStyle('hour')"
+        :data-grabbed="grabbed === 'hour' ? '' : undefined"
+      >
+        <span class="rkui-clock-tip">
+          <span class="rkui-clock-tag">{{ twoDigits(shown.hours) }}</span>
+        </span>
+      </span>
+      <span
+        class="rkui-clock-hand rkui-clock-hand--minute"
+        :style="handStyle('minute')"
+        :data-grabbed="grabbed === 'minute' ? '' : undefined"
+      >
+        <span class="rkui-clock-tip">
+          <span class="rkui-clock-tag">{{ twoDigits(shown.minutes) }}</span>
+        </span>
+      </span>
+      <span class="rkui-clock-hub"></span>
+    </div>
+    <input
+      ref="input"
+      v-live-value
+      v-model="model"
+      :id
+      class="rkui-input"
+      type="time"
+      step="300"
+      v-bind="pageAttrs().inner"
+    />
+  </div>
+</template>

package/src/components/clock/clock-element.ts

@@ -0,0 +1,6 @@
+// <rkui-clock> for plain HTML pages, bundled into dist/rkui.js: <rkui-clock label="Wake up"
+// value="07:30"></rkui-clock>.
+import { defineElement } from '../../shared/define-element'
+import Clock from './Clock.vue'
+
+defineElement('rkui-clock', Clock)

package/src/components/clock/clock.css

@@ -0,0 +1,258 @@
+/* Clock: a settable clock face over a time input, drawn by Clock.vue. It marks the clock
+   data-rkui-live once it runs in the browser; until then the face stays hidden, holding its
+   place, and the time input works on its own.
+
+   <div class="rkui-clock">
+     <label for="t">Label</label>
+     <div class="rkui-clock-face" aria-hidden="true">
+       <svg>…</svg>                                         (the ring and the ticks)
+       <svg class="rkui-icon rkui-clock-day-icon">…</svg>   (icons/sun.svg)
+       <svg class="rkui-icon rkui-clock-night-icon">…</svg> (icons/moon.svg)
+       <span class="rkui-clock-hand rkui-clock-hand--hour">…</span>
+       <span class="rkui-clock-hand rkui-clock-hand--minute">…</span>
+       <span class="rkui-clock-hub"></span>
+     </div>
+     <input class="rkui-input" id="t" type="time" step="300" value="07:30">
+   </div>
+
+   The face's SVG is 200 units square. The hands turn, but each tag turns back by its hand's
+   angle, so it stays upright with its shadow on the light's side. */
+
+.rkui-clock {
+  --rkui-clock-size: 15rem;
+  --rkui-clock-day: var(--rkui-sky);
+  --rkui-clock-night: var(--rkui-navy);
+
+  display: grid;
+  grid-template-columns: var(--rkui-clock-size);
+  justify-items: center;
+  gap: var(--rkui-space-2);
+  max-inline-size: 30rem;
+}
+
+.rkui-clock > label {
+  font-weight: 600;
+}
+
+/* Until Clock.vue runs in the browser, the face would do nothing. */
+.rkui-clock:not([data-rkui-live]) > .rkui-clock-face {
+  visibility: hidden;
+}
+
+.rkui-clock-face {
+  display: grid;
+  position: relative;
+  box-sizing: border-box;
+  inline-size: var(--rkui-clock-size);
+  aspect-ratio: 1;
+  margin-block-end: var(--rkui-space-2);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: 50%;
+  background: var(--rkui-raised);
+  box-shadow: var(--rkui-shadow);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.rkui-clock-face > svg {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.rkui-clock-day,
+.rkui-clock-night {
+  fill: none;
+}
+
+.rkui-clock-day {
+  stroke: var(--rkui-clock-day);
+}
+
+.rkui-clock-night {
+  stroke: var(--rkui-clock-night);
+}
+
+.rkui-clock-ring-edge {
+  fill: none;
+  stroke: var(--rkui-line-unfilled);
+  stroke-width: var(--rkui-outline-width);
+}
+
+.rkui-clock-tick {
+  stroke: var(--rkui-muted);
+  stroke-width: 2px;
+  stroke-linecap: round;
+}
+
+.rkui-clock-tick--quarter {
+  stroke: var(--rkui-fg);
+  stroke-width: 3px;
+}
+
+/* Centred on the point the face's --rkui-clock-day-x/y or --rkui-clock-night-x/y name */
+.rkui-clock-day-icon {
+  --rkui-clock-x: var(--rkui-clock-day-x);
+  --rkui-clock-y: var(--rkui-clock-day-y);
+}
+
+.rkui-clock-night-icon {
+  --rkui-clock-x: var(--rkui-clock-night-x);
+  --rkui-clock-y: var(--rkui-clock-night-y);
+}
+
+.rkui-clock-face > .rkui-icon {
+  --rkui-icon-size: calc(var(--rkui-clock-size) * 0.1);
+
+  position: absolute;
+  left: var(--rkui-clock-x);
+  top: var(--rkui-clock-y);
+  inline-size: var(--rkui-icon-size);
+  block-size: var(--rkui-icon-size);
+  margin: calc(var(--rkui-icon-size) / -2) 0 0 calc(var(--rkui-icon-size) / -2);
+  color: var(--rkui-ink);
+  pointer-events: none;
+}
+
+/* A hand covers the face and turns about its centre. Its bar runs from the centre to the tip. */
+.rkui-clock-hand {
+  --rkui-hand-width: 0.375rem;
+
+  position: absolute;
+  inset: 0;
+  rotate: var(--rkui-hand-angle, 0deg);
+  transition: rotate var(--rkui-duration-spring) var(--rkui-ease-snap);
+  pointer-events: none;
+}
+
+.rkui-clock-hand--minute {
+  --rkui-hand-width: 0.25rem;
+}
+
+.rkui-clock-hand::before {
+  content: '';
+  position: absolute;
+  left: calc(50% - var(--rkui-hand-width) / 2);
+  bottom: 50%;
+  inline-size: var(--rkui-hand-width);
+  block-size: var(--rkui-hand-length);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-fg);
+}
+
+/* A point at the hand's tip, turning back as the hand turns, on the same timing. */
+.rkui-clock-tip {
+  position: absolute;
+  left: 50%;
+  top: calc(50% - var(--rkui-hand-length));
+  rotate: calc(-1 * var(--rkui-hand-angle, 0deg));
+  transition: rotate var(--rkui-duration-spring) var(--rkui-ease-snap);
+}
+
+/* The tag is the part that pops; translate is free for it, as the tip does the turning. */
+.rkui-clock-tag {
+  --rkui-tag-size: calc(var(--rkui-clock-size) * 0.14);
+  --rkui-tag-shadow: var(--rkui-shadow);
+  --rkui-tag-shift: 0px;
+
+  display: grid;
+  place-items: center;
+  position: absolute;
+  left: calc(var(--rkui-tag-size) / -2);
+  top: calc(var(--rkui-tag-size) / -2);
+  box-sizing: border-box;
+  inline-size: var(--rkui-tag-size);
+  aspect-ratio: 1;
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: 50%;
+  background: var(--rkui-selected);
+  color: var(--rkui-on-selected);
+  box-shadow: var(--rkui-tag-shadow);
+  font-family: var(--rkui-font-mono);
+  font-size: var(--rkui-step--1);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: auto;
+  translate: calc(var(--rkui-shadow-dx) * var(--rkui-tag-shift))
+    calc(var(--rkui-shadow-dy) * var(--rkui-tag-shift));
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+/* As on an unchecked checkbox: in dark mode the outline, not the raised fill, stands out. */
+.rkui-clock-hand--minute .rkui-clock-tag {
+  --rkui-tag-size: calc(var(--rkui-clock-size) * 0.12);
+
+  border-color: var(--rkui-line-unfilled);
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+}
+
+.rkui-clock-hub {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  inline-size: 8%;
+  aspect-ratio: 1;
+  margin: -4% 0 0 -4%;
+  border-radius: 50%;
+  background: var(--rkui-fg);
+}
+
+/* States */
+
+@media (hover: hover) {
+  .rkui-clock-tag:hover {
+    --rkui-tag-shadow: var(--rkui-shadow-hover);
+    --rkui-tag-shift: calc(-1 * var(--rkui-lift-offset));
+  }
+}
+
+.rkui-clock-hand[data-grabbed] {
+  z-index: 1;
+}
+
+.rkui-clock-hand[data-grabbed] .rkui-clock-tag {
+  --rkui-tag-shadow: var(--rkui-shadow-pressed);
+  --rkui-tag-shift: var(--rkui-press-offset);
+}
+
+.rkui-clock:has(> input:disabled) > .rkui-clock-face {
+  opacity: 0.45;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.rkui-clock:has(> input:disabled) .rkui-clock-tag {
+  --rkui-tag-shadow: none;
+  --rkui-tag-shift: 0px;
+
+  pointer-events: none;
+}
+
+/* Forced colours: the SVG and the hands keep their own colours, so the time stays visible. */
+@media (forced-colors: active) {
+  .rkui-clock-face > svg,
+  .rkui-clock-hand::before,
+  .rkui-clock-hub {
+    forced-color-adjust: none;
+  }
+
+  .rkui-clock-day,
+  .rkui-clock-night {
+    stroke: Canvas;
+  }
+
+  .rkui-clock-ring-edge,
+  .rkui-clock-tick {
+    stroke: CanvasText;
+  }
+
+  .rkui-clock-hand::before,
+  .rkui-clock-hub {
+    background: CanvasText;
+  }
+}

package/src/components/code/CodeBlock.vue

@@ -0,0 +1,210 @@
+<!--
+  A highlighted code block: rkui's code-block markup around Shiki's highlighting, with the syntax
+  colours taken from the --rkui-code-* tokens. The default slot is the code, as text, trimmed and
+  highlighted when the page is built, on the server. Vue, Astro and MDX all tidy the white space in
+  text written between the tags, so code longer than a line goes in as a string, which they leave
+  alone: `{{ code }}` in a `.vue` file, `{code}` or {`…`} in Astro and MDX. `class`, `style` and
+  other attributes go on the `<figure>`. With no `label` there is no title area: the copy button
+  sits in the code's top-right corner. The copy button needs `client:visible` in an Astro page;
+  without it the button stays hidden.
+
+  The caption starts with a mark for the language, the first of these that exists:
+    1. the `logo` slot: the site's logo for the language (an inline SVG with
+       class="rkui-icon rkui-icon--small" and aria-hidden="true"), e.g.
+       <PythonLogo slot="logo" class="…" /> in Astro, or
+       <template #logo><PythonLogo class="…" /></template> in Vue
+    2. the library's Phosphor file-type icon for the language (FILE_ICONS below)
+    3. the file extension as grey text, e.g. "JS" (FILE_EXTENSIONS below), unless it would
+       repeat the label, as for JSON
+
+  @example
+  <CodeBlock client:visible lang="python" label="Python" copy="hover">{code}</CodeBlock>
+  <CodeBlock lang="shell" copy="never">npm install @oneonefour/rkui</CodeBlock>
+-->
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onServerPrefetch,
+  ref,
+  useSlots,
+  type Component,
+} from 'vue'
+import { slotText } from '../../shared/slot-html'
+import CopyIcon from '@oneonefour/rkui/icons/copy.vue'
+import FileCIcon from '@oneonefour/rkui/icons/file-c.vue'
+import FileCppIcon from '@oneonefour/rkui/icons/file-cpp.vue'
+import FileCSharpIcon from '@oneonefour/rkui/icons/file-c-sharp.vue'
+import FileCssIcon from '@oneonefour/rkui/icons/file-css.vue'
+import FileHtmlIcon from '@oneonefour/rkui/icons/file-html.vue'
+import FileJsIcon from '@oneonefour/rkui/icons/file-js.vue'
+import FileJsxIcon from '@oneonefour/rkui/icons/file-jsx.vue'
+import FileMdIcon from '@oneonefour/rkui/icons/file-md.vue'
+import FilePyIcon from '@oneonefour/rkui/icons/file-py.vue'
+import FileRsIcon from '@oneonefour/rkui/icons/file-rs.vue'
+import FileSqlIcon from '@oneonefour/rkui/icons/file-sql.vue'
+import FileTsIcon from '@oneonefour/rkui/icons/file-ts.vue'
+import FileTsxIcon from '@oneonefour/rkui/icons/file-tsx.vue'
+import FileVueIcon from '@oneonefour/rkui/icons/file-vue.vue'
+
+interface Props {
+  /** A Shiki language id, e.g. "python". */
+  lang: string
+  /** The language name shown in the caption; no caption (no title area) when left out. */
+  label?: string
+  /**
+   * When the copy button shows: 'always', 'hover' (it rolls in from the top while the pointer is
+   * over the block or focus is inside it, and stays on a touch screen) or 'never'. Every value but
+   * 'never' needs JavaScript (`client:visible`); 'always' when left out.
+   */
+  copy?: 'always' | 'hover' | 'never'
+  /** Puts the caption in a darker strip, like an editor tab, on a flat panel; false when left out. */
+  editor?: boolean
+  /**
+   * Keeps the scrollbar of a long line visible, with no dots, as Scroll's `bar` does (the class
+   * `rkui-scroll--bar` on the `<pre>`); dots and a hover scrollbar when left out.
+   */
+  bar?: boolean
+  /**
+   * The look of the dots at the edges of a long line, written as `data-rkui-dots` on the
+   * `<figure>`: 'plain', or 'pill' for dots in a raised pill; the page's setting when left out.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const { lang, label, copy = 'always', editor = false, bar, dots } = defineProps<Props>()
+
+/** Phosphor file-type icons by Shiki language id or common alias. */
+const FILE_ICONS: Record<string, Component> = {
+  c: FileCIcon,
+  cpp: FileCppIcon,
+  'c++': FileCppIcon,
+  csharp: FileCSharpIcon,
+  'c#': FileCSharpIcon,
+  css: FileCssIcon,
+  html: FileHtmlIcon,
+  javascript: FileJsIcon,
+  js: FileJsIcon,
+  jsx: FileJsxIcon,
+  markdown: FileMdIcon,
+  md: FileMdIcon,
+  python: FilePyIcon,
+  py: FilePyIcon,
+  rust: FileRsIcon,
+  rs: FileRsIcon,
+  sql: FileSqlIcon,
+  typescript: FileTsIcon,
+  ts: FileTsIcon,
+  tsx: FileTsxIcon,
+  vue: FileVueIcon,
+}
+
+/** File extensions for Shiki language ids whose id is not the extension. */
+const FILE_EXTENSIONS: Record<string, string> = {
+  'fortran-fixed-form': 'f',
+  'fortran-free-form': 'f90',
+  julia: 'jl',
+  latex: 'tex',
+}
+
+const COPIED = 'Copied'
+const FAILED = "Couldn't copy"
+const RESET_DELAY_MS = 2000
+
+const FileIcon = computed<Component | undefined>(() => FILE_ICONS[lang])
+const extension = computed(() => FILE_EXTENSIONS[lang] ?? lang)
+
+const slots = useSlots()
+/**
+ * The mark before the label, the first that applies: the site's logo, the library's file-type
+ * icon, the extension as text, or nothing when the extension would just repeat the label (JSON).
+ * A function, not a `computed`, because it reads the slots, which aren't reactive.
+ */
+function mark(): 'logo' | 'icon' | 'extension' | 'none' {
+  if (slots.logo) return 'logo'
+  if (FileIcon.value) return 'icon'
+  if (extension.value.toLowerCase() !== label?.toLowerCase()) return 'extension'
+  return 'none'
+}
+
+/**
+ * The code: the default slot's text, trimmed of the white space the page's own formatting puts
+ * around it. A function, not a `computed`, because it reads the slot, which isn't reactive.
+ */
+function code(): string {
+  return slotText(slots.default?.() ?? []).trim()
+}
+
+// The highlighted lines are made on the server: Shiki and the language load before the block
+// renders, and the slot is highlighted as it renders. In the browser the block renders the code as
+// plain text: a block first rendered there shows it unhighlighted, and one that hydrates keeps the
+// server's lines, because Vue leaves an element whose text matches as it is.
+let highlight: ((code: string) => string) | undefined
+if (import.meta.env.SSR) {
+  onServerPrefetch(async () => {
+    const { highlighter } = await import('./highlight.js')
+    highlight = await highlighter(lang)
+  })
+}
+
+// Set once the block runs in the browser; until then code.css hides the copy button.
+const live = ref(false)
+/** What the button and the screen-reader announcement say after a copy; nothing at rest. */
+const message = ref('')
+let resetTimer: number | undefined
+onMounted(() => (live.value = true))
+onBeforeUnmount(() => clearTimeout(resetTimer))
+
+/** Copies the code, and says whether that worked for a moment. */
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(code())
+    message.value = COPIED
+  } catch {
+    // No clipboard (an insecure page or an old browser) or permission denied.
+    message.value = FAILED
+  }
+  clearTimeout(resetTimer)
+  resetTimer = window.setTimeout(() => (message.value = ''), RESET_DELAY_MS)
+}
+</script>
+
+<template>
+  <figure
+    :class="[
+      'rkui-code',
+      { 'rkui-code--editor': editor, 'rkui-code--copy-hover': copy === 'hover' },
+    ]"
+    :data-rkui-live="live ? '' : undefined"
+    :data-rkui-dots="dots"
+  >
+    <figcaption v-if="label" class="rkui-code-header">
+      <span class="rkui-code-lang">
+        <slot v-if="mark() === 'logo'" name="logo" />
+        <component
+          :is="FileIcon"
+          v-if="mark() === 'icon'"
+          class="rkui-icon rkui-icon--small"
+          aria-hidden="true"
+        />
+        <span v-if="mark() === 'extension'" aria-hidden="true">{{ extension }}</span>
+        {{ label }}
+      </span>
+    </figcaption>
+    <pre
+      :class="['rkui-scroll', { 'rkui-scroll--bar': bar }]"
+      tabindex="0"
+    ><code v-if="highlight" v-html="highlight(code())" /><code v-else>{{ code() }}</code></pre>
+    <button
+      v-if="copy !== 'never'"
+      type="button"
+      class="rkui-button rkui-button--small rkui-code-copy"
+      @click="copyCode"
+    >
+      <CopyIcon class="rkui-icon rkui-icon--small" />
+      <span class="rkui-code-copy-label">{{ message || 'Copy' }}</span>
+    </button>
+    <span class="rkui-visually-hidden" aria-live="polite">{{ message }}</span>
+  </figure>
+</template>