@orvui/vue 0.0.0-stage → 0.1.0

package/src/blocks/card-folder/src/CardFolder.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { getCurrentInstance } from "vue";
+import { motion, AnimatePresence } from "motion-v";
+import { Eye, EyeOff, EllipsisVertical } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { DigitSwap } from "../../../motion/number";
+import { RenderNode, type Content } from "../../shared";
+import { SPRING_LAYOUT, SPRING_PRESS, EASE_OUT } from "../../../lib/ease";
+import { useCardFolder } from "./use-card-folder";
+import { purseOutline, purseSeam } from "./purse-shape";
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    cardNumber: string;
+    expiry: string;
+    cvv: string;
+    card?: Content;
+    open?: boolean;
+    defaultOpen?: boolean;
+    detailsVisible?: boolean;
+    defaultDetailsVisible?: boolean;
+    actionLabel?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    cardClassName?: string;
+  }>(),
+  {
+    open: undefined,
+    detailsVisible: undefined,
+    defaultOpen: false,
+    defaultDetailsVisible: false,
+  },
+);
+const emit = defineEmits<{
+    "update:open": [open: boolean];
+    openChange: [open: boolean];
+    "update:detailsVisible": [visible: boolean];
+    detailsVisibleChange: [visible: boolean];
+    click: [];
+    action: [];
+  }>(),
+  instance = getCurrentInstance(),
+  hasAction = () => !!instance?.vnode.props?.onAction;
+const {
+  open,
+  details,
+  reduce,
+  cardTransform,
+  backTransform,
+  frontTransform,
+  purseOpacity,
+  lastFour,
+  revealed,
+  ariaLabel,
+  toggle,
+} = useCardFolder(props, {
+  open(value) {
+    emit("update:open", value);
+    emit("openChange", value);
+  },
+  details(value) {
+    emit("update:detailsVisible", value);
+    emit("detailsVisibleChange", value);
+  },
+  click() {
+    emit("click");
+  },
+});
+</script>
+<template>
+  <div
+    :data-open="open"
+    :data-details-visible="details"
+    class="relative aspect-[1029/592] w-96 max-w-full select-none [perspective:1200px]"
+  >
+    <motion.button
+      type="button"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      :aria-expanded="open"
+      class="absolute inset-0 block rounded-2xl text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
+      :while-press="reduce || disabled ? undefined : { scale: 0.96 }"
+      :transition="reduce ? { duration: 0 } : SPRING_PRESS"
+      @click="toggle"
+      ><motion.span
+        data-slot="card-folder-back"
+        aria-hidden="true"
+        :initial="false"
+        :animate="reduce ? { opacity: open ? 0 : 1 } : undefined"
+        :transition="{ duration: 0.16, ease: EASE_OUT }"
+        :style="
+          reduce
+            ? undefined
+            : { opacity: purseOpacity, transform: backTransform }
+        "
+        class="absolute inset-x-0 bottom-0 top-[10%] rounded-2xl border border-foreground/10 bg-background [transform-origin:center_bottom]" /><motion.span
+        aria-hidden="true"
+        :initial="false"
+        :animate="reduce ? { transform: 'translateY(0%) scale(1)' } : undefined"
+        :style="reduce ? undefined : { transform: cardTransform }"
+        :class="
+          cn(
+            'absolute left-[4.7%] right-[4.7%] top-0 z-10 aspect-[1.586/1] overflow-hidden rounded-xl border border-foreground/10 bg-background [transform-origin:center_bottom] will-change-transform',
+            cardClassName,
+          )
+        "
+        ><slot name="card"><RenderNode :node="card" /></slot></motion.span
+    ></motion.button>
+    <motion.span
+      :aria-hidden="open"
+      :inert="open || undefined"
+      :initial="false"
+      :animate="reduce ? { opacity: open ? 0 : 1 } : undefined"
+      :transition="{ duration: 0.16, ease: EASE_OUT }"
+      :style="
+        reduce
+          ? undefined
+          : { opacity: purseOpacity, transform: frontTransform }
+      "
+      class="pointer-events-none absolute inset-x-0 bottom-0 top-1/2 z-20 [backface-visibility:hidden] [transform-origin:center_bottom]"
+      ><svg
+        aria-hidden="true"
+        viewBox="0 0 384 110"
+        preserveAspectRatio="none"
+        class="absolute inset-0 size-full overflow-visible"
+      >
+        <path
+          :d="purseOutline"
+          fill="var(--background)"
+          stroke="var(--foreground)"
+          stroke-opacity=".12"
+          vector-effect="non-scaling-stroke"
+        />
+        <path
+          :d="purseSeam"
+          fill="none"
+          stroke="var(--foreground)"
+          stroke-dasharray="5 5"
+          stroke-linecap="round"
+          stroke-opacity=".22"
+          vector-effect="non-scaling-stroke"
+        /></svg
+      ><span
+        class="absolute inset-x-[5%] inset-y-0 z-10 flex min-w-0 flex-col justify-between py-4"
+        ><span class="flex items-start justify-between pr-2"
+          ><motion.button
+            type="button"
+            :disabled="disabled"
+            :tabindex="open ? -1 : undefined"
+            :aria-label="details ? 'Hide card details' : 'Show card details'"
+            :aria-pressed="details"
+            :class="
+              cn(
+                'z-30 flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:opacity-50',
+                open ? 'pointer-events-none' : 'pointer-events-auto',
+              )
+            "
+            :while-press="reduce || disabled ? undefined : { scale: 0.96 }"
+            :transition="SPRING_PRESS"
+            @click="!disabled && (details = !details)"
+            ><AnimatePresence :initial="false" mode="popLayout"
+              ><motion.span
+                :key="details ? 'hide' : 'show'"
+                :initial="
+                  reduce
+                    ? { opacity: 0 }
+                    : { opacity: 0, scale: 0.25, filter: 'blur(4px)' }
+                "
+                :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)' }"
+                :exit="
+                  reduce
+                    ? { opacity: 0 }
+                    : { opacity: 0, scale: 0.25, filter: 'blur(4px)' }
+                "
+                :transition="
+                  reduce
+                    ? { duration: 0.12 }
+                    : { type: 'spring', duration: 0.3, bounce: 0 }
+                "
+                ><component
+                  :is="details ? EyeOff : Eye"
+                  class="size-4" /></motion.span></AnimatePresence></motion.button
+          ><span class="flex shrink-0 items-end gap-3.5 pt-2"
+            ><span class="flex flex-col gap-0.5"
+              ><span
+                class="text-[9px] font-medium uppercase tracking-[.12em] text-muted-foreground/75"
+                >Expiry</span
+              ><span class="text-xs font-medium tabular-nums">{{
+                expiry
+              }}</span></span
+            ><span class="flex flex-col gap-0.5"
+              ><span
+                class="text-[9px] font-medium uppercase tracking-[.12em] text-muted-foreground/75"
+                >CVV</span
+              ><DigitSwap
+                :value="details ? cvv : '•'.repeat(Math.max(3, cvv.length))"
+                :animation-key="details ? 'revealed' : 'masked'"
+                :direction="details ? 'up' : 'down'"
+                class="text-xs font-medium tabular-nums" /></span></span></span
+        ><span class="flex min-w-0 items-baseline justify-between gap-4"
+          ><span class="truncate text-lg font-medium leading-tight">{{
+            title
+          }}</span
+          ><DigitSwap
+            :value="details ? revealed : '•••• •••• •••• ' + lastFour"
+            :animation-key="details ? 'revealed' : 'masked'"
+            :direction="details ? 'up' : 'down'"
+            :suffix-length="4"
+            :glyph-class-name="
+              details ? 'text-foreground' : 'text-muted-foreground'
+            "
+            suffix-class-name="text-foreground"
+            class="truncate font-mono text-xs tracking-[.08em] tabular-nums" /></span></span
+    ></motion.span>
+    <motion.button
+      v-if="hasAction()"
+      type="button"
+      :disabled="disabled"
+      :aria-label="actionLabel || 'Open actions for ' + title"
+      :animate="{ y: open && !reduce ? -14 : 0 }"
+      :while-press="reduce || disabled ? undefined : { scale: 0.96 }"
+      :transition="reduce ? { duration: 0 } : SPRING_LAYOUT"
+      class="absolute right-[2.6%] top-[10%] z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full text-white/65 outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white disabled:opacity-50"
+      @click="emit('action')"
+      ><EllipsisVertical class="size-4"
+    /></motion.button>
+  </div>
+</template>

package/src/blocks/card-folder/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type CardFolderProps = InstanceType<
+  (typeof import("./CardFolder.vue"))["default"]
+>["$props"];

package/src/blocks/card-folder/src/purse-shape.ts

@@ -0,0 +1,41 @@
+type Segment = readonly [string, ...number[]];
+const outline: Segment[] = [
+  ["M", 0, 17],
+  ["C", 15, 7, 31, 4, 49, 4],
+  ["H", 87],
+  ["C", 110, 4, 126, 17, 144, 32],
+  ["L", 158, 44],
+  ["C", 176, 59, 206, 59, 225, 43],
+  ["L", 240, 30],
+  ["C", 257, 16, 271, 4, 295, 4],
+  ["H", 335],
+  ["C", 354, 4, 370, 8, 384, 18],
+  ["V", 94],
+  ["C", 384, 103, 377, 110, 368, 110],
+  ["H", 16],
+  ["C", 7, 110, 0, 103, 0, 94],
+  ["Z"],
+];
+const seam: Segment[] = [
+  ["M", 10, 21],
+  ["C", 22, 13, 35, 11, 51, 11],
+  ["H", 85],
+  ["C", 105, 11, 120, 23, 137, 37],
+  ["L", 153, 50],
+  ["C", 175, 68, 208, 68, 231, 49],
+  ["L", 246, 36],
+  ["C", 262, 23, 275, 11, 297, 11],
+  ["H", 333],
+  ["C", 350, 11, 363, 14, 374, 22],
+  ["V", 89],
+  ["C", 374, 97, 369, 101, 360, 101],
+  ["H", 24],
+  ["C", 15, 101, 10, 96, 10, 89],
+  ["Z"],
+];
+const path = (segments: Segment[]) =>
+  segments
+    .map(([command, ...coordinates]) => command + coordinates.join(" "))
+    .join(" ");
+export const purseOutline = path(outline),
+  purseSeam = path(seam);

package/src/blocks/card-folder/src/use-card-folder.ts

@@ -0,0 +1,106 @@
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
+import { animate, useMotionValue, useTransform } from "motion-v";
+import { useControllable, useReduced } from "../../shared";
+import { EASE_IN_OUT } from "../../../lib/ease";
+export function useCardFolder(
+  props: {
+    open?: boolean;
+    defaultOpen: boolean;
+    detailsVisible?: boolean;
+    defaultDetailsVisible: boolean;
+    cardNumber: string;
+    ariaLabel?: string;
+    title: string;
+    expiry: string;
+    disabled?: boolean;
+  },
+  events: {
+    open: (show: boolean) => void;
+    details: (show: boolean) => void;
+    click: () => void;
+  },
+) {
+  const open = useControllable(
+      () => props.open,
+      props.defaultOpen,
+      events.open,
+    ),
+    details = useControllable(
+      () => props.detailsVisible,
+      props.defaultDetailsVisible,
+      events.details,
+    ),
+    reduce = useReduced();
+  const progress = useMotionValue(open.value ? 1 : 0);
+  const cardTransform = useTransform(progress, (value) => {
+    const lift = Math.sin(Math.PI * Math.max(0, Math.min(1, value)));
+    return `translateY(${-8 * lift}%) scale(${1 + 0.01 * lift})`;
+  });
+  const backTransform = useTransform(
+    progress,
+    [0, 1],
+    ["translateY(0%) scaleY(1)", "translateY(18%) scaleY(.18)"],
+  );
+  const frontTransform = useTransform(
+    progress,
+    [0, 1],
+    ["translateY(0%) rotateX(0deg)", "translateY(18%) rotateX(-72deg)"],
+  );
+  const purseOpacity = useTransform(progress, [0, 0.76, 1], [1, 1, 0]);
+  let control: ReturnType<typeof animate> | undefined,
+    ready = false;
+  function sync() {
+    if (!ready) return;
+    control?.stop();
+    control = animate(
+      progress,
+      open.value ? 1 : 0,
+      reduce.value ? { duration: 0 } : { duration: 0.28, ease: EASE_IN_OUT },
+    );
+  }
+  watch([open, reduce], sync);
+  onMounted(() => {
+    ready = true;
+    sync();
+  });
+  onBeforeUnmount(() => {
+    ready = false;
+    control?.stop();
+  });
+  const digits = computed(() =>
+    Array.from(props.cardNumber)
+      .filter((char) => char >= "0" && char <= "9")
+      .join(""),
+  );
+  const lastFour = computed(() => digits.value.slice(-4).padStart(4, "•"));
+  const revealed = computed(() =>
+    digits.value
+      ? Array.from({ length: Math.ceil(digits.value.length / 4) }, (_, index) =>
+          digits.value.slice(index * 4, index * 4 + 4),
+        ).join(" ")
+      : lastFour.value,
+  );
+  const ariaLabel = computed(
+    () =>
+      props.ariaLabel ??
+      `${open.value ? "Close" : "Open"} ${props.title}, card ending in ${lastFour.value}, expires ${props.expiry}`,
+  );
+  function toggle() {
+    if (props.disabled) return;
+    open.value = !open.value;
+    events.click();
+  }
+  return {
+    open,
+    details,
+    reduce,
+    cardTransform,
+    backTransform,
+    frontTransform,
+    purseOpacity,
+    lastFour,
+    revealed,
+    ariaLabel,
+    toggle,
+  };
+}

package/src/blocks/command-palette/index.ts

@@ -0,0 +1,4 @@
+export { default as CommandPalette } from "./src/CommandPalette.vue";
+export type { CommandItem } from "./src/CommandPalette.vue";
+
+export type * from "./src/api-types";

package/src/blocks/command-palette/src/CommandPalette.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { motion, AnimatePresence } from "motion-v";
+import { Search } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { EASE_OUT } from "../../../lib/ease";
+import { RenderNode, useControllable, type Content } from "../../shared";
+import { useCommands } from "./use-commands";
+export interface CommandItem {
+  id: string;
+  label: string;
+  group?: string;
+  hint?: string;
+  keywords?: string[];
+  icon?: Content;
+  badge?: Content;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+const props = withDefaults(
+  defineProps<{
+    items: CommandItem[];
+    shortcut?: string;
+    placeholder?: string;
+    emptyMessage?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+  }>(),
+  {
+    open: undefined,
+    shortcut: "k",
+    placeholder: "Type a command or search…",
+    emptyMessage: "No results found.",
+    defaultOpen: false,
+  },
+);
+const emit = defineEmits<{
+  "update:open": [open: boolean];
+  openChange: [open: boolean];
+  select: [item: CommandItem];
+}>();
+const open = useControllable(
+  () => props.open,
+  props.defaultOpen,
+  (value) => {
+    emit("update:open", value);
+    emit("openChange", value);
+  },
+);
+const reduce = useReducedMotion(),
+  touch = useMediaQuery("(pointer: coarse)"),
+  id = useId();
+const {
+  query,
+  root,
+  input,
+  list,
+  grouped,
+  rows,
+  hasIcons,
+  active,
+  moveTo,
+  select,
+  keydown,
+} = useCommands(props, open, (item) => emit("select", item));
+const panelSpring = {
+  type: "spring",
+  stiffness: 560,
+  damping: 40,
+  mass: 0.5,
+} as const;
+</script>
+<template>
+  <slot name="trigger" :open="() => (open = true)" />
+  <Teleport to="body" :disabled="!open"
+    ><div class="contents" :inert="!open" :aria-hidden="!open">
+      <AnimatePresence :initial="false" as="div" class="contents">
+        <motion.button
+          v-if="open"
+          key="backdrop"
+          type="button"
+          tabindex="-1"
+          aria-label="Close command palette"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0, transition: { duration: 0.12, ease: EASE_OUT } }"
+          :transition="{ duration: 0.18, ease: EASE_OUT }"
+          class="pointer-events-auto fixed inset-0 z-[100] bg-background/5 [backdrop-filter:blur(12px)_saturate(140%)] [-webkit-backdrop-filter:blur(12px)_saturate(140%)]"
+          @click="open = false"
+        />
+        <div
+          v-if="open"
+          key="panel-layer"
+          class="pointer-events-none fixed inset-x-4 bottom-4 top-[18vh] z-[100] flex items-start justify-center"
+        >
+          <motion.div
+            ref="root"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Command palette"
+            :initial="{
+              opacity: 0,
+              y: reduce ? 0 : -8,
+              scale: reduce ? 1 : 0.97,
+            }"
+            :animate="{ opacity: 1, y: 0, scale: 1 }"
+            :exit="{
+              opacity: 0,
+              y: reduce ? 0 : -8,
+              scale: reduce ? 1 : 0.97,
+              transition: { duration: 0.12, ease: EASE_OUT },
+            }"
+            :transition="reduce ? { duration: 0.1 } : panelSpring"
+            class="pointer-events-auto w-full max-w-xl overflow-hidden rounded-2xl border border-border bg-background shadow-2xl will-change-transform"
+            @keydown="keydown"
+          >
+            <div class="flex items-center gap-3 border-b border-border px-4">
+              <Search class="h-4 w-4 text-muted-foreground" /><input
+                ref="input"
+                v-model="query"
+                :placeholder="placeholder"
+                role="combobox"
+                aria-expanded="true"
+                :aria-controls="id + '-list'"
+                :aria-activedescendant="
+                  rows.length ? id + '-opt-' + active : undefined
+                "
+                aria-autocomplete="list"
+                :class="
+                  cn(
+                    'h-12 min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground',
+                    touch ? 'text-base' : '',
+                  )
+                "
+              /><kbd
+                class="hidden rounded border border-border bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground sm:inline-block"
+                >ESC</kbd
+              >
+            </div>
+            <div
+              ref="list"
+              :id="id + '-list'"
+              role="listbox"
+              aria-label="Commands"
+              class="max-h-[60vh] overflow-y-auto overscroll-contain p-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              <div
+                v-if="!rows.length"
+                class="p-8 text-center text-sm text-muted-foreground"
+              >
+                {{ emptyMessage }}
+              </div>
+              <div
+                v-for="[group, members] in grouped"
+                :key="group"
+                class="mb-1 last:mb-0"
+              >
+                <div
+                  aria-hidden="true"
+                  class="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  {{ group }}
+                </div>
+                <button
+                  v-for="item in members"
+                  :key="item.id"
+                  type="button"
+                  :id="id + '-opt-' + rows.indexOf(item)"
+                  role="option"
+                  :aria-selected="rows.indexOf(item) === active"
+                  :data-index="rows.indexOf(item)"
+                  :class="
+                    cn(
+                      'relative isolate flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
+                      rows.indexOf(item) === active
+                        ? 'text-foreground'
+                        : 'text-muted-foreground',
+                    )
+                  "
+                  @mouseenter="moveTo(item.id)"
+                  @click="select(item)"
+                >
+                  <motion.span
+                    v-if="rows.indexOf(item) === active"
+                    :layout-id="id + '-active'"
+                    class="absolute inset-0 z-0 rounded-md bg-muted"
+                    :transition="
+                      reduce
+                        ? { duration: 0 }
+                        : { type: 'spring', stiffness: 480, damping: 38 }
+                    "
+                  /><span v-if="item.icon" class="relative z-10 [&_svg]:size-4"
+                    ><RenderNode :node="item.icon" /></span
+                  ><span
+                    v-else-if="hasIcons"
+                    class="relative z-10 h-4 w-4"
+                  /><span class="relative z-10 flex-1 truncate">{{
+                    item.label
+                  }}</span
+                  ><span v-if="item.badge" class="relative z-10 shrink-0"
+                    ><RenderNode :node="item.badge" /></span
+                  ><kbd
+                    v-if="item.hint"
+                    class="relative z-10 rounded border border-border bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                    >{{ item.hint }}</kbd
+                  >
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </AnimatePresence>
+    </div></Teleport
+  >
+</template>

package/src/blocks/command-palette/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type CommandPaletteProps = InstanceType<
+  (typeof import("./CommandPalette.vue"))["default"]
+>["$props"];

package/src/blocks/command-palette/src/search.ts

@@ -0,0 +1,70 @@
+export type SearchableCommand = {
+  label: string;
+  group?: string;
+  keywords?: string[];
+};
+
+type Field = { text: string; words: string[]; label: boolean };
+const fold = (text: string) =>
+  text
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .normalize("NFKD")
+    .replace(/\p{M}/gu, "")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, " ")
+    .trim();
+
+function match(word: string, field: Field) {
+  if (field.words.includes(word)) return 100;
+  if (field.words.some((part) => part.startsWith(word))) return 80;
+  if (field.text.includes(word)) return 60;
+  if (word.length < 3) return 0;
+  const abbreviation = field.words.some((candidate) => {
+    if (candidate.length - word.length > 2) return false;
+    let at = 0;
+    for (const char of candidate) if (char === word[at]) at++;
+    return at === word.length;
+  });
+  return abbreviation ? 20 : 0;
+}
+
+export function searchCommands<T extends SearchableCommand>(
+  items: T[],
+  query: string,
+): T[] {
+  const text = fold(query);
+  if (!text) return items;
+  const tokens = text.split(/\s+/);
+  const ranked: { item: T; score: number; order: number }[] = [];
+  items.forEach((item, order) => {
+    const names = [item.label, item.group ?? "", ...(item.keywords ?? [])].map(
+      fold,
+    );
+    const fields = names.map((value, index): Field => ({
+      text: value,
+      words: value.split(" "),
+      label: index === 0,
+    }));
+    let score =
+      names[0] === text
+        ? 10000
+        : names.slice(2).includes(text)
+          ? 5000
+          : names[0].startsWith(text)
+            ? 2000
+            : 0;
+    for (const token of tokens) {
+      let best = 0;
+      for (const field of fields) {
+        const relevance = match(token, field);
+        if (relevance)
+          best = Math.max(best, relevance + (field.label ? 40 : 0));
+      }
+      if (!best) return;
+      score += best;
+    }
+    ranked.push({ item, score, order });
+  });
+  ranked.sort((a, b) => b.score - a.score || a.order - b.order);
+  return ranked.map(({ item }) => item);
+}