hyperbook 0.113.0 → 0.113.2

package/dist/assets/directive-bitflow/{index-BdBBCZSy.js → index-Dn5hHVuT.js}

@@ -1,6 +1,6 @@
-import { L as K, a4 as j, ac as pe, ad as re, a9 as E, a2 as N, P as J, a as v, j as r, b as $, aa as he, s as fe } from "./dom-uYx_3K1r.js";
-import { v as Q, e as ee, _ as te, A as W, M as G, P as we, E as ge, s as me, L as xe, t as ve, R as Ce } from "./bitLoaders-DIGwTcpd.js";
-const ye = K({
+import { L as K, a4 as j, ac as fe, ad as ae, a9 as R, ao as we, a6 as J, a2 as N, P as Q, a as v, j as r, b as E, aa as me, s as ge } from "./dom-uYx_3K1r.js";
+import { e as ee, P as te, i as le, g as W, F as G, M as re, B as xe, y as ve, U as Ce, r as ye, H as ke } from "./bitLoaders-CxvZkGrY.js";
+const Le = K({
   /** Stable across edits, so a target or a startColor keeps pointing at the
    * same colour even after the author renames it or moves it in the list. */
   id: N().min(1),
@@ -12,11 +12,11 @@ const ye = K({
 }), P = [
   { id: "white", color: "#ffffff", label: "0" },
   { id: "black", color: "#000000", label: "1" }
-], ke = K({
+], je = K({
   instruction: N().default(""),
-  rows: J().int().min(1).max(32).default(5),
-  columns: J().int().min(1).max(32).default(5),
-  palette: j(ye).min(1).default(() => P.map((e) => ({ ...e }))),
+  rows: Q().int().min(1).max(32).default(5),
+  columns: Q().int().min(1).max(32).default(5),
+  palette: j(Le).min(1).default(() => P.map((e) => ({ ...e }))),
   /** The picture the learner must match, as palette ids, rows by columns. */
   target: j(j(N())).default([]),
   /**
@@ -24,26 +24,33 @@ const ye = K({
    * nothing is locked — kept as "no array" rather than "an array of every
    * cell false" so an untouched task costs nothing to store.
    */
-  given: j(j(E())).default([]),
+  given: j(j(R())).default([]),
   /** The palette id every free cell starts as, before the learner paints
    * anything. */
   startColor: N().default(() => P[0].id),
   /** Row and column numbers along the edges. */
-  showCoordinates: E().default(!0),
+  showCoordinates: R().default(!0),
+  /**
+   * The number the first row and column are called by, along the edges and
+   * in each cell's accessible name. 1 is how a picture is counted; 0 is how
+   * a program indexes it, so a grid beside `bild[zeile][spalte]` or
+   * `grid[row][col]` names its cells the way the code does.
+   */
+  firstIndex: we([J(0), J(1)]).default(1),
   /** Each palette entry's label drawn inside its cells — useful for a PBM
    * grid of 0s and 1s, where the colour alone is easy to misread. */
-  showLabels: E().default(!1),
-  partialCredit: E().default(!0),
-  evaluation: pe.default(re)
+  showLabels: R().default(!1),
+  partialCredit: R().default(!0),
+  evaluation: fe.default(ae)
 }).check((e) => {
-  const { palette: i, rows: d, columns: o, target: t, given: n, startColor: c } = e.value, f = i.map((h) => h.id);
+  const { palette: a, rows: d, columns: o, target: t, given: n, startColor: c } = e.value, f = a.map((p) => p.id);
   if (new Set(f).size !== f.length && e.issues.push({
     code: "custom",
-    input: i,
+    input: a,
     path: ["palette"],
     message: "Each colour needs its own id."
   }), e.value.evaluation.mode === "auto") {
-    if (t.length !== d || t.some((h) => h.length !== o)) {
+    if (t.length !== d || t.some((p) => p.length !== o)) {
       e.issues.push({
         code: "custom",
         input: t,
@@ -52,12 +59,12 @@ const ye = K({
       });
       return;
     }
-    t.some((h) => h.some((C) => !f.includes(C))) && e.issues.push({
+    t.some((p) => p.some((C) => !f.includes(C))) && e.issues.push({
       code: "custom",
       input: t,
       path: ["target"],
       message: "The picture uses a colour that is not in the palette."
-    }), n.length > 0 && (n.length !== d || n.some((h) => h.length !== o)) && e.issues.push({
+    }), n.length > 0 && (n.length !== d || n.some((p) => p.length !== o)) && e.issues.push({
       code: "custom",
       input: n,
       path: ["given"],
@@ -74,45 +81,45 @@ const ye = K({
    * from a smaller grid the author has since resized is padded back out by
    * `effectiveCells` at read time instead of being rewritten. */
   cells: j(j(N())).default([])
-}), U = (e, i, d) => e.given[i]?.[d] === !0, le = (e, i) => e.palette.find((d) => d.id === i), Le = (e, i) => Array.from(
+}), V = (e, a, d) => e.given[a]?.[d] === !0, ie = (e, a) => e.palette.find((d) => d.id === a), Ne = (e, a) => Array.from(
   { length: e.rows },
   (d, o) => Array.from(
     { length: e.columns },
-    (t, n) => U(e, o, n) ? e.target[o]?.[n] ?? e.startColor : i?.[o]?.[n] ?? e.startColor
+    (t, n) => V(e, o, n) ? e.target[o]?.[n] ?? e.startColor : a?.[o]?.[n] ?? e.startColor
   )
-), je = (e) => Array.from(
+), Pe = (e) => Array.from(
   { length: e.rows },
   () => Array.from({ length: e.columns }, () => e.startColor)
-), Ne = (e, i, d, o) => {
+), ze = (e, a, d, o) => {
   const t = e.map((n) => [...n]);
-  return t[i] = [...t[i] ?? []], t[i][d] = o, t;
-}, H = (e, i, d, o) => Array.from(
-  { length: i },
+  return t[a] = [...t[a] ?? []], t[a][d] = o, t;
+}, A = (e, a, d, o) => Array.from(
+  { length: a },
   (t, n) => Array.from({ length: d }, (c, f) => e[n]?.[f] ?? o)
-), Pe = (e) => {
-  const i = e.replace("#", ""), d = parseInt(i.slice(0, 2), 16), o = parseInt(i.slice(2, 4), 16), t = parseInt(i.slice(4, 6), 16);
+), He = (e) => {
+  const a = e.replace("#", ""), d = parseInt(a.slice(0, 2), 16), o = parseInt(a.slice(2, 4), 16), t = parseInt(a.slice(4, 6), 16);
   return (0.299 * d + 0.587 * o + 0.114 * t) / 255 > 0.6 ? "#000000" : "#ffffff";
-}, ae = (e, i) => Array.from(
+}, oe = (e, a) => Array.from(
   { length: e.rows },
   (d, o) => Array.from({ length: e.columns }, (t, n) => {
-    if (U(e, o, n)) return !1;
-    const c = i?.cells?.[o]?.[n] ?? e.startColor, f = e.target[o]?.[n] ?? e.startColor;
+    if (V(e, o, n)) return !1;
+    const c = a?.cells?.[o]?.[n] ?? e.startColor, f = e.target[o]?.[n] ?? e.startColor;
     return c !== f;
   })
-), Ae = (e, i) => {
-  const d = ae(e, i);
+), Ae = (e, a) => {
+  const d = oe(e, a);
   let o = 0, t = 0;
   for (let n = 0; n < e.rows; n++)
     for (let c = 0; c < e.columns; c++)
-      U(e, n, c) || (t += 1, d[n][c] || (o += 1));
+      V(e, n, c) || (t += 1, d[n][c] || (o += 1));
   return e.partialCredit ? { earned: o, possible: t } : { earned: t > 0 && o === t ? 1 : 0, possible: t > 0 ? 1 : 0 };
-}, ze = ({
+}, Be = ({
   data: e,
-  answer: i
+  answer: a
 }) => {
   if (e.evaluation.mode === "skip")
     return { state: "unknown", allowRetry: !1 };
-  const d = Ae(e, i);
+  const d = Ae(e, a);
   return {
     state: d.possible > 0 && d.earned === d.possible ? "correct" : "wrong",
     score: d,
@@ -121,10 +128,10 @@ const ye = K({
       // So the learner's own grid can mark the cells it got wrong once
       // checked, without recomputing the comparison from a raw answer the
       // Task component would otherwise have no reason to hold onto.
-      wrong: ae(e, i)
+      wrong: oe(e, a)
     }
   };
-}, _ = {
+}, U = {
   en: {
     name: "Pixel grid",
     description: "A grid the learner paints from a palette, marked cell by cell against the picture.",
@@ -153,7 +160,7 @@ const ye = K({
     colorFallback: "Farbe {number}",
     clear: "Leeren"
   }
-}, He = '.bitflow-pixelgrid-palette{display:flex;flex-wrap:wrap;gap:var(--bitflow-space-xxsmall)}.bitflow-pixelgrid-swatch{display:inline-flex;align-items:center;gap:var(--bitflow-space-xxsmall);padding:var(--bitflow-space-xxsmall) var(--bitflow-space-xsmall);min-height:44px;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);cursor:pointer;font-size:var(--bitflow-font-size-small)}.bitflow-pixelgrid-swatch:has(:checked){border-color:var(--bitflow-color-primary);border-width:calc(var(--bitflow-border-width) * 1.5)}.bitflow-pixelgrid-swatch:has(:focus-visible){box-shadow:var(--bitflow-shadow-outline)}.bitflow-pixelgrid-swatch-fill{width:1.5rem;height:1.5rem;border-radius:var(--bitflow-radius-small);border:1px solid var(--bitflow-color-border);flex:none}.bitflow-pixelgrid-table{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;width:min(100%,calc(var(--bitflow-pixelgrid-columns, 5) * 3rem))}.bitflow-pixelgrid-table:not(.bitflow-pixelgrid-coords){grid-template-columns:1fr;grid-template-rows:1fr}.bitflow-pixelgrid-corner{grid-column:1;grid-row:1}.bitflow-pixelgrid-colheads{grid-column:2;grid-row:1;display:flex}.bitflow-pixelgrid-colheads span{flex:1 1 0;min-width:0;text-align:center}.bitflow-pixelgrid-rowheads{grid-column:1;grid-row:2;display:flex;flex-direction:column}.bitflow-pixelgrid-rowheads span{flex:1 1 0;min-height:0;display:flex;align-items:center}.bitflow-pixelgrid-corner,.bitflow-pixelgrid-colheads span,.bitflow-pixelgrid-rowheads span{font-size:11px;font-variant-numeric:tabular-nums;color:var(--bitflow-color-text-muted);padding-inline:2px;-webkit-user-select:none;user-select:none}.bitflow-pixelgrid-grid{grid-column:2;grid-row:2;display:flex;flex-direction:column;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);overflow:hidden;touch-action:none;cursor:crosshair}.bitflow-pixelgrid-table:not(.bitflow-pixelgrid-coords) .bitflow-pixelgrid-grid{grid-column:1;grid-row:1}.bitflow-pixelgrid-grid:focus-visible{outline:none;box-shadow:var(--bitflow-shadow-outline)}.bitflow-pixelgrid-row{display:flex}.bitflow-pixelgrid-cell{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;aspect-ratio:1;container-type:inline-size;outline:1px solid var(--bitflow-color-border);outline-offset:-1px}.bitflow-pixelgrid-label{font-family:var(--bitflow-font-family-mono);font-size:55cqw;line-height:1}.bitflow-pixelgrid-cell-cursor{box-shadow:inset 0 0 0 2px var(--bitflow-color-primary);z-index:1}.bitflow-pixelgrid-cell-given{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #000}.bitflow-pixelgrid-cell-cursor.bitflow-pixelgrid-cell-given{box-shadow:inset 0 0 0 2px var(--bitflow-color-primary),inset 0 0 0 4px #fff,inset 0 0 0 6px #000}.bitflow-pixelgrid-cell-wrong:after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.45) 0 3px,transparent 3px 9px),repeating-linear-gradient(45deg,rgba(255,255,255,.45) 4.5px 7.5px,transparent 7.5px 9px)}.bitflow-pixelgrid-palette-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bitflow-space-xsmall)}.bitflow-pixelgrid-color-input{flex:none;width:2.5rem;height:44px;padding:2px;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);background:var(--bitflow-color-surface)}.bitflow-pixelgrid-palette-row>.bitflow-input{flex:1 1 10rem;min-width:0}.bitflow-pixelgrid-size{width:var(--bitflow-pixelgrid-size-width, 6rem)}', Be = {
+}, Me = '.bitflow-pixelgrid-palette{display:flex;flex-wrap:wrap;gap:var(--bitflow-space-xxsmall)}.bitflow-pixelgrid-swatch{display:inline-flex;align-items:center;gap:var(--bitflow-space-xxsmall);padding:var(--bitflow-space-xxsmall) var(--bitflow-space-xsmall);min-height:44px;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);cursor:pointer;font-size:var(--bitflow-font-size-small)}.bitflow-pixelgrid-swatch:has(:checked){border-color:var(--bitflow-color-primary);border-width:calc(var(--bitflow-border-width) * 1.5)}.bitflow-pixelgrid-swatch:has(:focus-visible){box-shadow:var(--bitflow-shadow-outline)}.bitflow-pixelgrid-swatch-fill{width:1.5rem;height:1.5rem;border-radius:var(--bitflow-radius-small);border:1px solid var(--bitflow-color-border);flex:none}.bitflow-pixelgrid-table{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;width:min(100%,calc(var(--bitflow-pixelgrid-columns, 5) * 3rem))}.bitflow-pixelgrid-table:not(.bitflow-pixelgrid-coords){grid-template-columns:1fr;grid-template-rows:1fr}.bitflow-pixelgrid-corner{grid-column:1;grid-row:1}.bitflow-pixelgrid-colheads{grid-column:2;grid-row:1;display:flex}.bitflow-pixelgrid-colheads span{flex:1 1 0;min-width:0;text-align:center}.bitflow-pixelgrid-rowheads{grid-column:1;grid-row:2;display:flex;flex-direction:column}.bitflow-pixelgrid-rowheads span{flex:1 1 0;min-height:0;display:flex;align-items:center}.bitflow-pixelgrid-corner,.bitflow-pixelgrid-colheads span,.bitflow-pixelgrid-rowheads span{font-size:11px;font-variant-numeric:tabular-nums;color:var(--bitflow-color-text-muted);padding-inline:2px;-webkit-user-select:none;user-select:none}.bitflow-pixelgrid-grid{grid-column:2;grid-row:2;display:flex;flex-direction:column;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);overflow:hidden;touch-action:none;cursor:crosshair}.bitflow-pixelgrid-table:not(.bitflow-pixelgrid-coords) .bitflow-pixelgrid-grid{grid-column:1;grid-row:1}.bitflow-pixelgrid-grid:focus-visible{outline:none;box-shadow:var(--bitflow-shadow-outline)}.bitflow-pixelgrid-row{display:flex}.bitflow-pixelgrid-cell{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;aspect-ratio:1;container-type:inline-size;outline:1px solid var(--bitflow-color-border);outline-offset:-1px}.bitflow-pixelgrid-label{font-family:var(--bitflow-font-family-mono);font-size:55cqw;line-height:1}.bitflow-pixelgrid-cell-cursor{box-shadow:inset 0 0 0 2px var(--bitflow-color-primary);z-index:1}.bitflow-pixelgrid-cell-given{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #000}.bitflow-pixelgrid-cell-cursor.bitflow-pixelgrid-cell-given{box-shadow:inset 0 0 0 2px var(--bitflow-color-primary),inset 0 0 0 4px #fff,inset 0 0 0 6px #000}.bitflow-pixelgrid-cell-wrong:after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.45) 0 3px,transparent 3px 9px),repeating-linear-gradient(45deg,rgba(255,255,255,.45) 4.5px 7.5px,transparent 7.5px 9px)}.bitflow-pixelgrid-palette-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bitflow-space-xsmall)}.bitflow-pixelgrid-color-input{flex:none;width:2.5rem;height:44px;padding:2px;border:var(--bitflow-border-width) solid var(--bitflow-color-border);border-radius:var(--bitflow-radius-standard);background:var(--bitflow-color-surface)}.bitflow-pixelgrid-palette-row>.bitflow-input{flex:1 1 10rem;min-width:0}.bitflow-pixelgrid-size{width:var(--bitflow-pixelgrid-size-width, 6rem)}', Se = {
   en: {
     instructionLabel: "Instruction",
     instructionHint: "Shown above the grid. Markdown is allowed — a PBM listing reads well in a code block.",
@@ -182,6 +189,10 @@ const ye = K({
     startColorHint: "What every unlocked cell looks like before the learner paints it.",
     showCoordinatesLabel: "Show row and column numbers",
     showCoordinatesHint: "Along the edges of the grid.",
+    firstIndexLabel: "Count rows and columns from",
+    firstIndexHint: "Used along the edges and in each cell's name for screen readers. Choose 0 when the grid stands beside code that indexes an array, so row 0 here is row 0 there.",
+    firstIndexOne: "1, as a picture is counted",
+    firstIndexZero: "0, as an array is indexed",
     showLabelsLabel: "Show colour labels in the cells",
     showLabelsHint: "Useful for a PBM grid of 0s and 1s, where the colour alone is easy to misread.",
     partialCreditLabel: "Give partial credit",
@@ -220,6 +231,10 @@ const ye = K({
     startColorHint: "Wie jede ungesperrte Zelle aussieht, bevor sie bemalt wird.",
     showCoordinatesLabel: "Zeilen- und Spaltennummern anzeigen",
     showCoordinatesHint: "An den Rändern des Rasters.",
+    firstIndexLabel: "Zeilen und Spalten zählen ab",
+    firstIndexHint: "Gilt für die Nummern am Rand und für den Namen jeder Zelle im Screenreader. Wähle 0, wenn das Raster neben Code steht, der ein Feld indiziert – dann ist Zeile 0 hier auch Zeile 0 dort.",
+    firstIndexOne: "1, wie man ein Bild abzählt",
+    firstIndexZero: "0, wie man ein Feld indiziert",
     showLabelsLabel: "Farbbeschriftungen in den Zellen anzeigen",
     showLabelsHint: "Nützlich für ein PBM-Raster aus Nullen und Einsen, bei dem die Farbe allein leicht misszuverstehen ist.",
     partialCreditLabel: "Teilpunkte vergeben",
@@ -232,22 +247,22 @@ const ye = K({
   }
 };
 class B extends Error {
-  constructor(i, d = {}) {
-    super(i), this.key = i, this.vars = d;
+  constructor(a, d = {}) {
+    super(a), this.key = a, this.vars = d;
   }
   key;
   vars;
 }
-const Me = (e) => {
-  const i = e.split(`
+const Ie = (e) => {
+  const a = e.split(`
 `).map((c) => c.replace(/#.*/, "")).join(`
 `).split(/\s+/).filter((c) => c.length > 0);
-  if (i[0] !== "P1")
+  if (a[0] !== "P1")
     throw new B("pbmNoMagic");
-  const d = Number(i[1]), o = Number(i[2]);
+  const d = Number(a[1]), o = Number(a[2]);
   if (!Number.isInteger(d) || !Number.isInteger(o) || d <= 0 || o <= 0)
     throw new B("pbmBadSize");
-  const t = i.slice(3).join("").split("");
+  const t = a.slice(3).join("").split("");
   if (t.length !== o * d)
     throw new B("pbmCount", {
       expected: o * d,
@@ -258,8 +273,8 @@ const Me = (e) => {
   const n = [];
   for (let c = 0; c < o; c++) {
     const f = [];
-    for (let h = 0; h < d; h++) {
-      const C = t[c * d + h];
+    for (let p = 0; p < d; p++) {
+      const C = t[c * d + p];
       if (C !== "0" && C !== "1")
         throw new B("pbmBadValue", { value: C });
       f.push(C === "1" ? "black" : "white");
@@ -267,98 +282,102 @@ const Me = (e) => {
     n.push(f);
   }
   return { rows: o, columns: d, cells: n };
-}, ie = ({
+}, ne = ({
   data: e,
-  cells: i,
+  cells: a,
   locale: d,
   readonly: o,
   given: t,
   wrong: n,
   onChange: c,
   lockGiven: f = !0,
-  toggleGiven: h = !1,
+  toggleGiven: p = !1,
   onToggleGiven: C,
   hint: Z,
   showClear: M = !0
 }) => {
-  const w = (s, a) => $(_, s, d, a), [x, A] = v.useState({ row: 0, column: 0 }), [I, D] = v.useState(
+  const w = (s, i) => E(U, s, d, i), [x, z] = v.useState({ row: 0, column: 0 }), [$, O] = v.useState(
     e.palette[0]?.id ?? ""
-  ), [O, T] = v.useState(""), l = v.useId(), u = v.useRef(null), b = v.useRef(i), m = v.useRef(!1), y = v.useRef(null), z = e.palette.find((s) => s.id === I)?.id ?? e.palette[0]?.id ?? "", V = (s, a) => {
-    const p = le(e, s);
-    return p?.label || p?.id || w("colorFallback", { number: a + 1 });
-  }, Y = (s) => {
-    D(s);
-    const a = e.palette.findIndex((p) => p.id === s);
-    T(w("selectedColor", { color: V(s, a) }));
-  }, S = (s, a) => {
+  ), [D, S] = v.useState(""), l = v.useId(), u = v.useRef(null), b = v.useRef(a), g = v.useRef(!1), y = v.useRef(null), H = e.palette.find((s) => s.id === $)?.id ?? e.palette[0]?.id ?? "", Y = (s, i) => {
+    const h = ie(e, s);
+    return h?.label || h?.id || w("colorFallback", { number: i + 1 });
+  }, X = (s) => {
+    O(s);
+    const i = e.palette.findIndex((h) => h.id === s);
+    S(w("selectedColor", { color: Y(s, i) }));
+  }, I = (s, i) => {
     if (o) return;
-    if (h) {
-      C?.(s, a);
+    if (p) {
+      C?.(s, i);
       return;
     }
-    if (f && (t?.[s]?.[a] ?? !1)) return;
-    m.current || (b.current = i);
-    const p = Ne(b.current, s, a, z);
-    b.current = p, c?.(p);
-  }, X = (s, a) => {
-    const p = u.current?.getBoundingClientRect();
-    if (!p || p.width === 0) return;
-    const g = Math.floor((s - p.left) / p.width * e.columns), k = Math.floor((a - p.top) / p.height * e.rows);
-    if (!(k < 0 || g < 0 || k >= e.rows || g >= e.columns))
-      return { row: k, column: g };
-  }, de = (s) => {
+    if (f && (t?.[s]?.[i] ?? !1)) return;
+    g.current || (b.current = a);
+    const h = ze(b.current, s, i, H);
+    b.current = h, c?.(h);
+  }, q = (s, i) => {
+    const h = u.current?.getBoundingClientRect();
+    if (!h || h.width === 0) return;
+    const m = Math.floor((s - h.left) / h.width * e.columns), k = Math.floor((i - h.top) / h.height * e.rows);
+    if (!(k < 0 || m < 0 || k >= e.rows || m >= e.columns))
+      return { row: k, column: m };
+  }, ue = (s) => {
     if (o || s.button !== 0) return;
-    const a = X(s.clientX, s.clientY);
-    a && (s.preventDefault(), u.current?.focus(), m.current = !0, b.current = i, y.current = a, A(a), S(a.row, a.column));
+    const i = q(s.clientX, s.clientY);
+    i && (s.preventDefault(), u.current?.focus(), g.current = !0, b.current = a, y.current = i, z(i), I(i.row, i.column));
   };
-  me((s) => {
-    if (!m.current) return;
-    const a = X(s.clientX, s.clientY);
-    a && (y.current && y.current.row === a.row && y.current.column === a.column || (y.current = a, A(a), S(a.row, a.column)));
+  ve((s) => {
+    if (!g.current) return;
+    const i = q(s.clientX, s.clientY);
+    i && (y.current && y.current.row === i.row && y.current.column === i.column || (y.current = i, z(i), I(i.row, i.column)));
   }, () => {
-    m.current = !1;
+    g.current = !1;
   });
-  const R = (s, a) => {
-    A((p) => ({
-      row: Math.min(e.rows - 1, Math.max(0, p.row + s)),
-      column: Math.min(e.columns - 1, Math.max(0, p.column + a))
+  const T = (s, i) => {
+    z((h) => ({
+      row: Math.min(e.rows - 1, Math.max(0, h.row + s)),
+      column: Math.min(e.columns - 1, Math.max(0, h.column + i))
     }));
-  }, ce = (s) => {
+  }, be = (s) => {
     if (o) return;
-    if (/^[1-9]$/.test(s.key) && !h) {
-      const p = e.palette[Number(s.key) - 1];
-      p && (s.preventDefault(), Y(p.id));
+    if (/^[1-9]$/.test(s.key) && !p) {
+      const h = e.palette[Number(s.key) - 1];
+      h && (s.preventDefault(), X(h.id));
       return;
     }
-    const a = {
-      ArrowRight: () => R(0, 1),
-      ArrowLeft: () => R(0, -1),
-      ArrowDown: () => R(1, 0),
-      ArrowUp: () => R(-1, 0),
-      Enter: () => S(x.row, x.column),
-      " ": () => S(x.row, x.column)
+    const i = {
+      ArrowRight: () => T(0, 1),
+      ArrowLeft: () => T(0, -1),
+      ArrowDown: () => T(1, 0),
+      ArrowUp: () => T(-1, 0),
+      Enter: () => I(x.row, x.column),
+      " ": () => I(x.row, x.column)
     }[s.key];
-    a && (s.preventDefault(), a());
-  }, ue = (s, a) => {
-    const p = i[s]?.[a], g = e.palette.findIndex((L) => L.id === p), k = [w("cellAt", { color: V(p, g), row: s + 1, column: a + 1 })];
-    return t?.[s]?.[a] && k.push(w("given")), n?.[s]?.[a] && k.push(w("wrong")), k.join(". ");
+    i && (s.preventDefault(), i());
+  }, he = (s, i) => {
+    const h = a[s]?.[i], m = e.palette.findIndex((L) => L.id === h), k = [w("cellAt", {
+      color: Y(h, m),
+      row: s + e.firstIndex,
+      column: i + e.firstIndex
+    })];
+    return t?.[s]?.[i] && k.push(w("given")), n?.[s]?.[i] && k.push(w("wrong")), k.join(". ");
   };
   return /* @__PURE__ */ r.jsxs("div", { className: "bitflow-stack-small bitflow-stack", children: [
-    !o && !h && /* @__PURE__ */ r.jsx(
+    !o && !p && /* @__PURE__ */ r.jsx(
       "div",
       {
         className: "bitflow-pixelgrid-palette",
         role: "group",
         "aria-label": w("pickColor"),
-        children: e.palette.map((s, a) => /* @__PURE__ */ r.jsxs("label", { className: "bitflow-pixelgrid-swatch", children: [
+        children: e.palette.map((s, i) => /* @__PURE__ */ r.jsxs("label", { className: "bitflow-pixelgrid-swatch", children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
               type: "radio",
               name: l,
               className: "bitflow-visually-hidden",
-              checked: z === s.id,
-              onChange: () => Y(s.id)
+              checked: H === s.id,
+              onChange: () => X(s.id)
             }
           ),
           /* @__PURE__ */ r.jsx(
@@ -370,8 +389,8 @@ const Me = (e) => {
             }
           ),
           /* @__PURE__ */ r.jsxs("span", { children: [
-            s.label || w("colorFallback", { number: a + 1 }),
-            a < 9 ? ` (${a + 1})` : ""
+            s.label || w("colorFallback", { number: i + 1 }),
+            i < 9 ? ` (${i + 1})` : ""
           ] })
         ] }, s.id))
       }
@@ -385,8 +404,8 @@ const Me = (e) => {
         children: [
           e.showCoordinates && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
             /* @__PURE__ */ r.jsx("div", { className: "bitflow-pixelgrid-corner", "aria-hidden": "true" }),
-            /* @__PURE__ */ r.jsx("div", { className: "bitflow-pixelgrid-colheads", "aria-hidden": "true", children: Array.from({ length: e.columns }, (s, a) => /* @__PURE__ */ r.jsx("span", { children: a + 1 }, a)) }),
-            /* @__PURE__ */ r.jsx("div", { className: "bitflow-pixelgrid-rowheads", "aria-hidden": "true", children: Array.from({ length: e.rows }, (s, a) => /* @__PURE__ */ r.jsx("span", { children: a + 1 }, a)) })
+            /* @__PURE__ */ r.jsx("div", { className: "bitflow-pixelgrid-colheads", "aria-hidden": "true", children: Array.from({ length: e.columns }, (s, i) => /* @__PURE__ */ r.jsx("span", { children: i + e.firstIndex }, i)) }),
+            /* @__PURE__ */ r.jsx("div", { className: "bitflow-pixelgrid-rowheads", "aria-hidden": "true", children: Array.from({ length: e.rows }, (s, i) => /* @__PURE__ */ r.jsx("span", { children: i + e.firstIndex }, i)) })
           ] }),
           /* @__PURE__ */ r.jsx(
             "div",
@@ -397,53 +416,53 @@ const Me = (e) => {
               "aria-label": w("gridLabel"),
               tabIndex: o ? -1 : 0,
               "aria-activedescendant": `${l}-${x.row}-${x.column}`,
-              onPointerDown: de,
-              onKeyDown: ce,
-              children: Array.from({ length: e.rows }, (s, a) => /* @__PURE__ */ r.jsx("div", { role: "row", className: "bitflow-pixelgrid-row", children: Array.from({ length: e.columns }, (p, g) => {
-                const k = i[a]?.[g], L = le(e, k), be = t?.[a]?.[g] ?? !1, q = n?.[a]?.[g] ?? !1, F = ["bitflow-pixelgrid-cell"];
-                return be && F.push("bitflow-pixelgrid-cell-given"), q && F.push("bitflow-pixelgrid-cell-wrong"), x.row === a && x.column === g && F.push("bitflow-pixelgrid-cell-cursor"), /* @__PURE__ */ r.jsxs(
+              onPointerDown: ue,
+              onKeyDown: be,
+              children: Array.from({ length: e.rows }, (s, i) => /* @__PURE__ */ r.jsx("div", { role: "row", className: "bitflow-pixelgrid-row", children: Array.from({ length: e.columns }, (h, m) => {
+                const k = a[i]?.[m], L = ie(e, k), pe = t?.[i]?.[m] ?? !1, _ = n?.[i]?.[m] ?? !1, F = ["bitflow-pixelgrid-cell"];
+                return pe && F.push("bitflow-pixelgrid-cell-given"), _ && F.push("bitflow-pixelgrid-cell-wrong"), x.row === i && x.column === m && F.push("bitflow-pixelgrid-cell-cursor"), /* @__PURE__ */ r.jsxs(
                   "span",
                   {
-                    id: `${l}-${a}-${g}`,
+                    id: `${l}-${i}-${m}`,
                     role: "gridcell",
                     className: F.join(" "),
                     style: { background: L?.color ?? "transparent" },
-                    "aria-label": ue(a, g),
+                    "aria-label": he(i, m),
                     children: [
                       e.showLabels && L && /* @__PURE__ */ r.jsx(
                         "span",
                         {
                           className: "bitflow-pixelgrid-label",
-                          style: { color: Pe(L.color) },
+                          style: { color: He(L.color) },
                           "aria-hidden": "true",
                           children: L.label || L.id
                         }
                       ),
-                      q && /* @__PURE__ */ r.jsx("span", { className: "bitflow-visually-hidden", children: w("wrong") })
+                      _ && /* @__PURE__ */ r.jsx("span", { className: "bitflow-visually-hidden", children: w("wrong") })
                     ]
                   },
-                  g
+                  m
                 );
-              }) }, a))
+              }) }, i))
             }
           )
         ]
       }
     ),
-    !o && !h && M && /* @__PURE__ */ r.jsx("div", { className: "bitflow-row", children: /* @__PURE__ */ r.jsx(
+    !o && !p && M && /* @__PURE__ */ r.jsx("div", { className: "bitflow-row", children: /* @__PURE__ */ r.jsx(
       "button",
       {
         type: "button",
         className: "bitflow-button bitflow-button-secondary",
-        onClick: () => c?.(je(e)),
+        onClick: () => c?.(Pe(e)),
         children: w("clear")
       }
     ) }),
-    /* @__PURE__ */ r.jsx("div", { className: "bitflow-visually-hidden", role: "status", "aria-live": "polite", children: O })
+    /* @__PURE__ */ r.jsx("div", { className: "bitflow-visually-hidden", role: "status", "aria-live": "polite", children: D })
   ] });
 }, Te = ({
   data: e,
-  answer: i,
+  answer: a,
   result: d,
   readonly: o,
   locale: t,
@@ -451,12 +470,12 @@ const Me = (e) => {
 }) => {
   const c = d?.detail?.wrong;
   return /* @__PURE__ */ r.jsxs("div", { className: "bitflow-stack", children: [
-    /* @__PURE__ */ r.jsx(xe, { markdown: e.instruction }),
+    /* @__PURE__ */ r.jsx(Ce, { markdown: e.instruction }),
     /* @__PURE__ */ r.jsx(
-      ie,
+      ne,
       {
         data: e,
-        cells: Le(e, i?.cells),
+        cells: Ne(e, a?.cells),
         given: e.given,
         wrong: c,
         locale: t,
@@ -465,39 +484,39 @@ const Me = (e) => {
       }
     )
   ] });
-}, oe = 1, ne = 32, Se = (e) => Math.min(ne, Math.max(oe, Math.round(e))), Re = (e) => {
-  for (let i = e.length + 1; ; i++) {
-    const d = `color-${i}`;
+}, se = 1, de = 32, Fe = (e) => Math.min(de, Math.max(se, Math.round(e))), Re = (e) => {
+  for (let a = e.length + 1; ; a++) {
+    const d = `color-${a}`;
     if (!e.some((o) => o.id === d)) return d;
   }
-}, Fe = ({
+}, Ge = ({
   data: e,
-  locale: i,
+  locale: a,
   onChange: d,
   errors: o
 }) => {
-  const t = (l, u) => $(Be, l, i, u), n = (l) => d({ ...e, ...l }), [c, f] = v.useState(!1), [h, C] = v.useState(""), [Z, M] = v.useState(void 0), w = H(e.target, e.rows, e.columns, e.startColor), x = (l, u) => n({
+  const t = (l, u) => E(Se, l, a, u), n = (l) => d({ ...e, ...l }), [c, f] = v.useState(!1), [p, C] = v.useState(""), [Z, M] = v.useState(void 0), w = A(e.target, e.rows, e.columns, e.startColor), x = (l, u) => n({
     rows: l,
     columns: u,
-    target: H(e.target, l, u, e.startColor),
-    given: e.given.length > 0 ? H(e.given, l, u, !1) : []
-  }), A = (l, u) => n({
+    target: A(e.target, l, u, e.startColor),
+    given: e.given.length > 0 ? A(e.given, l, u, !1) : []
+  }), z = (l, u) => n({
     palette: e.palette.map(
       (b) => b.id === l ? { ...b, ...u } : b
     )
-  }), I = (l) => {
-    const u = e.palette.filter((m) => m.id !== l), b = u[0]?.id ?? "";
+  }), $ = (l) => {
+    const u = e.palette.filter((g) => g.id !== l), b = u[0]?.id ?? "";
     n({
       palette: u,
-      target: e.target.map((m) => m.map((y) => y === l ? b : y)),
+      target: e.target.map((g) => g.map((y) => y === l ? b : y)),
       startColor: e.startColor === l ? b : e.startColor
     });
-  }, D = (l, u) => {
-    const b = e.given.length > 0 ? H(e.given, e.rows, e.columns, !1) : H([], e.rows, e.columns, !1);
-    b[l] = [...b[l]], b[l][u] = !b[l][u], n({ given: b.some((m) => m.includes(!0)) ? b : [] });
-  }, O = () => {
+  }, O = (l, u) => {
+    const b = e.given.length > 0 ? A(e.given, e.rows, e.columns, !1) : A([], e.rows, e.columns, !1);
+    b[l] = [...b[l]], b[l][u] = !b[l][u], n({ given: b.some((g) => g.includes(!0)) ? b : [] });
+  }, D = () => {
     try {
-      const l = Me(h);
+      const l = Ie(p);
       M(void 0), n({
         rows: l.rows,
         columns: l.columns,
@@ -511,24 +530,24 @@ const Me = (e) => {
         l instanceof B ? t(l.key, l.vars) : String(l)
       );
     }
-  }, T = (l, u, b) => /* @__PURE__ */ r.jsx(ve, { label: l, children: (m) => /* @__PURE__ */ r.jsx(
+  }, S = (l, u, b) => /* @__PURE__ */ r.jsx(ye, { label: l, children: (g) => /* @__PURE__ */ r.jsx(
     "input",
     {
-      ...m,
+      ...g,
       type: "number",
       className: "bitflow-input bitflow-pixelgrid-size",
-      min: oe,
-      max: ne,
+      min: se,
+      max: de,
       value: u,
       onChange: (y) => {
-        const z = Number(y.target.value);
-        Number.isFinite(z) && z > 0 && b(Se(z));
+        const H = Number(y.target.value);
+        Number.isFinite(H) && H > 0 && b(Fe(H));
       }
     }
   ) });
   return /* @__PURE__ */ r.jsxs("div", { className: "bitflow-stack", children: [
     /* @__PURE__ */ r.jsx(
-      Q,
+      ee,
       {
         label: t("instructionLabel"),
         hint: t("instructionHint"),
@@ -541,22 +560,22 @@ const Me = (e) => {
       /* @__PURE__ */ r.jsx("legend", { className: "bitflow-label", children: t("sizeLabel") }),
       /* @__PURE__ */ r.jsx("span", { className: "bitflow-hint", children: t("sizeHint") }),
       /* @__PURE__ */ r.jsxs("div", { className: "bitflow-row", children: [
-        T(t("rowsLabel"), e.rows, (l) => x(l, e.columns)),
-        T(
+        S(t("rowsLabel"), e.rows, (l) => x(l, e.columns)),
+        S(
           t("columnsLabel"),
           e.columns,
           (l) => x(e.rows, l)
         )
       ] })
     ] }),
-    /* @__PURE__ */ r.jsx(ee, { summary: t("importSummary"), children: /* @__PURE__ */ r.jsxs("div", { className: "bitflow-stack-small bitflow-stack", children: [
+    /* @__PURE__ */ r.jsx(te, { summary: t("importSummary"), children: /* @__PURE__ */ r.jsxs("div", { className: "bitflow-stack-small bitflow-stack", children: [
       /* @__PURE__ */ r.jsx(
-        Q,
+        ee,
         {
           label: t("importTextareaLabel"),
           hint: t("importHint"),
           rows: 6,
-          value: h,
+          value: p,
           error: Z,
           onChange: C
         }
@@ -566,7 +585,7 @@ const Me = (e) => {
         {
           type: "button",
           className: "bitflow-button bitflow-button-secondary",
-          onClick: O,
+          onClick: D,
           children: t("importButton")
         }
       ) })
@@ -574,7 +593,7 @@ const Me = (e) => {
     /* @__PURE__ */ r.jsxs("fieldset", { className: "bitflow-field", children: [
       /* @__PURE__ */ r.jsx("legend", { className: "bitflow-label", children: t("paletteLabel") }),
       /* @__PURE__ */ r.jsx("span", { className: "bitflow-hint", children: t("paletteHint") }),
-      te(o, "palette") && /* @__PURE__ */ r.jsx("span", { className: "bitflow-field-error", role: "alert", children: te(o, "palette") }),
+      le(o, "palette") && /* @__PURE__ */ r.jsx("span", { className: "bitflow-field-error", role: "alert", children: le(o, "palette") }),
       e.palette.map((l, u) => /* @__PURE__ */ r.jsxs("div", { className: "bitflow-pixelgrid-palette-row", children: [
         /* @__PURE__ */ r.jsx(
           "input",
@@ -583,7 +602,7 @@ const Me = (e) => {
             className: "bitflow-pixelgrid-color-input",
             value: l.color,
             "aria-label": t("colorSwatchOf", { position: u + 1 }),
-            onChange: (b) => A(l.id, { color: b.target.value })
+            onChange: (b) => z(l.id, { color: b.target.value })
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -594,7 +613,7 @@ const Me = (e) => {
             value: l.label,
             placeholder: t("colorLabelPlaceholder"),
             "aria-label": t("colorLabelOf", { position: u + 1 }),
-            onChange: (b) => A(l.id, { label: b.target.value })
+            onChange: (b) => z(l.id, { label: b.target.value })
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -604,7 +623,7 @@ const Me = (e) => {
             className: "bitflow-button bitflow-button-quiet",
             disabled: e.palette.length <= 1,
             "aria-label": t("removeColorOf", { position: u + 1 }),
-            onClick: () => I(l.id),
+            onClick: () => $(l.id),
             children: "✕"
           }
         )
@@ -638,22 +657,22 @@ const Me = (e) => {
         }
       ),
       /* @__PURE__ */ r.jsx(
-        ie,
+        ne,
         {
           data: e,
           cells: w,
           given: e.given,
-          locale: i,
+          locale: a,
           lockGiven: !1,
           toggleGiven: c,
-          onToggleGiven: D,
+          onToggleGiven: O,
           hint: c ? t("markGivenHowTo") : void 0,
           onChange: (l) => n({ target: l })
         }
       )
     ] }),
     /* @__PURE__ */ r.jsx(
-      we,
+      re,
       {
         label: t("startColorLabel"),
         hint: t("startColorHint"),
@@ -666,7 +685,7 @@ const Me = (e) => {
         onChange: (l) => n({ startColor: l })
       }
     ),
-    /* @__PURE__ */ r.jsxs(ee, { summary: t("advanced"), children: [
+    /* @__PURE__ */ r.jsxs(te, { summary: t("advanced"), children: [
       /* @__PURE__ */ r.jsx(
         G,
         {
@@ -676,6 +695,19 @@ const Me = (e) => {
           onChange: (l) => n({ showCoordinates: l })
         }
       ),
+      /* @__PURE__ */ r.jsx(
+        re,
+        {
+          label: t("firstIndexLabel"),
+          hint: t("firstIndexHint"),
+          value: String(e.firstIndex),
+          options: [
+            { value: "1", label: t("firstIndexOne") },
+            { value: "0", label: t("firstIndexZero") }
+          ],
+          onChange: (l) => n({ firstIndex: l === "0" ? 0 : 1 })
+        }
+      ),
       /* @__PURE__ */ r.jsx(
         G,
         {
@@ -695,26 +727,26 @@ const Me = (e) => {
         }
       ),
       /* @__PURE__ */ r.jsx(
-        ge,
+        xe,
         {
           evaluation: e.evaluation,
-          locale: i,
+          locale: a,
           onChange: (l) => n({ evaluation: l })
         }
       )
     ] })
   ] });
-}, se = "task-pixel-grid";
-he({
-  type: se,
+}, ce = "task-pixel-grid";
+me({
+  type: ce,
   kind: "task",
-  schema: ke,
-  evaluate: ze,
+  schema: je,
+  evaluate: Be,
   Task: Te,
-  Form: Fe,
+  Form: Ge,
   info: (e) => ({
-    name: $(_, "name", e),
-    description: $(_, "description", e)
+    name: E(U, "name", e),
+    description: E(U, "description", e)
   }),
   defaultData: () => ({
     instruction: "",
@@ -728,34 +760,35 @@ he({
     given: [],
     startColor: P[0].id,
     showCoordinates: !0,
+    firstIndex: 1,
     showLabels: !1,
     partialCredit: !0,
-    evaluation: re()
+    evaluation: ae()
   })
 });
-Ce(se);
-fe("bitflow-styles-task-pixel-grid", He);
+ke(ce);
+ge("bitflow-styles-task-pixel-grid", Me);
 export {
   $e as AnswerSchema,
   P as DEFAULT_PALETTE,
-  ke as DataSchema,
-  Fe as Form,
-  ye as PaletteEntrySchema,
+  je as DataSchema,
+  Ge as Form,
+  Le as PaletteEntrySchema,
   B as PbmError,
-  ie as PixelGrid,
-  se as TYPE,
+  ne as PixelGrid,
+  ce as TYPE,
   Te as Task,
-  je as blankCells,
-  Pe as contrastColor,
-  Le as effectiveCells,
-  ze as evaluate,
-  Be as formMessages,
-  U as isGiven,
-  _ as messages,
-  Ne as paintCell,
-  le as paletteEntry,
-  Me as parsePbm,
-  H as resizeGrid,
+  Pe as blankCells,
+  He as contrastColor,
+  Ne as effectiveCells,
+  Be as evaluate,
+  Se as formMessages,
+  V as isGiven,
+  U as messages,
+  ze as paintCell,
+  ie as paletteEntry,
+  Ie as parsePbm,
+  A as resizeGrid,
   Ae as scoreOf,
-  ae as wrongCells
+  oe as wrongCells
 };