@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/ImageGrid.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * A grid of image tiles that fills its width (tiles at least `min-size`
+ * wide). A click or Enter opens the image in a Lightbox, where ← / → step
+ * through the rest. With `selectable` each tile gets a check box in its
+ * corner and `v-model:selected` holds the picked ids.
+ *
+ *   <ImageGrid :images="outputs" />
+ *   <ImageGrid v-model:selected="keep" :images="frames" selectable :min-size="96" />
+ *
+ * Tiles are buttons in reading order (one Tab stop each); a tile with no
+ * `src` draws a Skeleton-like block while it loads.
+ */
+import { computed, ref } from "vue";
+import Lightbox from "./Lightbox.vue";
+import WpCheck from "./WpCheck.vue";
+
+export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
+
+const props = withDefaults(defineProps<{
+  images: GridImage[];
+  /** Smallest tile width in px. */
+  minSize?: number | undefined;
+  /** Width / height of a tile. */
+  aspect?: number | undefined;
+  gap?: "sm" | "md" | undefined;
+  selectable?: boolean | undefined;
+  selected?: string[] | undefined;
+  /** Open the Lightbox on a click (off: emit `open` and do your own thing). */
+  lightbox?: boolean | undefined;
+  ariaLabel?: string | undefined;
+}>(), { minSize: 120, aspect: 1, gap: "md", selectable: false, selected: () => [], lightbox: true, ariaLabel: "Images" });
+
+const emit = defineEmits<{
+  (e: "update:selected", v: string[]): void;
+  (e: "open", index: number): void;
+}>();
+
+const open = ref(false);
+const at = ref(0);
+const shots = computed(() => props.images.map((i) => ({ src: i.src, alt: i.alt, caption: i.caption })));
+
+function show(i: number): void {
+  emit("open", i);
+  if (!props.lightbox) return;
+  at.value = i;
+  open.value = true;
+}
+
+function toggle(id: string, on: boolean): void {
+  emit("update:selected", on ? [...props.selected, id] : props.selected.filter((x) => x !== id));
+}
+</script>
+
+<template>
+  <div class="wp-image-grid">
+  <ul
+    class="wp-image-grid__list"
+    :data-gap="gap"
+    :aria-label="ariaLabel"
+    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
+  >
+    <li
+      v-for="(img, i) in images"
+      :key="img.id"
+      class="wp-image-grid__tile"
+      :data-selected="(selectable && props.selected.includes(img.id)) || undefined"
+    >
+      <button
+        type="button"
+        class="wp-image-grid__open"
+        :aria-label="selectable ? `Open ${img.alt}` : img.alt"
+        @click="show(i)"
+      >
+        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
+        <span v-else class="wp-image-grid__empty" aria-hidden="true" />
+      </button>
+      <WpCheck
+        v-if="selectable"
+        class="wp-image-grid__check"
+        :model-value="props.selected.includes(img.id)"
+        :aria-label="`Select ${img.alt}`"
+        @update:model-value="toggle(img.id, $event)"
+      />
+      <span v-if="img.caption" class="wp-image-grid__caption">{{ img.caption }}</span>
+    </li>
+  </ul>
+  <Lightbox v-if="lightbox" v-model:open="open" v-model:index="at" :images="shots" />
+  </div>
+</template>
+
+<style scoped>
+.wp-image-grid { min-width: 0; }
+.wp-image-grid__list {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--_min), 1fr));
+  gap: var(--wp-space-3); margin: 0; padding: 0; list-style: none;
+}
+.wp-image-grid__list[data-gap="sm"] { gap: var(--wp-space-1); }
+.wp-image-grid__tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.wp-image-grid__open {
+  display: block; width: 100%; aspect-ratio: var(--_aspect); padding: 0; overflow: hidden;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-2); cursor: zoom-in;
+  transition: border-color var(--wp-motion-hover), box-shadow var(--wp-motion-hover);
+}
+.wp-image-grid__open:hover { border-color: var(--wp-border-strong); }
+.wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: 0 0 0 3px var(--wp-focus-ring); }
+.wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
+.wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.wp-image-grid__empty {
+  display: block; width: 100%; height: 100%;
+  background: linear-gradient(90deg, var(--wp-bg-2) 0%, var(--wp-bg-3) 50%, var(--wp-bg-2) 100%);
+  background-size: 200% 100%; animation: wp-image-grid-shimmer var(--wp-motion-shimmer) infinite;
+}
+@keyframes wp-image-grid-shimmer { to { background-position: -200% 0; } }
+.wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
+.wp-image-grid__caption {
+  overflow: hidden; color: var(--wp-text-muted); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+  text-overflow: ellipsis; white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-image-grid__open { transition: none; }
+  .wp-image-grid__empty { animation: none; }
+}
+</style>

package/src/InlineEdit.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/**
+ * Inline edit: a name that turns into a text box where it stands. Click it
+ * (or focus it and press Enter or F2), type, then Enter or a click away
+ * saves and Escape puts the old text back. Works on the canvas and in the
+ * manager.
+ *
+ *   <InlineEdit v-model="mod.name" label="Wildcard name" />
+ *   <InlineEdit v-model="title" label="Chat title" :validate="(v) => taken(v) ? 'That name is taken' : null" />
+ *
+ * Read view is a button named "Rename <label>: <value>", with a pencil on
+ * hover and focus. An empty or invalid value keeps the box open with the
+ * message under it; `update:modelValue` only fires on a saved change.
+ */
+import { computed, nextTick, ref, useId } from "vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  /** What is being renamed, e.g. "Wildcard name". */
+  label: string;
+  placeholder?: string | undefined;
+  /** Return a message to refuse the value, or null to take it. */
+  validate?: ((v: string) => string | null) | undefined;
+  /** Refuse an empty value. On by default. */
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Trim spaces from both ends before saving. */
+  trim?: boolean | undefined;
+  maxlength?: number | undefined;
+}>(), { placeholder: "Untitled", required: true, size: "md", trim: true, maxlength: undefined });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "edit"): void;
+  (e: "cancel"): void;
+}>();
+
+const editing = ref(false);
+const draft = ref("");
+const error = ref<string | null>(null);
+const inputEl = ref<HTMLInputElement | null>(null);
+const readEl = ref<HTMLButtonElement | null>(null);
+const errId = `wp-inline-edit-${useId()}`;
+
+const shown = computed(() => props.modelValue || props.placeholder);
+
+async function open(): Promise<void> {
+  if (props.disabled || editing.value) return;
+  draft.value = props.modelValue;
+  error.value = null;
+  editing.value = true;
+  emit("edit");
+  await nextTick();
+  inputEl.value?.focus();
+  inputEl.value?.select();
+}
+
+function check(v: string): string | null {
+  if (props.required && !v) return `${props.label} can't be empty`;
+  return props.validate?.(v) ?? null;
+}
+
+async function close(): Promise<void> {
+  editing.value = false;
+  error.value = null;
+  await nextTick();
+  readEl.value?.focus();
+}
+
+function save(refocus = true): void {
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  const msg = check(v);
+  if (msg) {
+    error.value = msg;
+    return;
+  }
+  if (v !== props.modelValue) emit("update:modelValue", v);
+  if (refocus) void close();
+  else { editing.value = false; error.value = null; }
+}
+
+function cancel(): void {
+  if (!editing.value) return;
+  emit("cancel");
+  void close();
+}
+
+function onBlur(): void {
+  // A click away saves; a value that can't be saved is put back instead of
+  // leaving a box open that nobody is looking at.
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  if (check(v)) { editing.value = false; error.value = null; emit("cancel"); return; }
+  save(false);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key === "Enter") { ev.preventDefault(); save(); }
+  else if (ev.key === "Escape") { ev.preventDefault(); ev.stopPropagation(); cancel(); }
+}
+
+function onReadKey(ev: KeyboardEvent): void {
+  if (ev.key === "F2") { ev.preventDefault(); void open(); }
+}
+</script>
+
+<template>
+  <span class="wp-inline-edit" :data-size="size" :data-editing="editing || undefined">
+    <template v-if="editing">
+      <input
+        ref="inputEl"
+        v-model="draft"
+        class="wp-inline-edit__input"
+        type="text"
+        :aria-label="label"
+        :aria-invalid="error ? 'true' : undefined"
+        :aria-describedby="error ? errId : undefined"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        @keydown="onKeydown"
+        @blur="onBlur"
+      >
+      <span v-if="error" :id="errId" class="wp-inline-edit__error" role="alert">{{ error }}</span>
+    </template>
+    <button
+      v-else
+      ref="readEl"
+      type="button"
+      class="wp-inline-edit__read"
+      :data-empty="!modelValue || undefined"
+      :aria-label="`Rename ${label}: ${modelValue || placeholder}`"
+      :disabled="disabled"
+      @click="open"
+      @keydown="onReadKey"
+    >
+      <span class="wp-inline-edit__text">{{ shown }}</span>
+      <i class="pi pi-pencil wp-inline-edit__pen" aria-hidden="true" />
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.wp-inline-edit {
+  --_h: var(--wp-control-h-md);
+  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%;
+  /* The padding of the hover box sits outside the text's line. */
+  margin-left: calc(var(--wp-space-3) * -1);
+  font: inherit; vertical-align: middle;
+}
+.wp-inline-edit[data-size="sm"] { --_h: var(--wp-control-h-sm); }
+.wp-inline-edit[data-size="lg"] { --_h: var(--wp-control-h-lg); }
+.wp-inline-edit__read, .wp-inline-edit__input {
+  box-sizing: border-box; height: var(--_h); margin: 0; min-width: 0;
+  padding: 0 var(--wp-space-3); border-radius: var(--wp-radius-sm);
+  font: inherit; color: var(--wp-text);
+}
+.wp-inline-edit__read {
+  display: inline-flex; align-items: center; gap: var(--wp-space-3); max-width: 100%;
+  border: 1px solid transparent; background: transparent; cursor: text; text-align: left;
+  transition: background var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-inline-edit__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-inline-edit__read[data-empty] .wp-inline-edit__text { color: var(--wp-text-dim); font-style: italic; }
+.wp-inline-edit__pen { flex: none; font-size: 0.8em; color: var(--wp-text-dim); opacity: 0; transition: opacity var(--wp-motion-hover); }
+.wp-inline-edit__read:hover:not(:disabled) { background: var(--wp-row-hover); border-color: var(--wp-border-soft); }
+.wp-inline-edit__read:hover .wp-inline-edit__pen, .wp-inline-edit__read:focus-visible .wp-inline-edit__pen { opacity: 1; }
+.wp-inline-edit__read:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-inline-edit__read:disabled { cursor: default; }
+.wp-inline-edit__input {
+  width: 100%; min-width: 12ch;
+  border: 1px solid var(--wp-border-focus); background: var(--wp-bg-1); outline: none;
+  box-shadow: 0 0 0 3px var(--wp-focus-ring);
+}
+.wp-inline-edit__input[aria-invalid="true"] { border-color: var(--wp-error-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-danger) 22%, transparent); }
+.wp-inline-edit__error {
+  margin-top: 2px; color: var(--wp-error-text); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-inline-edit__read, .wp-inline-edit__pen { transition: none; }
+}
+</style>

package/src/Input.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * Text field. Number fields use WpNumber (`WpNumber.vue`)
+ * and search boxes use SearchInput; this one no longer has a number mode.
+ */
+import { computed } from "vue";
+import Icon from "./Icon.vue";
+
+interface Props {
+  modelValue: string;
+  type?: "text" | "email" | "url" | "password" | "tel" | undefined;
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+  /** Shown but not editable: dimmer fill, no focus ring, a lock icon. */
+  readonly?: boolean | undefined;
+  error?: boolean | undefined;
+  /** Height on the control scale: sm 24 / md 32 / lg 40. */
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Icon before the text (a search glass). Drawn inline, no box. */
+  icon?: string | undefined;
+  /** Text before the value, e.g. `$` for a variable name. */
+  prefix?: string | undefined;
+  /** Text after the value, e.g. a unit. */
+  suffix?: string | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  size: "md",
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "blur", evt: FocusEvent): void;
+  (e: "focus", evt: FocusEvent): void;
+}>();
+
+const inputClasses = computed(() => [
+  "wp-input",
+  props.size === "sm" && "wp-input--sm",
+  props.size === "lg" && "wp-input--lg",
+]);
+
+const wrapped = computed(() => Boolean(props.icon || props.prefix || props.suffix || props.readonly));
+const groupClasses = computed(() => [
+  "wp-input-group",
+  props.size === "sm" && "wp-input-group--sm",
+  props.size === "lg" && "wp-input-group--lg",
+  props.readonly && "wp-input-group--readonly",
+  props.disabled && "wp-input-group--disabled",
+]);
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
+    <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
+      <Icon :name="icon" />
+    </span>
+    <span v-if="prefix" class="wp-input-group__affix wp-input-group__affix--prefix" aria-hidden="true">{{ prefix }}</span>
+    <input
+      :id="id"
+      :class="inputClasses"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :aria-label="ariaLabel"
+      :aria-invalid="error || undefined"
+      @input="onInput"
+      @blur="(e) => emit('blur', e)"
+      @focus="(e) => emit('focus', e)"
+    />
+    <span v-if="suffix" class="wp-input-group__affix wp-input-group__affix--suffix" aria-hidden="true">{{ suffix }}</span>
+    <span v-if="readonly" class="wp-input-group__lock" aria-hidden="true">
+      <Icon name="pi-lock" :size="11" />
+    </span>
+  </div>
+  <input
+    v-else
+    :id="id"
+    :class="inputClasses"
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :aria-label="ariaLabel"
+    :aria-invalid="error || undefined"
+    @input="onInput"
+    @blur="(e) => emit('blur', e)"
+    @focus="(e) => emit('focus', e)"
+  />
+</template>

package/src/Kbd.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * Kbd: a keyboard shortcut drawn as keys. `Mod` reads ⌘ on a Mac and Ctrl
+ * elsewhere (from `platform-keys.ts`), so one string fits everyone. Works on
+ * the canvas and in the manager.
+ *
+ *   <Kbd keys="Mod+K" />
+ *   <Kbd :keys="['Shift', 'Enter']" />
+ *
+ * Screen readers hear the whole chord once ("Control plus K"); the key caps
+ * themselves are hidden from them.
+ */
+import { computed } from "vue";
+import { isApplePlatform } from "./platform-keys";
+
+const props = withDefaults(defineProps<{
+  /** "Mod+Shift+P" or ["Mod", "Shift", "P"]. */
+  keys: string | string[];
+  size?: "sm" | "md" | undefined;
+}>(), { size: "md" });
+
+const MAC: Record<string, string> = { Mod: "⌘", Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Enter: "↵" };
+const SPOKEN: Record<string, string> = {
+  "⌘": "Command", Ctrl: "Control", "⌃": "Control", Alt: "Alt", "⌥": "Option", Shift: "Shift", "⇧": "Shift",
+  Enter: "Enter", "↵": "Enter", Esc: "Escape", "↑": "Up", "↓": "Down", "←": "Left", "→": "Right",
+};
+
+const caps = computed(() => {
+  const list = Array.isArray(props.keys) ? props.keys : props.keys.split(/\+(?!$)/);
+  const mac = isApplePlatform();
+  return list.map((k) => k.trim()).filter(Boolean).map((k) => (k === "Mod" ? (mac ? "⌘" : "Ctrl") : mac ? MAC[k] ?? k : k));
+});
+const spoken = computed(() => caps.value.map((k) => SPOKEN[k] ?? k).join(" plus "));
+</script>
+
+<template>
+  <kbd class="wp-kbd-keys" :data-size="size" :aria-label="spoken">
+    <template v-for="(k, i) in caps" :key="i">
+      <span v-if="i > 0" class="wp-kbd-keys__plus" aria-hidden="true">+</span>
+      <kbd class="wp-kbd-keys__cap" aria-hidden="true">{{ k }}</kbd>
+    </template>
+  </kbd>
+</template>
+
+<style scoped>
+.wp-kbd-keys { display: inline-flex; align-items: center; gap: 2px; font: inherit; vertical-align: baseline; }
+.wp-kbd-keys__plus { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
+.wp-kbd-keys__cap {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  border: 1px solid var(--wp-border-strong); border-bottom-width: 2px; border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg-2); color: var(--wp-text-muted);
+  font: 500 11px/1 var(--wp-font-mono); white-space: nowrap;
+}
+.wp-kbd-keys[data-size="sm"] .wp-kbd-keys__cap { min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; }
+</style>

package/src/KindChip.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * The module-type chip: `wildcard`, `fixed_values`, `combine`, `constraint`,
+ * `derivation` or `bundle`, in the kind colour the extension uses for that
+ * type everywhere (`--wp-kind-*`; bundles are slate, `--wp-bundle-default`).
+ *
+ *   <KindChip kind="module" subtype="wildcard" />
+ *   <KindChip kind="bundle" />
+ *
+ * A module with no subtype reads as `fixed_values`, the oldest type.
+ */
+import { computed } from "vue";
+
+export type KindChipSubtype = "fixed_values" | "combine" | "wildcard" | "constraint" | "derivation";
+
+const props = defineProps<{
+  kind: "module" | "bundle";
+  /** A `"bundle"` subtype reads as a bundle too (some APIs report it so). */
+  subtype?: KindChipSubtype | "bundle" | null | undefined;
+}>();
+
+const type = computed(() => (props.kind === "bundle" ? "bundle" : (props.subtype ?? "fixed_values")));
+</script>
+
+<template>
+  <span class="wp-kind-chip" :data-type="type">{{ type }}</span>
+</template>
+
+<style scoped>
+.wp-kind-chip {
+  --kind-chip-c: var(--wp-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: var(--wp-radius-cap, 999px);
+  font-family: var(--wp-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  color: var(--kind-chip-c);
+  background: color-mix(in oklab, var(--kind-chip-c) 14%, transparent);
+  border: 1px solid color-mix(in oklab, var(--kind-chip-c) 38%, transparent);
+}
+.wp-kind-chip[data-type="fixed_values"] { --kind-chip-c: var(--wp-kind-fixed); }
+.wp-kind-chip[data-type="combine"] { --kind-chip-c: var(--wp-kind-combine); }
+.wp-kind-chip[data-type="wildcard"] { --kind-chip-c: var(--wp-kind-wildcard); }
+.wp-kind-chip[data-type="constraint"] { --kind-chip-c: var(--wp-kind-constraint); }
+.wp-kind-chip[data-type="derivation"] { --kind-chip-c: var(--wp-kind-derivation); }
+.wp-kind-chip[data-type="bundle"] { --kind-chip-c: var(--wp-bundle-default); }
+</style>