npm - @dumiflex/wp-kit - Versions diffs - 0.3.0 → 0.5.0 - Mend

@dumiflex/wp-kit 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/CHANGELOG.md +92 -51
package/LICENSE +674 -674
package/README.md +73 -76
package/package.json +78 -77
package/src/Avatar.vue +83 -83
package/src/Badge.vue +97 -97
package/src/Banner.vue +118 -118
package/src/BookmarkButton.vue +27 -27
package/src/BundleMeta.vue +51 -51
package/src/Button.vue +103 -103
package/src/Card.vue +68 -68
package/src/Checkbox.vue +109 -107
package/src/Chip.vue +163 -97
package/src/ChoiceCards.vue +133 -133
package/src/CloseButton.vue +69 -69
package/src/CodeBlock.vue +146 -119
package/src/ColorField.vue +188 -206
package/src/ColorPicker.vue +201 -201
package/src/Combobox.vue +331 -334
package/src/ConfirmDialog.vue +165 -163
package/src/ConfirmModal.vue +147 -147
package/src/ConstraintMatrixPreview.vue +708 -708
package/src/ContextMenu.vue +386 -379
package/src/CopyButton.vue +156 -156
package/src/DataTable.vue +293 -292
package/src/DatePicker.vue +234 -234
package/src/DescriptionList.vue +73 -73
package/src/DiffView.vue +68 -68
package/src/Disclosure.vue +166 -166
package/src/DragHandle.vue +49 -49
package/src/Drawer.vue +131 -131
package/src/DropZone.vue +196 -196
package/src/DropdownMenu.vue +72 -72
package/src/EmptyState.vue +111 -111
package/src/Field.vue +28 -28
package/src/HsvPicker.vue +208 -208
package/src/Icon.vue +39 -39
package/src/IconPicker.vue +209 -209
package/src/ImageGrid.vue +127 -125
package/src/InlineEdit.vue +183 -183
package/src/Input.vue +99 -99
package/src/Kbd.vue +56 -56
package/src/Lightbox.vue +176 -173
package/src/ListFilter.vue +85 -85
package/src/ListRow.vue +204 -204
package/src/LoadingMark.vue +217 -161
package/src/Logo.vue +60 -60
package/src/Modal.vue +78 -76
package/src/ModalShell.vue +109 -107
package/src/Pagination.vue +106 -106
package/src/Popover.vue +180 -171
package/src/PostCard.vue +210 -211
package/src/ProgressBar.vue +90 -90
package/src/RadioGroup.vue +177 -177
package/src/RangeSlider.vue +183 -183
package/src/RelativeDate.vue +35 -35
package/src/ResizeHandle.vue +143 -143
package/src/SearchInput.vue +192 -199
package/src/Select.vue +644 -641
package/src/Separator.vue +54 -54
package/src/Skeleton.vue +98 -82
package/src/Slider.vue +198 -198
package/src/SortableList.vue +260 -260
package/src/SplitPane.vue +68 -68
package/src/StarButton.vue +40 -40
package/src/Stepper.vue +141 -141
package/src/SupportLinks.vue +93 -93
package/src/TagInput.vue +297 -300
package/src/Textarea.vue +57 -57
package/src/Timeline.vue +92 -92
package/src/ToastCard.vue +119 -119
package/src/ToastHost.vue +40 -40
package/src/Toggle.vue +36 -36
package/src/TokenizedValue.vue +310 -310
package/src/Toolbar.vue +110 -110
package/src/VirtualList.vue +87 -87
package/src/VisuallyHidden.vue +29 -29
package/src/WpButton.vue +75 -75
package/src/WpCheck.vue +104 -102
package/src/WpIconButton.vue +107 -107
package/src/WpImageZoom.vue +544 -544
package/src/WpNumber.vue +178 -183
package/src/WpSegmented.vue +175 -175
package/src/WpSelect.vue +93 -89
package/src/WpSwitch.vue +163 -163
package/src/WpTabs.vue +188 -188
package/src/_modal-motion.css +33 -33
package/src/_skeleton.css +50 -50
package/src/axis-color.ts +42 -42
package/src/button.css +169 -169
package/src/calendar.ts +59 -59
package/src/clipboard.ts +50 -50
package/src/colour-presets.ts +12 -12
package/src/diff.ts +51 -51
package/src/drop-zone.ts +41 -41
package/src/field.css +50 -0
package/src/flip.ts +237 -237
package/src/floating-layer.ts +48 -0
package/src/floating.ts +99 -99
package/src/highlight.ts +199 -0
package/src/hsv.ts +100 -100
package/src/icon-catalog.ts +52 -52
package/src/image-zoom.ts +93 -93
package/src/kind-colour.ts +28 -0
package/src/loading-mark-motion.ts +249 -0
package/src/logo-paths.ts +21 -21
package/src/matrix-axis.ts +91 -91
package/src/pagination.ts +27 -27
package/src/platform-keys.ts +29 -29
package/src/rich-tokenize.ts +357 -357
package/src/select-types.ts +32 -32
package/src/slider-math.ts +45 -45
package/src/sortable.ts +22 -22
package/src/theme/fonts/OFL-Fraunces.txt +93 -93
package/src/theme/fonts/OFL-JetBrainsMono.txt +93 -93
package/src/theme/fonts/OFL-Manrope.txt +93 -93
package/src/theme/looks.css +428 -428
package/src/theme/palettes.css +254 -254
package/src/theme/tokens.css +2896 -2894
package/src/tokens.ts +56 -56
package/src/tooltip.css +43 -43
package/src/tooltip.ts +146 -146
package/src/useDialogFocus.ts +73 -73
package/src/useGrowableField.ts +357 -357
package/src/useModalKeyShield.ts +116 -116
package/src/useToast.ts +48 -48
package/src/wp-logo.svg +14 -14
package/src/ChipToggle.vue +0 -92
package/src/KindChip.vue +0 -53
package/src/RatingBadge.vue +0 -42

package/src/useModalKeyShield.ts CHANGED Viewed

@@ -1,116 +1,116 @@
-import { onBeforeUnmount, watch, type Ref } from "vue";
-/**
- * Stop keystrokes inside one of our modals from reaching ComfyUI's global
- * shortcuts.
- *
- * ComfyUI binds `useEventListener(window, 'keydown', keybindHandler)` and only
- * bails for text-editing targets:
- *
- *     const target = event.composedPath()[0]
- *     if (keyCombo.isReservedByTextInput &&
- *         (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT' ||
- *          target.contentEditable === 'true' || ...)) return
- *
- * So a plain letter pressed while focus sits on a button or a div inside our
- * modal is not "reserved by text input" and runs the global keybinding —
- * pressing `r` in an edit modal fired Refresh Node Definitions and froze the
- * page. Its other guard, which skips global keybindings while a dialog is
- * open, keys off ComfyUI's OWN dialog stack, which our modals never enter.
- *
- * The listener is bound to the modal ROOT in bubble phase. Anything inside the
- * modal has already had its turn by then — inner `@keydown` handlers, input
- * defaults, IME — and the event simply stops before it can climb to window.
- *
- * That alone is not enough, because a key only traverses the overlay if it is
- * TARGETED inside it. Open a modal and type without clicking in it first and
- * `document.activeElement` is still `<body>`, so the event goes body → window
- * and never passes the shield at all — which is how `a` kept reaching ComfyUI
- * even with the root listener in place. Two additions close that:
- *
- *   - focus the overlay when it opens, so keystrokes land inside the modal;
- *   - guard at the document for keys targeted OUTSIDE the open modal, since a
- *     modal owns the keyboard while it is up. Escape still passes, so the
- *     modal's own window-level close handler keeps working.
- *
- * Because of that, a modal's own key handling must live on the root too, not
- * on `window`: a window listener sits ABOVE the shield and would never see
- * keys pressed inside its own modal. `onKey` is where that logic goes.
- */
-export interface ModalKeyShieldOptions {
-  /** Runs for every keydown inside the modal, before the event is stopped. */
-  onKey?: ((event: KeyboardEvent) => void) | undefined;
-  /**
-   * Let a key through to the rest of the page. Use sparingly — the point of
-   * the shield is that a modal owns the keyboard while it is open.
-   */
-  passThrough?: ((event: KeyboardEvent) => boolean) | undefined;
-}
-/** Wire the shield to a root element that exists only while the modal is open. */
-export function useModalKeyShield(
-  root: Ref<HTMLElement | null | undefined>,
-  options: ModalKeyShieldOptions = {},
-): void {
-  let bound: HTMLElement | null = null;
-  const onKeydown = (event: KeyboardEvent): void => {
-    options.onKey?.(event);
-    if (options.passThrough?.(event)) return;
-    // stopPropagation only: the default action still happens, so typing,
-    // shortcuts inside inputs and IME composition all behave normally.
-    event.stopPropagation();
-  };
-  // Keyup carries no handling of ours, but extensions bind shortcuts on it
-  // and a half-seen chord is worse than none.
-  const onKeyup = (event: KeyboardEvent): void => {
-    if (options.passThrough?.(event)) return;
-    event.stopPropagation();
-  };
-  // Keys aimed outside the open modal — the canvas, the body — never reach the
-  // overlay, so they are stopped here instead. Document bubble runs before
-  // window, where ComfyUI's keybindHandler lives.
-  const onOutside = (event: KeyboardEvent): void => {
-    if (!bound) return;
-    const target = event.target;
-    if (target instanceof Node && bound.contains(target)) return;
-    // Escape belongs to whoever wants to close something.
-    if (event.key === "Escape") return;
-    if (options.passThrough?.(event)) return;
-    event.stopPropagation();
-  };
-  const detach = (): void => {
-    if (!bound) return;
-    bound.removeEventListener("keydown", onKeydown);
-    bound.removeEventListener("keyup", onKeyup);
-    document.removeEventListener("keydown", onOutside);
-    document.removeEventListener("keyup", onOutside);
-    bound = null;
-  };
-  watch(
-    root,
-    (el) => {
-      detach();
-      if (!el) return;
-      bound = el;
-      el.addEventListener("keydown", onKeydown);
-      el.addEventListener("keyup", onKeyup);
-      document.addEventListener("keydown", onOutside);
-      document.addEventListener("keyup", onOutside);
-      // Pull focus in, so typing lands inside the modal rather than on <body>.
-      // Only when focus is not already somewhere inside — an autofocused input
-      // must keep it.
-      if (!el.contains(document.activeElement)) {
-        if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
-        el.focus({ preventScroll: true });
-      }
-    },
-    { immediate: true, flush: "post" },
-  );
-  onBeforeUnmount(detach);
-}
+import { onBeforeUnmount, watch, type Ref } from "vue";
+/**
+ * Stop keystrokes inside one of our modals from reaching ComfyUI's global
+ * shortcuts.
+ *
+ * ComfyUI binds `useEventListener(window, 'keydown', keybindHandler)` and only
+ * bails for text-editing targets:
+ *
+ *     const target = event.composedPath()[0]
+ *     if (keyCombo.isReservedByTextInput &&
+ *         (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT' ||
+ *          target.contentEditable === 'true' || ...)) return
+ *
+ * So a plain letter pressed while focus sits on a button or a div inside our
+ * modal is not "reserved by text input" and runs the global keybinding —
+ * pressing `r` in an edit modal fired Refresh Node Definitions and froze the
+ * page. Its other guard, which skips global keybindings while a dialog is
+ * open, keys off ComfyUI's OWN dialog stack, which our modals never enter.
+ *
+ * The listener is bound to the modal ROOT in bubble phase. Anything inside the
+ * modal has already had its turn by then — inner `@keydown` handlers, input
+ * defaults, IME — and the event simply stops before it can climb to window.
+ *
+ * That alone is not enough, because a key only traverses the overlay if it is
+ * TARGETED inside it. Open a modal and type without clicking in it first and
+ * `document.activeElement` is still `<body>`, so the event goes body → window
+ * and never passes the shield at all — which is how `a` kept reaching ComfyUI
+ * even with the root listener in place. Two additions close that:
+ *
+ *   - focus the overlay when it opens, so keystrokes land inside the modal;
+ *   - guard at the document for keys targeted OUTSIDE the open modal, since a
+ *     modal owns the keyboard while it is up. Escape still passes, so the
+ *     modal's own window-level close handler keeps working.
+ *
+ * Because of that, a modal's own key handling must live on the root too, not
+ * on `window`: a window listener sits ABOVE the shield and would never see
+ * keys pressed inside its own modal. `onKey` is where that logic goes.
+ */
+export interface ModalKeyShieldOptions {
+  /** Runs for every keydown inside the modal, before the event is stopped. */
+  onKey?: ((event: KeyboardEvent) => void) | undefined;
+  /**
+   * Let a key through to the rest of the page. Use sparingly — the point of
+   * the shield is that a modal owns the keyboard while it is open.
+   */
+  passThrough?: ((event: KeyboardEvent) => boolean) | undefined;
+}
+/** Wire the shield to a root element that exists only while the modal is open. */
+export function useModalKeyShield(
+  root: Ref<HTMLElement | null | undefined>,
+  options: ModalKeyShieldOptions = {},
+): void {
+  let bound: HTMLElement | null = null;
+  const onKeydown = (event: KeyboardEvent): void => {
+    options.onKey?.(event);
+    if (options.passThrough?.(event)) return;
+    // stopPropagation only: the default action still happens, so typing,
+    // shortcuts inside inputs and IME composition all behave normally.
+    event.stopPropagation();
+  };
+  // Keyup carries no handling of ours, but extensions bind shortcuts on it
+  // and a half-seen chord is worse than none.
+  const onKeyup = (event: KeyboardEvent): void => {
+    if (options.passThrough?.(event)) return;
+    event.stopPropagation();
+  };
+  // Keys aimed outside the open modal — the canvas, the body — never reach the
+  // overlay, so they are stopped here instead. Document bubble runs before
+  // window, where ComfyUI's keybindHandler lives.
+  const onOutside = (event: KeyboardEvent): void => {
+    if (!bound) return;
+    const target = event.target;
+    if (target instanceof Node && bound.contains(target)) return;
+    // Escape belongs to whoever wants to close something.
+    if (event.key === "Escape") return;
+    if (options.passThrough?.(event)) return;
+    event.stopPropagation();
+  };
+  const detach = (): void => {
+    if (!bound) return;
+    bound.removeEventListener("keydown", onKeydown);
+    bound.removeEventListener("keyup", onKeyup);
+    document.removeEventListener("keydown", onOutside);
+    document.removeEventListener("keyup", onOutside);
+    bound = null;
+  };
+  watch(
+    root,
+    (el) => {
+      detach();
+      if (!el) return;
+      bound = el;
+      el.addEventListener("keydown", onKeydown);
+      el.addEventListener("keyup", onKeyup);
+      document.addEventListener("keydown", onOutside);
+      document.addEventListener("keyup", onOutside);
+      // Pull focus in, so typing lands inside the modal rather than on <body>.
+      // Only when focus is not already somewhere inside — an autofocused input
+      // must keep it.
+      if (!el.contains(document.activeElement)) {
+        if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
+        el.focus({ preventScroll: true });
+      }
+    },
+    { immediate: true, flush: "post" },
+  );
+  onBeforeUnmount(detach);
+}

package/src/useToast.ts CHANGED Viewed

@@ -1,48 +1,48 @@
-import { ref } from "vue";
-export type ToastSeverity = "info" | "success" | "warn" | "error";
-export interface ToastAction {
-  label: string;
-  run: () => void | Promise<void>;
-}
-export interface ToastEntry {
-  id: string;
-  severity: ToastSeverity;
-  summary: string;
-  detail?: string;
-  life?: number;
-  /** Optional action button rendered inline with the toast. Click runs the handler
-   *  and dismisses the toast. Reserved for Undo flows (Phase 3 bulk actions). */
-  action?: ToastAction;
-}
-const DEFAULT_LIFE = 2400;
-const toasts = ref<ToastEntry[]>([]);
-let nextId = 0;
-function makeId() {
-  nextId += 1;
-  return `t${Date.now().toString(36)}_${nextId}`;
-}
-function dismiss(id: string) {
-  const i = toasts.value.findIndex((t) => t.id === id);
-  if (i >= 0) toasts.value.splice(i, 1);
-}
-function push(entry: Omit<ToastEntry, "id">): string {
-  const id = makeId();
-  const life = entry.life ?? DEFAULT_LIFE;
-  toasts.value.push({ ...entry, id });
-  if (life > 0) {
-    setTimeout(() => dismiss(id), life);
-  }
-  return id;
-}
-export function useToast() {
-  return { toasts, push, dismiss };
-}
+import { ref } from "vue";
+export type ToastSeverity = "info" | "success" | "warn" | "error";
+export interface ToastAction {
+  label: string;
+  run: () => void | Promise<void>;
+}
+export interface ToastEntry {
+  id: string;
+  severity: ToastSeverity;
+  summary: string;
+  detail?: string;
+  life?: number;
+  /** Optional action button rendered inline with the toast. Click runs the handler
+   *  and dismisses the toast. Reserved for Undo flows (Phase 3 bulk actions). */
+  action?: ToastAction;
+}
+const DEFAULT_LIFE = 2400;
+const toasts = ref<ToastEntry[]>([]);
+let nextId = 0;
+function makeId() {
+  nextId += 1;
+  return `t${Date.now().toString(36)}_${nextId}`;
+}
+function dismiss(id: string) {
+  const i = toasts.value.findIndex((t) => t.id === id);
+  if (i >= 0) toasts.value.splice(i, 1);
+}
+function push(entry: Omit<ToastEntry, "id">): string {
+  const id = makeId();
+  const life = entry.life ?? DEFAULT_LIFE;
+  toasts.value.push({ ...entry, id });
+  if (life > 0) {
+    setTimeout(() => dismiss(id), life);
+  }
+  return id;
+}
+export function useToast() {
+  return { toasts, push, dismiss };
+}

package/src/wp-logo.svg CHANGED Viewed

@@ -1,14 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" viewBox="0 0 1024 1024" width="100%" height="100%"><defs>
-    <linearGradient id="wp-logo-grad-a" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#a970ff"></stop>
-      <stop offset="1" stop-color="#6366f1"></stop>
-    </linearGradient>
-    <linearGradient id="wp-logo-grad-b" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#6366f1"></stop>
-      <stop offset="1" stop-color="#33d6c6"></stop>
-    </linearGradient>
-  </defs><path fill="url(#wp-logo-grad-a)" d="m512,2c-53.6,0-98.47,38.16-108.84,88.73-75.07,19.29-143.32,58.26-198.74,113.68-55.42,55.42-94.39,123.68-113.68,198.74-50.58,10.38-88.73,55.24-88.73,108.84s38.16,98.47,88.73,108.84c13.62,53.14,37.03,102.64,69.77,147.47,37.14,50.86,85.83,93.86,140.81,124.33,5.54,3.08,11.56,4.54,17.48,4.54,12.7,0,25.02-6.72,31.61-18.61,9.68-17.44,3.38-39.42-14.07-49.09-85.32-47.32-147.22-125.71-173.38-218.21,36.3-18.29,61.27-55.92,61.27-99.28s-24.94-80.97-61.23-99.27c34.22-119.96,129.79-215.52,249.74-249.74,18.3,36.29,55.92,61.23,99.27,61.23,61.27,0,111.11-49.84,111.11-111.11S573.27,2,512,2ZM113.11,473.11c21.44,0,38.89,17.44,38.89,38.89,0,20.1-15.32,36.69-34.91,38.69h-.01c-.18.02-.36.03-.53.04-1.13.1-2.28.16-3.43.16-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89Zm398.89-321.11c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Z"></path><path fill="url(#wp-logo-grad-b)" d="m933.27,403.16c-13.62-53.14-37.03-102.64-69.77-147.47-37.14-50.86-85.83-93.86-140.81-124.33-17.44-9.68-39.42-3.38-49.09,14.07-9.68,17.44-3.38,39.42,14.07,49.09,85.32,47.32,147.22,125.71,173.38,218.21-36.3,18.29-61.27,55.92-61.27,99.28s24.94,80.97,61.23,99.27c-34.22,119.96-129.79,215.52-249.74,249.74-18.3-36.29-55.92-61.23-99.27-61.23-61.27,0-111.11,49.84-111.11,111.11s49.84,111.11,111.11,111.11c53.6,0,98.47-38.16,108.84-88.73,75.07-19.29,143.32-58.26,198.74-113.68,55.42-55.42,94.39-123.68,113.68-198.74,50.58-10.38,88.73-55.24,88.73-108.84s-38.16-98.47-88.73-108.84Zm-421.27,546.62c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Zm398.89-398.89c-21.44,0-38.89-17.44-38.89-38.89,0-20.03,15.22-36.58,34.72-38.67.38-.04.77-.08,1.16-.11h.02c.99-.08,1.99-.11,2.99-.11,21.44,0,38.89,17.44,38.89,38.89s-17.44,38.89-38.89,38.89Z"></path><g>
-    <path fill="#a970ff" d="m735.02,517.56c-153.82,30.87-186.59,63.64-217.46,217.46-1.22,6.08-9.9,6.08-11.12,0-30.87-153.82-63.64-186.59-217.46-217.46-6.08-1.22-6.08-9.9,0-11.12,153.82-30.87,186.59-63.64,217.46-217.46,1.22-6.08,9.9-6.08,11.12,0,30.87,153.82,63.64,186.59,217.46,217.46,6.08,1.22,6.08,9.9,0,11.12Z"></path>
-    <path fill="#6366f1" d="m434.06,665.85c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z"></path>
-    <path fill="#33d6c6" d="m738.07,361.84c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z"></path>
-  </g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" viewBox="0 0 1024 1024" width="100%" height="100%"><defs>
+    <linearGradient id="wp-logo-grad-a" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#a970ff"></stop>
+      <stop offset="1" stop-color="#6366f1"></stop>
+    </linearGradient>
+    <linearGradient id="wp-logo-grad-b" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6366f1"></stop>
+      <stop offset="1" stop-color="#33d6c6"></stop>
+    </linearGradient>
+  </defs><path fill="url(#wp-logo-grad-a)" d="m512,2c-53.6,0-98.47,38.16-108.84,88.73-75.07,19.29-143.32,58.26-198.74,113.68-55.42,55.42-94.39,123.68-113.68,198.74-50.58,10.38-88.73,55.24-88.73,108.84s38.16,98.47,88.73,108.84c13.62,53.14,37.03,102.64,69.77,147.47,37.14,50.86,85.83,93.86,140.81,124.33,5.54,3.08,11.56,4.54,17.48,4.54,12.7,0,25.02-6.72,31.61-18.61,9.68-17.44,3.38-39.42-14.07-49.09-85.32-47.32-147.22-125.71-173.38-218.21,36.3-18.29,61.27-55.92,61.27-99.28s-24.94-80.97-61.23-99.27c34.22-119.96,129.79-215.52,249.74-249.74,18.3,36.29,55.92,61.23,99.27,61.23,61.27,0,111.11-49.84,111.11-111.11S573.27,2,512,2ZM113.11,473.11c21.44,0,38.89,17.44,38.89,38.89,0,20.1-15.32,36.69-34.91,38.69h-.01c-.18.02-.36.03-.53.04-1.13.1-2.28.16-3.43.16-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89Zm398.89-321.11c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Z"></path><path fill="url(#wp-logo-grad-b)" d="m933.27,403.16c-13.62-53.14-37.03-102.64-69.77-147.47-37.14-50.86-85.83-93.86-140.81-124.33-17.44-9.68-39.42-3.38-49.09,14.07-9.68,17.44-3.38,39.42,14.07,49.09,85.32,47.32,147.22,125.71,173.38,218.21-36.3,18.29-61.27,55.92-61.27,99.28s24.94,80.97,61.23,99.27c-34.22,119.96-129.79,215.52-249.74,249.74-18.3-36.29-55.92-61.23-99.27-61.23-61.27,0-111.11,49.84-111.11,111.11s49.84,111.11,111.11,111.11c53.6,0,98.47-38.16,108.84-88.73,75.07-19.29,143.32-58.26,198.74-113.68,55.42-55.42,94.39-123.68,113.68-198.74,50.58-10.38,88.73-55.24,88.73-108.84s-38.16-98.47-88.73-108.84Zm-421.27,546.62c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Zm398.89-398.89c-21.44,0-38.89-17.44-38.89-38.89,0-20.03,15.22-36.58,34.72-38.67.38-.04.77-.08,1.16-.11h.02c.99-.08,1.99-.11,2.99-.11,21.44,0,38.89,17.44,38.89,38.89s-17.44,38.89-38.89,38.89Z"></path><g>
+    <path fill="#a970ff" d="m735.02,517.56c-153.82,30.87-186.59,63.64-217.46,217.46-1.22,6.08-9.9,6.08-11.12,0-30.87-153.82-63.64-186.59-217.46-217.46-6.08-1.22-6.08-9.9,0-11.12,153.82-30.87,186.59-63.64,217.46-217.46,1.22-6.08,9.9-6.08,11.12,0,30.87,153.82,63.64,186.59,217.46,217.46,6.08,1.22,6.08,9.9,0,11.12Z"></path>
+    <path fill="#6366f1" d="m434.06,665.85c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z"></path>
+    <path fill="#33d6c6" d="m738.07,361.84c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z"></path>
+  </g></svg>

package/src/ChipToggle.vue DELETED Viewed

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-/**
- * A pill you press to turn a filter or flag on and off: a tag filter, a
- * module-type filter, "Recommended" on a version, a category you pick.
- * `pressed` lights it in the accent, or in `color` (a kind colour, a
- * category's colour) when given; with `color` the icon wears it even when
- * off, so a row of type filters reads at a glance. `count` shows a small
- * number after the label.
- *
- *   <ChipToggle :pressed="tag === t.slug" icon="pi-tag" :count="t.usage" @click="pick(t)">{{ t.name }}</ChipToggle>
- *   <ChipToggle :pressed="kind === 'wildcard'" color="var(--wp-kind-wildcard)" icon="pi-sparkles">Wildcard</ChipToggle>
- *
- * A real `<button>` with `aria-pressed`; it reads only the shared tokens, so
- * it works on a page and on the canvas.
- */
-import { computed } from "vue";
-import Icon from "./Icon.vue";
-const props = withDefaults(defineProps<{
-  pressed?: boolean | undefined;
-  /** PrimeIcons name (`tag` or `pi-tag`) before the label. */
-  icon?: string | undefined;
-  /** Tint when pressed (and of the icon): any CSS colour. Default the accent. */
-  color?: string | null | undefined;
-  count?: number | string | undefined;
-  size?: "sm" | "md" | undefined;
-  disabled?: boolean | undefined;
-}>(), { pressed: false, size: "sm" });
-const style = computed(() => (props.color ? { "--chip-toggle-c": props.color } : undefined));
-</script>
-<template>
-  <button
-    type="button"
-    class="wp-chip-toggle"
-    :class="[`wp-chip-toggle--${size}`, { 'wp-chip-toggle--tinted': !!color }]"
-    :style="style"
-    :aria-pressed="pressed"
-    :disabled="disabled"
-  >
-    <Icon v-if="icon" class="wp-chip-toggle__icon" :name="icon" :size="11" />
-    <span class="wp-chip-toggle__label"><slot /></span>
-    <span v-if="count !== undefined" class="wp-chip-toggle__count">{{ count }}</span>
-  </button>
-</template>
-<style scoped>
-.wp-chip-toggle {
-  --chip-toggle-c: var(--wp-accent-500);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--wp-space-2);
-  height: var(--wp-control-h-sm);
-  padding: 0 var(--wp-space-4);
-  border: 1px solid var(--wp-border);
-  border-radius: var(--wp-radius-cap, 999px);
-  background: var(--wp-bg-3);
-  color: var(--wp-text-muted);
-  font: inherit;
-  font-family: var(--wp-font-sans);
-  font-size: var(--wp-text-sm);
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background var(--wp-motion-quick) ease, border-color var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease;
-}
-.wp-chip-toggle--md { height: var(--wp-control-h-md); padding: 0 var(--wp-space-5); font-size: var(--wp-text-base); }
-.wp-chip-toggle:hover:not(:disabled) { border-color: var(--wp-border-strong); color: var(--wp-text); }
-.wp-chip-toggle:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
-.wp-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-chip-toggle--tinted .wp-chip-toggle__icon { color: var(--chip-toggle-c); }
-.wp-chip-toggle[aria-pressed="true"] {
-  border-color: color-mix(in oklab, var(--chip-toggle-c) 45%, transparent);
-  background: color-mix(in oklab, var(--chip-toggle-c) 16%, transparent);
-  color: var(--wp-accent-text-strong);
-}
-.wp-chip-toggle--tinted[aria-pressed="true"] { color: var(--chip-toggle-c); }
-.wp-chip-toggle__count {
-  padding: 1px var(--wp-space-3);
-  border-radius: var(--wp-radius-cap, 999px);
-  background: var(--wp-bg-4, var(--wp-bg-2));
-  color: var(--wp-text-dim);
-  font-family: var(--wp-font-mono);
-  font-size: var(--wp-text-xs);
-}
-.wp-chip-toggle[aria-pressed="true"] .wp-chip-toggle__count {
-  background: color-mix(in oklab, var(--chip-toggle-c) 22%, transparent);
-  color: inherit;
-}
-</style>

package/src/KindChip.vue DELETED Viewed

@@ -1,53 +0,0 @@
-<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>

package/src/RatingBadge.vue DELETED Viewed

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-/**
- * The NSFW and Featured badges on a post: small uppercase pills. Renders
- * nothing for a safe, unfeatured post.
- *
- *   <RatingBadge rating="nsfw" featured />
- */
-import Icon from "./Icon.vue";
-defineProps<{
-  rating?: "sfw" | "nsfw" | undefined;
-  featured?: boolean | undefined;
-}>();
-</script>
-<template>
-  <span v-if="rating === 'nsfw'" class="wp-rating-badge wp-rating-badge--nsfw">NSFW</span>
-  <span v-if="featured" class="wp-rating-badge wp-rating-badge--featured">
-    <Icon name="star-fill" :size="9" />Featured
-  </span>
-</template>
-<style scoped>
-.wp-rating-badge {
-  --rating-badge-c: var(--wp-warn);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border-radius: var(--wp-radius-cap, 999px);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  line-height: 14px;
-  text-transform: uppercase;
-  white-space: nowrap;
-  color: var(--rating-badge-c);
-  background: color-mix(in oklab, var(--rating-badge-c) 16%, transparent);
-  border: 1px solid color-mix(in oklab, var(--rating-badge-c) 42%, transparent);
-}
-.wp-rating-badge--nsfw { --rating-badge-c: var(--wp-danger); color: var(--wp-danger-text); }
-</style>