@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/CodeBlock.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * Code block: text that must stay as written (JSON, a prompt as sent, a log,
+ * a snippet), in the mono font, with a copy button and a wrap switch in its
+ * head. Long text scrolls inside `max-height`. Works on the canvas and in the
+ * manager.
+ *
+ *   <CodeBlock :code="json" language="JSON" max-height="240px" />
+ *   <CodeBlock :code="log" title="Request" line-numbers v-model:wrap="wrap" />
+ *
+ * No syntax colours (they cost bundle for little gain here). A block that
+ * scrolls can be focused, so the keyboard can scroll it too.
+ */
+import { computed, ref, watch } from "vue";
+import CopyButton from "./CopyButton.vue";
+import { vTooltip } from "./tooltip";
+
+const props = withDefaults(defineProps<{
+  code: string;
+  /** A small tag in the head, e.g. "JSON". */
+  language?: string | undefined;
+  /** A name in the head, e.g. "Prompt as sent". */
+  title?: string | undefined;
+  /** Wrap long lines. Bind with v-model:wrap, or leave it to the button. */
+  wrap?: boolean | undefined;
+  /** Where wrap starts when nobody binds `wrap`. */
+  defaultWrap?: boolean | undefined;
+  /** CSS max height; the block scrolls past it. */
+  maxHeight?: string | undefined;
+  lineNumbers?: boolean | undefined;
+  /** Leave out the head (copy and wrap). */
+  bare?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), { language: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
+
+const emit = defineEmits<{ (e: "update:wrap", v: boolean): void }>();
+
+const own = ref(props.wrap ?? props.defaultWrap ?? false);
+watch(() => props.wrap, (v) => { if (v !== undefined) own.value = v; });
+const wrapped = computed(() => props.wrap ?? own.value);
+function toggleWrap(): void {
+  own.value = !wrapped.value;
+  emit("update:wrap", own.value);
+}
+
+const lines = computed(() => props.code.replace(/\n$/, "").split("\n"));
+const name = computed(() => props.title ?? props.language ?? "Code");
+</script>
+
+<template>
+  <figure class="wp-code" :data-size="size" :data-wrap="wrapped || undefined">
+    <figcaption v-if="!bare" class="wp-code__head">
+      <span class="wp-code__title">{{ title }}</span>
+      <span v-if="language" class="wp-code__lang">{{ language }}</span>
+      <span class="wp-code__tools">
+        <button
+          v-tooltip="wrapped ? 'Don’t wrap lines' : 'Wrap lines'"
+          type="button"
+          class="wp-code__tool"
+          :aria-pressed="wrapped"
+          aria-label="Wrap lines"
+          @click="toggleWrap"
+        ><i class="pi pi-align-left" aria-hidden="true" /></button>
+        <CopyButton :text="code" :label="`Copy ${name.toLowerCase() === 'code' ? 'code' : name}`" size="sm" />
+      </span>
+    </figcaption>
+    <pre
+      class="wp-code__pre"
+      tabindex="0"
+      :aria-label="name"
+      :style="{ maxHeight }"
+    ><code v-if="!lineNumbers" class="wp-code__code">{{ code }}</code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text">{{ l || "\u00a0" }}</span></span></code></pre>
+  </figure>
+</template>
+
+<style scoped>
+.wp-code {
+  display: flex; flex-direction: column; min-width: 0; margin: 0;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-1); overflow: hidden;
+}
+.wp-code__head {
+  display: flex; align-items: center; gap: var(--wp-space-3); min-height: 28px;
+  padding: 2px var(--wp-space-2) 2px var(--wp-space-4);
+  border-bottom: 1px solid var(--wp-border-soft); background: var(--wp-bg-2);
+  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.2 var(--wp-font-sans);
+}
+.wp-code__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp-text); }
+.wp-code__lang {
+  padding: 1px 6px; border-radius: var(--wp-radius-sm); background: var(--wp-bg-3);
+  font: 600 10px/1.4 var(--wp-font-mono); letter-spacing: 0.04em; text-transform: uppercase;
+}
+.wp-code__tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
+.wp-code__tool {
+  display: inline-grid; place-items: center; width: var(--wp-control-h-sm); height: var(--wp-control-h-sm);
+  margin: 0; padding: 0; border: 0; border-radius: var(--wp-radius-sm);
+  background: transparent; color: var(--wp-text-muted); cursor: pointer;
+}
+.wp-code__tool .pi { font-size: 11px; }
+.wp-code__tool:hover { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-code__tool[aria-pressed="true"] { color: var(--wp-accent-text); background: var(--wp-bg-3); }
+.wp-code__tool:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-code__pre {
+  margin: 0; padding: var(--wp-space-4); overflow: auto;
+  color: var(--wp-text); font: 400 var(--wp-text-sm)/1.55 var(--wp-font-mono);
+  white-space: pre; tab-size: 2;
+}
+.wp-code[data-size="sm"] .wp-code__pre { padding: var(--wp-space-3); font-size: var(--wp-text-xs); }
+.wp-code[data-wrap] .wp-code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+.wp-code__pre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
+.wp-code__code { font: inherit; background: none; padding: 0; color: inherit; }
+.wp-code__code--numbered { display: table; }
+.wp-code__line { display: table-row; }
+.wp-code__num {
+  display: table-cell; padding-right: var(--wp-space-4); text-align: right;
+  color: var(--wp-text-dim); user-select: none; font-variant-numeric: tabular-nums;
+}
+.wp-code__text { display: table-cell; }
+</style>

package/src/ColorField.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+/**
+ * A colour swatch that opens a picker: the colour square, a hex box, and
+ * (with `alpha`) an opacity number, or (with `allowNone`) a "None" choice.
+ * The value is a hex string, `#rrggbb` or `#rrggbbaa` once it is
+ * see-through, or `none`. Other text (a colour name typed in a workflow) is
+ * kept and shown as it is until a pick replaces it. Sits on the kit Popover,
+ * so it follows the swatch on scroll and closes on Escape or a click
+ * outside. Works on the canvas (`size="sm"`) and in the manager.
+ *
+ *   <ColorField v-model="labelColor" alpha allow-none size="sm" aria-label="Label band" />
+ */
+import { computed, ref, watch } from "vue";
+import HsvPicker from "./HsvPicker.vue";
+import Popover from "./Popover.vue";
+import WpNumber from "./WpNumber.vue";
+import WpButton from "./WpButton.vue";
+import { rgbToHex } from "./hsv";
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  /** Offer an opacity number (writes `#rrggbbaa`). */
+  alpha?: boolean | undefined;
+  /** Offer "None" (writes `none`). */
+  allowNone?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+  disabled?: boolean | undefined;
+  dataTest?: string | undefined;
+}>(), { alpha: false, allowNone: false, size: "sm", ariaLabel: "Colour", disabled: false, dataTest: undefined });
+
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+
+const HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+/** `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa` → `{ rgb: "#rrggbb", alpha: 0-255 }`. */
+function parse(value: string): { rgb: string; alpha: number } | null {
+  const v = value.trim();
+  if (!HEX.test(v)) return null;
+  let h = v.slice(1).toLowerCase();
+  if (h.length <= 4) h = h.split("").map((c) => c + c).join("");
+  return { rgb: `#${h.slice(0, 6)}`, alpha: h.length === 8 ? parseInt(h.slice(6), 16) : 255 };
+}
+function compose(rgb: string, alpha: number): string {
+  const a = Math.max(0, Math.min(255, Math.round(alpha)));
+  return a >= 255 ? rgb : `${rgb}${a.toString(16).padStart(2, "0")}`;
+}
+
+const open = ref(false);
+const isNone = computed(() => props.modelValue.trim().toLowerCase() === "none");
+const parsed = computed(() => parse(props.modelValue));
+const BLACK = rgbToHex({ r: 0, g: 0, b: 0 });
+const rgb = computed(() => parsed.value?.rgb ?? BLACK);
+const alphaValue = computed(() => (parsed.value ? parsed.value.alpha : 255));
+const opacity = computed(() => Math.round((alphaValue.value / 255) * 100));
+
+const shown = computed(() => (isNone.value ? "none" : props.modelValue.trim() || "none"));
+const swatch = computed(() => {
+  if (isNone.value) return "transparent";
+  const p = parsed.value;
+  if (!p) return props.modelValue;
+  return `rgba(${parseInt(p.rgb.slice(1, 3), 16)}, ${parseInt(p.rgb.slice(3, 5), 16)}, ${parseInt(p.rgb.slice(5, 7), 16)}, ${p.alpha / 255})`;
+});
+
+const draft = ref(props.modelValue);
+watch(() => props.modelValue, (v) => { draft.value = v; });
+watch(open, (v) => { if (v) draft.value = props.modelValue; });
+
+function onHsv(hex: string): void {
+  emit("update:modelValue", compose(hex, props.alpha ? alphaValue.value : 255));
+}
+function onOpacity(pct: number | null): void {
+  if (pct === null) return;
+  emit("update:modelValue", compose(rgb.value, (pct / 100) * 255));
+}
+function onDraft(ev: Event): void {
+  const v = (ev.target as HTMLInputElement).value.trim();
+  draft.value = v;
+  const p = parse(v);
+  if (p) emit("update:modelValue", compose(p.rgb, props.alpha ? p.alpha : 255));
+}
+function pickNone(): void {
+  emit("update:modelValue", "none");
+  open.value = false;
+}
+</script>
+
+<template>
+  <Popover v-model:open="open" :label="ariaLabel">
+    <template #trigger="{ props: triggerProps }">
+      <button
+        v-bind="triggerProps"
+        type="button"
+        class="wp-color-field"
+        :class="[`wp-color-field--${size}`, { 'is-none': isNone }]"
+        :disabled="disabled"
+        :aria-label="`${ariaLabel}: ${shown}`"
+        :data-test="dataTest"
+      >
+        <span class="wp-color-field__chip" aria-hidden="true">
+          <span class="wp-color-field__fill" :style="{ background: swatch }" />
+        </span>
+        <span class="wp-color-field__value" aria-hidden="true">{{ shown }}</span>
+      </button>
+    </template>
+    <div class="wp-color-field__panel" @keydown.stop>
+      <HsvPicker :model-value="rgb" :aria-label="ariaLabel" @update:model-value="onHsv" />
+      <div class="wp-color-field__row">
+        <input
+          class="wp-color-field__hex"
+          :value="draft"
+          :aria-label="`${ariaLabel} hex`"
+          spellcheck="false"
+          :data-test="dataTest ? `${dataTest}-hex` : undefined"
+          @change="onDraft"
+          @keydown.enter="onDraft"
+        >
+        <WpNumber
+          v-if="alpha"
+          class="wp-color-field__alpha"
+          :model-value="isNone ? 0 : opacity"
+          :min="0"
+          :max="100"
+          suffix="%"
+          size="sm"
+          :aria-label="`${ariaLabel} opacity`"
+          :data-test="dataTest ? `${dataTest}-alpha` : undefined"
+          @update:model-value="onOpacity"
+        />
+      </div>
+      <WpButton
+        v-if="allowNone"
+        size="sm"
+        variant="ghost"
+        icon="pi-ban"
+        :pressed="isNone"
+        :data-test="dataTest ? `${dataTest}-none` : undefined"
+        @click="pickNone"
+      >None</WpButton>
+    </div>
+  </Popover>
+</template>
+
+<style scoped>
+.wp-color-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: var(--wp-control-h-sm, 24px);
+  padding: 0 8px 0 3px;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text);
+  font: 11px var(--wp-font-mono, monospace);
+  cursor: pointer;
+}
+.wp-color-field--md { height: var(--wp-control-h-md, 32px); font-size: 12px; }
+.wp-color-field:hover:not(:disabled) { border-color: var(--wp-border-strong); }
+.wp-color-field:focus-visible { outline: 2px solid var(--wp-focus-ring); outline-offset: 1px; }
+.wp-color-field:disabled { opacity: 0.5; cursor: default; }
+.wp-color-field__chip {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  /* Checks show through a see-through colour. */
+  background: repeating-conic-gradient(var(--wp-bg-4) 0 25%, var(--wp-bg-1) 0 50%) 0 0 / 8px 8px;
+}
+.wp-color-field__fill { position: absolute; inset: 0; }
+.wp-color-field.is-none .wp-color-field__chip::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--wp-danger) 50%, transparent calc(50% + 1px));
+}
+.wp-color-field__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-color-field.is-none .wp-color-field__value { color: var(--wp-text-dim); font-family: var(--wp-font-sans, sans-serif); }
+
+.wp-color-field__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 200px;
+  padding: 0;
+}
+.wp-color-field__row { display: flex; gap: 6px; align-items: center; }
+.wp-color-field__hex {
+  flex: 1;
+  min-width: 0;
+  height: var(--wp-control-h-sm, 24px);
+  padding: 0 6px;
+  background: var(--wp-bg-1);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  font: 11px var(--wp-font-mono, monospace);
+  outline: none;
+}
+.wp-color-field__hex:focus { border-color: var(--wp-border-focus); }
+.wp-color-field__alpha { width: 72px; flex: none; }
+</style>

package/src/ColorPicker.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import Popover from "./Popover.vue";
+import Input from "./Input.vue";
+import HsvPicker from "./HsvPicker.vue";
+import { COLOUR_PRESETS } from "./colour-presets";
+
+interface Props {
+  modelValue: string;
+  presets?: string[] | undefined;
+  ariaLabel?: string | undefined;
+  /** Swatch and chevron only, for a tight spot such as a name row. */
+  compact?: boolean | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  presets: () => [...COLOUR_PRESETS],
+  ariaLabel: undefined,
+  compact: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+
+const open = ref(false);
+const hexDraft = ref(props.modelValue);
+
+watch(() => props.modelValue, (v) => {
+  hexDraft.value = v;
+});
+// A fresh draft each time it opens, so a half-typed hex doesn't linger.
+watch(open, (v) => { if (v) hexDraft.value = props.modelValue; });
+
+const swatchColor = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue : "transparent"));
+const shownHex = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue.toLowerCase() : "No colour"));
+
+const swatchAriaLabel = computed(
+  () => props.ariaLabel ?? `Pick color, current ${props.modelValue}`,
+);
+
+function close() {
+  open.value = false;
+}
+
+function selectPreset(preset: string) {
+  emit("update:modelValue", preset);
+  close();
+}
+
+function onHexInput(value: string) {
+  hexDraft.value = value;
+  if (HEX_RE.test(value)) {
+    emit("update:modelValue", value);
+  }
+}
+
+function isActivePreset(preset: string): boolean {
+  return preset.toLowerCase() === props.modelValue.toLowerCase();
+}
+</script>
+
+<template>
+  <!-- A swatch button that says what it holds (colour, hex, chevron), on the
+       kit Popover so the panel follows it on scroll and closes on Escape or
+       a click outside. -->
+  <Popover v-model:open="open" :label="swatchAriaLabel">
+    <template #trigger="{ props: triggerProps }">
+      <button
+        v-bind="triggerProps"
+        type="button"
+        class="wp-color-picker__trigger"
+        :class="{ 'wp-color-picker__trigger--compact': compact }"
+        :aria-label="swatchAriaLabel"
+        data-test="color-trigger"
+      >
+        <span
+          class="wp-color-picker__swatch"
+          :style="{ background: swatchColor }"
+          data-test="color-swatch"
+          aria-hidden="true"
+        />
+        <span v-if="!compact" class="wp-color-picker__value" aria-hidden="true">{{ shownHex }}</span>
+        <i class="pi pi-chevron-down wp-color-picker__caret" aria-hidden="true" />
+      </button>
+    </template>
+    <div class="wp-color-picker__popover">
+      <div class="wp-color-picker__row">
+        <Input
+          :model-value="hexDraft"
+          aria-label="Hex color value"
+          class="wp-color-picker__hex"
+          data-test="color-hex-input"
+          @update:model-value="(v) => onHexInput(String(v ?? ''))"
+        />
+      </div>
+      <HsvPicker
+        :model-value="props.modelValue"
+        :aria-label="swatchAriaLabel"
+        @update:model-value="(v) => emit('update:modelValue', v)"
+      />
+      <div class="wp-color-picker__palette" role="listbox" aria-label="Preset colors">
+        <button
+          v-for="preset in props.presets"
+          :key="preset"
+          type="button"
+          class="wp-color-picker__chip"
+          :style="{ background: preset }"
+          :title="preset"
+          :data-active="isActivePreset(preset)"
+          :aria-label="`Use preset ${preset}`"
+          data-test="color-preset"
+          @click="selectPreset(preset)"
+        />
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<style scoped>
+.wp-color-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  height: var(--wp-control-h-md, 32px);
+  min-width: 128px;
+  padding: 0 var(--wp-space-4) 0 var(--wp-space-2);
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text);
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.wp-color-picker__trigger--compact { min-width: 0; padding: 0 var(--wp-space-3) 0 var(--wp-space-2); gap: var(--wp-space-2); }
+.wp-color-picker__trigger:hover { border-color: var(--wp-border-strong); }
+.wp-color-picker__trigger:focus-visible { outline: none; border-color: var(--wp-accent-500); box-shadow: var(--wp-focus-ring); }
+.wp-color-picker__swatch {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  /* An inner ring keeps a dark swatch visible on a dark field. */
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 22%, transparent);
+}
+.wp-color-picker__value {
+  flex: 1;
+  text-align: left;
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-text-muted);
+}
+.wp-color-picker__caret { font-size: 9px; color: var(--wp-text-dim); }
+
+.wp-color-picker__popover {
+  width: 220px;
+  padding: var(--wp-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp-space-5);
+}
+.wp-color-picker__row {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+}
+
+.wp-color-picker__hex {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--wp-font-mono);
+  font-size: var(--wp-text-sm);
+}
+
+.wp-color-picker__palette {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--wp-space-3);
+}
+
+.wp-color-picker__chip {
+  /* Span the grid cell instead of locking at 32px so the swatches reach
+   * both edges of the popover. aspect-ratio keeps them square as the
+   * cell width changes with popover size. */
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  min-width: 0;
+  border-radius: var(--wp-radius-sm);
+  border: 1px solid var(--wp-border);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.08s, box-shadow 0.12s;
+}
+.wp-color-picker__chip:hover { transform: scale(1.08); }
+.wp-color-picker__chip[data-active="true"] {
+  box-shadow: 0 0 0 2px var(--wp-bg-2), 0 0 0 4px var(--wp-accent-500);
+}
+</style>