@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/DerivationPreview.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+/**
+ * Derivation as rule cards: what it reads / writes / sends to negatives,
+ * then per rule IF / ELSE IF / ELSE with nested AND / OR groups and every
+ * action numbered (the action plus its schema v8 `extra_actions`).
+ */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import DerivationCondition from "./DerivationCondition.vue";
+import Disclosure from "./Disclosure.vue";
+import {
+  derivationRules,
+  varFlow,
+  type ActionOp,
+  type DerivationRule,
+  type Obj,
+} from "./preview-readers";
+
+const props = defineProps<{
+  /** The whole module row (the var summary reads it). */
+  payload: Obj | null;
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const OPEN_RULES = 3;
+
+const rules = computed(() => derivationRules(props.inner));
+const flow = computed(() => varFlow(props.payload));
+const branchCount = computed(() =>
+  rules.value.reduce((n, r) => n + r.branches.length + (r.fallback ? 1 : 0), 0),
+);
+
+const OP_LABEL: Record<ActionOp, string> = {
+  set: "SET",
+  append: "APPEND",
+  prepend: "PREPEND",
+  neg_add: "+ NEGATIVE",
+  neg_replace: "REPLACE NEG",
+  other: "",
+};
+function opLabel(op: ActionOp, mode: string): string {
+  return OP_LABEL[op] || mode.toUpperCase();
+}
+function ruleSummary(r: DerivationRule): string {
+  const n = r.branches.length;
+  const parts = [`${n} branch${n === 1 ? "" : "es"}${r.fallback ? " + else" : ""}`];
+  const targets = [
+    ...new Set(
+      [...r.branches.flatMap((b) => b.actions), ...(r.fallback ?? [])]
+        .filter((a) => a.op !== "neg_add" && a.op !== "neg_replace")
+        .map((a) => a.target),
+    ),
+  ];
+  if (targets.length) parts.push(`sets ${targets.join(", ")}`);
+  return parts.join(" · ");
+}
+const toggled = ref(new Set<number>());
+function isOpen(i: number): boolean {
+  const byDefault = i < OPEN_RULES;
+  return toggled.value.has(i) ? !byDefault : byDefault;
+}
+function toggle(i: number): void {
+  const next = new Set(toggled.value);
+  if (next.has(i)) next.delete(i);
+  else next.add(i);
+  toggled.value = next;
+}
+</script>
+
+<template>
+  <div class="wp-pv wp-derivation">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ rules.length }}</b><span>rule{{ rules.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div class="wp-pv-stat">
+        <b>{{ branchCount }}</b><span>branches</span>
+      </div>
+    </div>
+    <div class="wp-dv-io">
+      <div v-if="flow.reads.length">
+        <span class="wp-pv-label">Reads</span>
+        <code
+          v-for="v in flow.reads"
+          :key="`r-${v}`"
+          class="wp-dv-var"
+        >${{ v }}</code>
+      </div>
+      <div v-if="flow.sets.length">
+        <span class="wp-pv-label">Writes</span>
+        <code
+          v-for="v in flow.sets"
+          :key="`w-${v}`"
+          class="wp-dv-var"
+        >${{ v }}</code>
+      </div>
+      <div v-if="flow.negatives.length">
+        <span class="wp-pv-label">Negatives</span>
+        <code
+          v-for="v in flow.negatives"
+          :key="`n-${v}`"
+          class="wp-dv-var wp-dv-var--neg"
+        >{{ v }}</code>
+      </div>
+    </div>
+
+    <div
+      v-for="(r, ri) in rules"
+      :key="ri"
+      class="wp-dv-rule wp-derivation__rule"
+    >
+      <Disclosure
+        flush
+        lazy
+        class="wp-dv-rule__fold"
+        :open="isOpen(ri)"
+        @update:open="toggle(ri)"
+      >
+        <template #summary>
+          <b class="wp-dv-rule__name">Rule {{ ri + 1 }}</b><span class="wp-dv-rule__sum">{{ ruleSummary(r) }}</span>
+        </template>
+        <div
+          v-for="(b, bi) in r.branches"
+          :key="bi"
+          class="wp-dv-branch wp-derivation__branch"
+        >
+          <span class="wp-dv-kw">{{ bi === 0 ? "IF" : "ELSE IF" }}</span>
+          <div class="wp-dv-body">
+            <DerivationCondition
+              v-if="b.condition"
+              :cond="b.condition"
+            />
+            <span
+              v-else
+              class="wp-dv-none"
+            >(no condition)</span>
+            <ol class="wp-dv-steps">
+              <li
+                v-for="(a, ai) in b.actions"
+                :key="ai"
+                data-test="derivation-action"
+              >
+                <span class="wp-dv-i">{{ ai + 1 }}</span>
+                <span class="wp-dv-op-cell">
+                  <span
+                    class="wp-dv-op"
+                    :data-op="a.op"
+                  >{{ opLabel(a.op, a.mode) }}</span>
+                  <code class="wp-dv-target wp-derivation__target">{{ a.target }}</code>
+                </span>
+                <span class="wp-dv-val"><TokenizedValue
+                  :value="a.value"
+                  :uuid-to-name="refMap"
+                /></span>
+              </li>
+            </ol>
+          </div>
+        </div>
+        <div
+          v-if="r.fallback"
+          class="wp-dv-branch wp-derivation__branch is-else"
+        >
+          <span class="wp-dv-kw wp-dv-kw--else">ELSE</span>
+          <div class="wp-dv-body">
+            <ol class="wp-dv-steps">
+              <li
+                v-for="(a, ai) in r.fallback"
+                :key="ai"
+                data-test="derivation-action"
+              >
+                <span class="wp-dv-i">{{ ai + 1 }}</span>
+                <span class="wp-dv-op-cell">
+                  <span
+                    class="wp-dv-op"
+                    :data-op="a.op"
+                  >{{ opLabel(a.op, a.mode) }}</span>
+                  <code class="wp-dv-target wp-derivation__target">{{ a.target }}</code>
+                </span>
+                <span class="wp-dv-val"><TokenizedValue
+                  :value="a.value"
+                  :uuid-to-name="refMap"
+                /></span>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </Disclosure>
+    </div>
+    <div class="wp-dv-pad" />
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-dv-io {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 24px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-dv-io > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.wp-dv-var {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-dv-var--neg {
+  color: var(--wp-danger-text, var(--wp-danger));
+  background: color-mix(in oklab, var(--wp-danger) 10%, transparent);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  padding: 0 4px;
+}
+.wp-dv-rule {
+  margin: 14px 16px 0;
+  border: 1px solid var(--wp-border);
+  border-radius: min(10px, var(--wp-radius-cap, 999px));
+  overflow: hidden;
+}
+.wp-dv-rule__name {
+  font-size: 12.5px;
+}
+.wp-dv-rule__sum {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--wp-text-dim);
+  font-size: 11.5px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wp-dv-branch {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+}
+.wp-dv-branch + .wp-dv-branch {
+  border-top: 1px solid var(--wp-border);
+}
+.wp-dv-kw {
+  padding: 12px 0 0 14px;
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--wp-accent-text);
+}
+.wp-dv-kw--else {
+  color: var(--wp-text-dim);
+}
+.wp-dv-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px 12px 0;
+  min-width: 0;
+}
+.wp-dv-none {
+  font-size: 12px;
+  color: var(--wp-text-dim);
+}
+.wp-dv-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.wp-dv-steps li {
+  display: grid;
+  grid-template-columns: 18px minmax(120px, max-content) minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+}
+.wp-dv-i {
+  font-family: var(--wp-font-mono);
+  font-size: 11px;
+  color: var(--wp-text-dim);
+  text-align: right;
+}
+.wp-dv-op-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  white-space: nowrap;
+}
+.wp-dv-op {
+  font-family: var(--wp-font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+}
+.wp-dv-op[data-op="set"] {
+  background: color-mix(in oklab, var(--wp-success) 14%, transparent);
+  color: var(--wp-success);
+}
+.wp-dv-op[data-op="append"],
+.wp-dv-op[data-op="prepend"] {
+  background: color-mix(in oklab, var(--wp-info) 16%, transparent);
+  color: color-mix(in oklab, var(--wp-info) 55%, white);
+}
+.wp-dv-op[data-op="neg_add"],
+.wp-dv-op[data-op="neg_replace"] {
+  background: color-mix(in oklab, var(--wp-danger) 16%, transparent);
+  color: var(--wp-danger-text, var(--wp-danger));
+}
+.wp-dv-target {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-dv-val {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 3px 9px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.wp-dv-pad {
+  height: 14px;
+}
+@container (max-width: 640px) {
+  .wp-dv-steps li {
+    grid-template-columns: 18px minmax(0, 1fr);
+  }
+  .wp-dv-val {
+    grid-column: 2;
+  }
+}
+</style>

package/src/Disclosure.vue

@@ -120,7 +120,8 @@ function toggle(): void {
 .wp-disclosure__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wp-disclosure__chev {
   flex: none;
-  font-size: 0.75em;
+  /* A whole even size: 0.75em came to 9px and sat half a pixel off. */
+  font-size: 10px;
   color: var(--wp-text-muted);
   transition: transform var(--wp-motion-swap) var(--wp-motion-curve-collapse);
 }

package/src/Drawer.vue

@@ -5,7 +5,7 @@
  * Tab stays inside it and focus goes back where it was. With `modal` off
  * there is no backdrop, Tab moves on to the page and the page stays usable.
  */
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
 import { ref, useId, useSlots } from "vue";
 import { useDialogFocus } from "./useDialogFocus";
 
@@ -66,7 +66,7 @@ useDialogFocus(panel, () => props.open, {
           <h3 v-if="title" :id="titleId" class="wp-drawer__title">{{ title }}</h3>
           <slot name="header" />
           <span class="wp-spacer" />
-          <CloseButton kbd="Esc" data-test="drawer-close" @click="close" />
+          <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" data-test="drawer-close" @click="close" />
         </header>
         <div class="wp-drawer__body">
           <slot />

package/src/DropZone.vue

@@ -15,7 +15,7 @@
  */
 import { computed, ref } from "vue";
 import { dragItemMaybeAccepted, fileAccepted, formatBytes } from "./drop-zone";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 
 export interface RejectedFile { file: File; reason: string }
 
@@ -152,7 +152,7 @@ defineExpose({ browse });
       <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
       <span v-if="hint && over !== 'refuse'" class="wp-drop__hint">{{ hint }}{{ maxSize ? ` · up to ${formatBytes(maxSize)}` : "" }}</span>
     </span>
-    <WpButton class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</WpButton>
+    <Button class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</Button>
     <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
   </div>
 </template>

package/src/FixedValuesPreview.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/** Fixed values as a searchable variable → value → negative table, paged so
+ *  a long list stays short until asked. */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import { fixedValues, scanText, type FixedValue, type Obj } from "./preview-readers";
+import SearchInput from "./SearchInput.vue";
+import Button from "./Button.vue";
+import Chip from "./Chip.vue";
+
+const props = defineProps<{
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const PAGE = 10;
+const LONG_CHARS = 110;
+
+const rows = computed(() => fixedValues(props.inner));
+const negCount = computed(() => rows.value.filter((r) => r.negative).length);
+const refCount = computed(
+  () =>
+    rows.value.filter((r) => {
+      const s = scanText(r.value);
+      return s.refs || s.picks;
+    }).length,
+);
+
+const search = ref("");
+const onlyNeg = ref(false);
+const filtering = computed(() => search.value.trim() !== "" || onlyNeg.value);
+const visible = computed<FixedValue[]>(() => {
+  const q = search.value.trim().toLowerCase();
+  return rows.value.filter(
+    (r) =>
+      (!onlyNeg.value || r.negative) &&
+      (!q ||
+        r.name.toLowerCase().includes(q) ||
+        r.value.toLowerCase().includes(q) ||
+        r.negative.toLowerCase().includes(q)),
+  );
+});
+const showAll = ref(false);
+const shown = computed(() =>
+  showAll.value || filtering.value ? visible.value : visible.value.slice(0, PAGE),
+);
+const expanded = ref(new Set<number>());
+function toggle(i: number): void {
+  const next = new Set(expanded.value);
+  if (next.has(i)) next.delete(i);
+  else next.add(i);
+  expanded.value = next;
+}
+</script>
+
+<template>
+  <div class="wp-pv">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ rows.length }}</b><span>variable{{ rows.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-if="negCount"
+        class="wp-pv-stat"
+      >
+        <b>{{ negCount }}</b><span>with a negative</span>
+      </div>
+      <div
+        v-if="refCount"
+        class="wp-pv-stat"
+      >
+        <b>{{ refCount }}</b><span>use picks / @refs</span>
+      </div>
+    </div>
+    <div
+      v-if="rows.length > 6 || negCount"
+      class="wp-pv-tool"
+    >
+      <SearchInput
+        v-if="rows.length > 6"
+        v-model="search"
+        :placeholder="`Filter ${rows.length} values…`"
+        data-test="fixed-search"
+        class="wp-pv-search"
+      />
+      <Chip
+        v-if="negCount"
+        size="sm"
+        color="var(--wp-danger)"
+        :pressed="onlyNeg"
+        @click="onlyNeg = !onlyNeg"
+      >Has negative</Chip>
+      <span
+        v-if="filtering"
+        class="wp-pv-count"
+      >{{ visible.length }} of {{ rows.length }}</span>
+    </div>
+    <table class="wp-pv-table">
+      <colgroup>
+        <col class="wp-pv-col-n">
+        <col style="width: 150px">
+        <col>
+        <col
+          v-if="negCount"
+          style="width: 28%"
+        >
+      </colgroup>
+      <thead>
+        <tr>
+          <th />
+          <th>Variable</th>
+          <th>Value</th>
+          <th v-if="negCount">
+            Negative
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(r, i) in shown"
+          :key="i"
+          data-test="fixed-row"
+        >
+          <td class="wp-pv-n">
+            {{ i + 1 }}
+          </td>
+          <td class="wp-pv-var">
+            ${{ r.name }}
+          </td>
+          <td>
+            <div :class="{ 'wp-pv-clamp': r.value.length > LONG_CHARS && !expanded.has(i) }">
+              <TokenizedValue
+                :value="r.value"
+                :uuid-to-name="refMap"
+              />
+            </div>
+            <Button
+              v-if="r.value.length > LONG_CHARS"
+              variant="link"
+              size="sm"
+              @click="toggle(i)"
+            >{{ expanded.has(i) ? "Show less" : "Show all" }}</Button>
+          </td>
+          <td
+            v-if="negCount"
+            class="wp-pv-neg-cell"
+          >
+            <span
+              v-if="r.negative"
+              data-test="fixed-negative"
+            >
+              <span class="wp-pv-negtag">NEG</span>
+              <TokenizedValue
+                :value="r.negative"
+                :uuid-to-name="refMap"
+              />
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p
+      v-if="!visible.length"
+      class="wp-pv-empty"
+    >
+      No values match.
+    </p>
+    <div
+      v-if="!filtering && visible.length > PAGE"
+      class="wp-pv-more"
+    >
+      <Button
+        variant="link"
+        size="sm"
+        data-test="fixed-more"
+        @click="showAll = !showAll"
+      >
+        {{ showAll ? "Show fewer" : `Show ${visible.length - PAGE} more` }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>

package/src/HsvPicker.vue

@@ -2,7 +2,7 @@
 /**
  * HsvPicker — saturation/value square + hue slider.
  *
- * Shared between manager ColorPicker / TweaksPanel AND the canvas
+ * Shared between ColorField / TweaksPanel AND the canvas
  * bundle modal. CSS uses `--wp-*` tokens with hardcoded fallbacks so
  * the picker renders inside the extension where the manager spacing
  * tokens (`--wp-space-*`) aren't loaded.
@@ -167,7 +167,7 @@ const hueCursorStyle = computed(() => ({
   position: absolute;
   width: 14px;
   height: 14px;
-  border-radius: 50%; /* round: picker cursor on the colour field */
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
   transform: translate(-50%, -50%);