@seamlet/astro 1.0.0 → 1.1.0

package/dist/{chunk-ZS32CW5F.js → chunk-I3HOJE3S.js}

@@ -35,6 +35,9 @@ function url(options) {
 function time(options) {
   return { kind: "time", ...options };
 }
+function slug(options) {
+  return { kind: "slug", ...options };
+}
 function reference(options) {
   return { kind: "reference", ...options };
 }
@@ -52,6 +55,7 @@ function collection(options) {
 function defaultValue(field) {
   switch (field.kind) {
     case "text":
+    case "slug":
       return "";
     case "toggle":
       return false;
@@ -118,6 +122,7 @@ function resolveInsideField(field, segments, path) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
     case "reference":
     case "references":
       return void 0;
@@ -353,6 +358,7 @@ function collectionIn(fields, content, names) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
     case "reference":
     case "references":
       return void 0;
@@ -379,6 +385,7 @@ function collectionFieldAt(schema, path) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
     case "reference":
     case "references":
       return void 0;
@@ -412,6 +419,7 @@ function withIdsIn(field, value, newId) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
     case "reference":
     case "references":
       return value;
@@ -467,6 +475,7 @@ function issuesInField(field, value, path, idsOf) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
       return [];
   }
 }
@@ -488,6 +497,146 @@ function stringsOf(value) {
   return list.filter((id) => typeof id === "string");
 }
 
+// src/schema/slug-checks.ts
+function slugFieldOf(item) {
+  const named = Object.entries(item).find(([, field]) => field.kind === "slug");
+  return named?.[0];
+}
+function takenSlugIssues(schema, content) {
+  return issuesInFields2(schema, content, []);
+}
+function issuesInFields2(fields, content, path) {
+  return Object.entries(fields).flatMap(
+    ([name, field]) => issuesInField2(field, content[name], [...path, name])
+  );
+}
+function issuesInField2(field, value, path) {
+  switch (field.kind) {
+    case "group":
+      return isContentObject(value) ? issuesInFields2(field.fields, value, path) : [];
+    case "collection":
+      return issuesInCollection(field, recordsOf2(value), path);
+    case "text":
+    case "richText":
+    case "number":
+    case "date":
+    case "image":
+    case "link":
+    case "toggle":
+    case "choice":
+    case "choices":
+    case "url":
+    case "time":
+    case "slug":
+    case "reference":
+    case "references":
+      return [];
+  }
+}
+function issuesInCollection(collection2, records, path) {
+  const ownIssues = takenSlugsOf(collection2, records, path);
+  const innerIssues = records.flatMap(
+    (record, index) => issuesInFields2(collection2.item, record, [...path, index])
+  );
+  return [...ownIssues, ...innerIssues];
+}
+function takenSlugsOf(collection2, records, path) {
+  const slugName = slugFieldOf(collection2.item);
+  if (slugName === void 0) return [];
+  const ids = records.map((record) => record[RECORD_ID_KEY]);
+  const slugs = records.map((record) => record[slugName]);
+  return slugs.flatMap((slug2, index) => {
+    if (typeof slug2 !== "string" || slug2 === "") return [];
+    const isAnEarlierSlug = slugs.indexOf(slug2) < index;
+    const isAnotherId = ids.some(
+      (id, idIndex) => id === slug2 && idIndex !== index
+    );
+    const isTaken = isAnEarlierSlug || isAnotherId;
+    return isTaken ? [{ path: [...path, index, slugName], code: "taken-slug" }] : [];
+  });
+}
+function recordsOf2(value) {
+  return Array.isArray(value) ? value.filter(isContentObject) : [];
+}
+
+// src/schema/slugs.ts
+var PAGE_SEGMENT = "[a-z0-9][a-z0-9-]*";
+var MAX_SLUG_LENGTH = 80;
+var SLUG_PATTERN = new RegExp(`^${PAGE_SEGMENT}$`, "u");
+var NOT_SLUG_CHARACTERS = /[^a-z0-9]+/gu;
+var EDGE_HYPHENS = /^-+|-+$/gu;
+var COMBINING_MARKS = new RegExp("\\p{M}", "gu");
+var HYPHEN = "-";
+var TRANSLITERATION = new Map(
+  Object.entries({
+    \u0430: "a",
+    \u0431: "b",
+    \u0432: "v",
+    \u0433: "g",
+    \u0434: "d",
+    \u0435: "e",
+    \u0451: "e",
+    \u0436: "zh",
+    \u0437: "z",
+    \u0438: "i",
+    \u0439: "y",
+    \u043A: "k",
+    \u043B: "l",
+    \u043C: "m",
+    \u043D: "n",
+    \u043E: "o",
+    \u043F: "p",
+    \u0440: "r",
+    \u0441: "s",
+    \u0442: "t",
+    \u0443: "u",
+    \u0444: "f",
+    \u0445: "h",
+    \u0446: "ts",
+    \u0447: "ch",
+    \u0448: "sh",
+    \u0449: "sch",
+    \u044A: "",
+    \u044B: "y",
+    \u044C: "",
+    \u044D: "e",
+    \u044E: "yu",
+    \u044F: "ya",
+    // Letters of Ukrainian and Belarusian words a Russian text may quote.
+    \u0456: "i",
+    \u0457: "yi",
+    \u0454: "ye",
+    \u0491: "g",
+    \u045E: "u",
+    // «Баня 6×4» is `banya-6x4`, the way its size is said.
+    "\xD7": "x"
+  })
+);
+var TRANSLITERATED = new RegExp(
+  `[${[...TRANSLITERATION.keys()].join("")}]`,
+  "gu"
+);
+function isSlug(value) {
+  return SLUG_PATTERN.test(value);
+}
+function slugOf(words) {
+  const latin = words.normalize("NFC").toLowerCase().replace(
+    TRANSLITERATED,
+    (character) => TRANSLITERATION.get(character) ?? character
+  ).normalize("NFKD").replace(COMBINING_MARKS, "");
+  const hyphenated = latin.toLowerCase().replace(NOT_SLUG_CHARACTERS, HYPHEN).replace(EDGE_HYPHENS, "");
+  return shortened(hyphenated);
+}
+function shortened(slug2) {
+  if (slug2.length <= MAX_SLUG_LENGTH) return slug2;
+  const cut = slug2.slice(0, MAX_SLUG_LENGTH);
+  const isWordWhole = slug2[MAX_SLUG_LENGTH] === HYPHEN;
+  if (isWordWhole) return cut;
+  const lastHyphen = cut.lastIndexOf(HYPHEN);
+  const whole = lastHyphen > 0 ? cut.slice(0, lastHyphen) : cut;
+  return whole.replace(EDGE_HYPHENS, "");
+}
+
 // src/schema/parse-content.ts
 var DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
 var TIME_PATTERN = /^(?:[01]\d|2[0-3]):[0-5]\d$/u;
@@ -501,9 +650,10 @@ function countCharacters(text2) {
 function parseContent(schema, input) {
   const parsed = parseFields(schema, input, []);
   const missingRecords = missingRecordIssues(schema, parsed.value);
+  const takenSlugs = takenSlugIssues(schema, parsed.value);
   return {
     content: parsed.value,
-    issues: [...parsed.issues, ...missingRecords]
+    issues: [...parsed.issues, ...missingRecords, ...takenSlugs]
   };
 }
 function parseFields(fields, input, path) {
@@ -547,6 +697,8 @@ function parseField(field, input, path) {
       return parseUrl(field, input, path);
     case "time":
       return parseTime(field, input, path);
+    case "slug":
+      return parseSlug(field, input, path);
     case "reference":
       return parseReference(field, input, path);
     case "references":
@@ -724,6 +876,17 @@ function parseTime(field, input, path) {
   }
   return valid(input);
 }
+function parseSlug(field, input, path) {
+  if (typeof input !== "string") {
+    return invalidType(defaultValue(field), path);
+  }
+  if (input === "") {
+    return valid(input);
+  }
+  const formatIssues = isSlug(input) ? [] : [{ path, code: "invalid-slug" }];
+  const lengthIssues = tooLongIssues(MAX_SLUG_LENGTH, input, path);
+  return { value: input, issues: [...formatIssues, ...lengthIssues] };
+}
 function parseCollection(field, input, path) {
   if (!Array.isArray(input)) {
     return invalidType(defaultValue(field), path);
@@ -876,7 +1039,7 @@ function readFields(input) {
 function checkFields(input) {
   const reading = readFieldsAt(input, []);
   if (!reading.isRead) return { status: "invalid", problem: reading.problem };
-  const problem = firstUnknownCollection(reading.value, reading.value, []);
+  const problem = firstUnknownCollection(reading.value, reading.value, []) ?? firstMisplacedSlug(reading.value, []);
   return problem === void 0 ? { status: "read", fields: reading.value } : { status: "invalid", problem };
 }
 function readFieldsAt(input, path) {
@@ -922,6 +1085,7 @@ function readFieldOfKind(field) {
     case "toggle":
     case "url":
     case "time":
+    case "slug":
       return read({ kind, label });
     case "choice":
     case "choices":
@@ -1002,9 +1166,51 @@ function unknownCollectionIn(schema, field, path) {
     case "choices":
     case "url":
     case "time":
+    case "slug":
       return void 0;
   }
 }
+function firstMisplacedSlug(fields, path) {
+  for (const [name, field] of Object.entries(fields)) {
+    const problem = misplacedSlugIn(field, [...path, name]);
+    if (problem !== void 0) return problem;
+  }
+  return void 0;
+}
+function misplacedSlugIn(field, path) {
+  switch (field.kind) {
+    case "slug":
+      return { path, reason: "misplaced-slug" };
+    case "group":
+      return firstMisplacedSlug(field.fields, path);
+    case "collection":
+      return misplacedSlugInRecord(field.item, path);
+    case "text":
+    case "richText":
+    case "number":
+    case "date":
+    case "image":
+    case "link":
+    case "toggle":
+    case "choice":
+    case "choices":
+    case "url":
+    case "time":
+    case "reference":
+    case "references":
+      return void 0;
+  }
+}
+function misplacedSlugInRecord(item, path) {
+  const fields = Object.entries(item);
+  const slugNames = fields.filter(([, field]) => field.kind === "slug").map(([name]) => name);
+  const [, secondSlug] = slugNames;
+  if (secondSlug !== void 0) {
+    return { path: [...path, secondSlug], reason: "misplaced-slug" };
+  }
+  const otherFields = fields.filter(([, field]) => field.kind !== "slug");
+  return firstMisplacedSlug(Object.fromEntries(otherFields), path);
+}
 function referencesCollection(schema, field) {
   return collectionFieldAt(schema, field.collection) !== void 0;
 }
@@ -1031,6 +1237,7 @@ var FIELD_KINDS = {
   choices: true,
   url: true,
   time: true,
+  slug: true,
   reference: true,
   references: true,
   group: true,
@@ -1094,9 +1301,69 @@ function originOf(value) {
   return WEB_PROTOCOLS.has(url2.protocol) ? url2.origin : void 0;
 }
 
+// src/schema/record-pages.ts
+var RECORD_PLACEHOLDER = "[record]";
+var RECORD_PAGE_PATH = new RegExp(
+  `^(/${PAGE_SEGMENT})+/${escaped(RECORD_PLACEHOLDER)}$`,
+  "u"
+);
+var PAGE_PATH_SEPARATOR = "/";
+var NOT_FOUND = -1;
+function recordPages(schema, options) {
+  const collection2 = collectionFieldAt(schema, options.collection);
+  if (collection2 === void 0) {
+    throw new Error(
+      `@seamlet/astro: the schema has no collection "${options.collection}" for the pages at "${options.path}"`
+    );
+  }
+  const pathOf = (record) => {
+    const address = recordAddressOf(collection2, record);
+    return address === void 0 ? void 0 : recordPagePath(options.path, address);
+  };
+  return { ...options, pathOf };
+}
+function isRecordPagePath(path) {
+  return typeof path === "string" && RECORD_PAGE_PATH.test(path);
+}
+function recordAddressOf(collection2, record) {
+  const slugName = slugFieldOf(collection2.item);
+  const slug2 = slugName === void 0 ? void 0 : record[slugName];
+  if (typeof slug2 === "string" && isSlug(slug2)) return slug2;
+  const id = record[RECORD_ID_KEY];
+  return isRecordId(id) ? id : void 0;
+}
+function recordPagePath(pagePath, address) {
+  return pagePath.replace(RECORD_PLACEHOLDER, address);
+}
+function recordPageAt(pages, path) {
+  for (const page of pages) {
+    const address = addressUnder(page.path, path);
+    if (address !== void 0) return { page, address };
+  }
+  return void 0;
+}
+function recordAt(collection2, records, address) {
+  const pageIndex = records.findIndex(
+    (record2) => recordAddressOf(collection2, record2) === address
+  );
+  const index = pageIndex === NOT_FOUND ? records.findIndex((record2) => record2[RECORD_ID_KEY] === address) : pageIndex;
+  const record = records[index];
+  return record === void 0 ? void 0 : { record, index };
+}
+function addressUnder(recordPagePath2, path) {
+  const prefix = recordPagePath2.slice(0, -RECORD_PLACEHOLDER.length);
+  if (!path.startsWith(prefix)) return void 0;
+  const address = path.slice(prefix.length);
+  const isOneSegment = address !== "" && !address.includes(PAGE_PATH_SEPARATOR);
+  return isOneSegment ? address : void 0;
+}
+function escaped(text2) {
+  return text2.replace(/[[\]]/gu, "\\$&");
+}
+
 // src/schema/site-description.ts
 var SITE_DESCRIPTION_PATH = "/seamlet/site.json";
-var PAGE_PATH = /^(\/[a-z0-9][a-z0-9-]*)+$/u;
+var PAGE_PATH = new RegExp(`^(/${PAGE_SEGMENT})+$`, "u");
 var HOME_PAGE_PATH = "/";
 function readSiteDescription(input) {
   const reading = checkSiteDescription(input);
@@ -1113,13 +1380,18 @@ function checkSiteDescription(input) {
   }
   const initial = parseContent(schema.fields, input["initialContent"]);
   const pages = checkPages(schema.fields, input["pages"]);
+  const recordPages2 = checkRecordPages(schema.fields, input["recordPages"]);
   const problems = [
     ...nameProblems,
     ...initialContentProblems(initial.issues),
-    ...pages.problems
+    ...pages.problems,
+    ...recordPages2.problems,
+    ...placementProblems(pages.pages ?? [], recordPages2.pages ?? []),
+    ...addressProblems(schema.fields, initial.content, recordPages2.pages ?? [])
   ];
   const isNamed = isSiteId(id) && isText(title);
-  if (!isNamed || pages.pages === void 0 || problems.length > 0) {
+  const isWhole = pages.pages !== void 0 && recordPages2.pages !== void 0;
+  if (!isNamed || !isWhole || problems.length > 0) {
     return invalid(problems);
   }
   const description = {
@@ -1127,7 +1399,8 @@ function checkSiteDescription(input) {
     title,
     schema: schema.fields,
     initialContent: initial.content,
-    pages: pages.pages
+    pages: pages.pages,
+    ...recordPages2.pages.length === 0 ? {} : { recordPages: recordPages2.pages }
   };
   return { status: "read", description };
 }
@@ -1179,6 +1452,76 @@ function readPage(schema, input) {
   const isSearchTexts = typeof searchTexts === "string" && isSearchTextsGroup(schema, searchTexts);
   return isSearchTexts ? { path, title, searchTexts } : "invalid-search-texts";
 }
+function checkRecordPages(schema, input) {
+  if (input === void 0) return { pages: [], problems: [] };
+  if (!Array.isArray(input)) {
+    return { pages: void 0, problems: [{ code: "invalid-record-pages" }] };
+  }
+  const entries = input;
+  const readings = entries.map((entry) => readRecordPage(schema, entry));
+  const pageProblems = readings.flatMap(
+    (reading, index) => typeof reading === "string" ? [{ code: "invalid-record-page", index, reason: reading }] : []
+  );
+  const pages = readings.filter((reading) => typeof reading !== "string");
+  const problems = [...pageProblems, ...recordPageRepeats(pages)];
+  return { pages: problems.length === 0 ? pages : void 0, problems };
+}
+function recordPageRepeats(pages) {
+  const paths = pages.map((page) => page.path);
+  const collections = pages.map((page) => page.collection);
+  const repeatedPaths = paths.filter(
+    (path, index) => paths.indexOf(path) !== index
+  );
+  const repeatedCollections = collections.filter(
+    (collection2, index) => collections.indexOf(collection2) !== index
+  );
+  const pathProblems = [...new Set(repeatedPaths)].map(
+    (path) => ({ code: "repeated-page-path", path })
+  );
+  const collectionProblems = [...new Set(repeatedCollections)].map(
+    (collection2) => ({ code: "repeated-record-pages", collection: collection2 })
+  );
+  return [...pathProblems, ...collectionProblems];
+}
+function readRecordPage(schema, input) {
+  if (!isJsonObject(input)) return "not-a-page";
+  const { path, collection: collection2, searchTexts } = input;
+  if (!isRecordPagePath(path)) return "invalid-path";
+  if (typeof collection2 !== "string") return "unknown-collection";
+  const field = collectionFieldAt(schema, collection2);
+  if (field === void 0) return "unknown-collection";
+  if (searchTexts === void 0) return { path, collection: collection2 };
+  const isSearchTexts = typeof searchTexts === "string" && isSearchTextsGroup(field.item, searchTexts);
+  return isSearchTexts ? { path, collection: collection2, searchTexts } : "invalid-search-texts";
+}
+function placementProblems(pages, recordPages2) {
+  const misplaced = pages.filter(
+    (page) => recordPageAt(recordPages2, page.path) !== void 0
+  );
+  return misplaced.map(
+    (page) => ({ code: "page-among-record-pages", path: page.path })
+  );
+}
+function addressProblems(schema, initialContent, recordPages2) {
+  return recordPages2.flatMap((page) => {
+    const found = collectionAt(schema, initialContent, page.collection);
+    if (found === void 0) return [];
+    const addresses = found.records.map(
+      (record) => recordAddressOf(found.collection, record)
+    );
+    return addresses.flatMap(
+      (_, index) => recordAddressProblems(page.collection, addresses, index)
+    );
+  });
+}
+function recordAddressProblems(collection2, addresses, index) {
+  const address = addresses[index];
+  if (address === void 0) {
+    return [{ code: "record-without-address", collection: collection2, index }];
+  }
+  const isRepeated = addresses.indexOf(address) < index;
+  return isRepeated ? [{ code: "repeated-record-address", collection: collection2, address }] : [];
+}
 function isPagePath(path) {
   return typeof path === "string" && (path === HOME_PAGE_PATH || PAGE_PATH.test(path));
 }
@@ -1199,14 +1542,17 @@ export {
   choices,
   url,
   time,
+  slug,
   reference,
   references,
   group,
   collection,
   defaultValue,
   defaultContent,
+  FIELD_PATH_SEPARATOR,
   resolveFieldPath,
   isJsonObject,
+  isContentObject,
   linkTargetOf,
   safeHref,
   hrefOf,
@@ -1221,7 +1567,12 @@ export {
   newRecord,
   withRecordIds,
   collectionAt,
+  collectionFieldAt,
   findRecord,
+  slugFieldOf,
+  MAX_SLUG_LENGTH,
+  isSlug,
+  slugOf,
   formatFieldPath,
   countCharacters,
   parseContent,
@@ -1240,6 +1591,14 @@ export {
   SITE_CONFIG_FILE,
   isSiteId,
   readSiteConfig,
+  RECORD_PLACEHOLDER,
+  PAGE_PATH_SEPARATOR,
+  recordPages,
+  isRecordPagePath,
+  recordAddressOf,
+  recordPagePath,
+  recordPageAt,
+  recordAt,
   SITE_DESCRIPTION_PATH,
   HOME_PAGE_PATH,
   readSiteDescription,

package/dist/{chunk-SSECNMAD.js → chunk-PLNPM2D3.js}

@@ -6,7 +6,7 @@ import {
   readRichText,
   resolveFieldPath,
   safeHref
-} from "./chunk-ZS32CW5F.js";
+} from "./chunk-I3HOJE3S.js";
 
 // src/bridge/editor-shortcuts.ts
 function shortcutOf(event) {

package/dist/{chunk-QL4K4HR6.js → chunk-QXPXIMIM.js}

@@ -1,3 +1,16 @@
+import {
+  pagePathOf
+} from "./chunk-G6Z44LGA.js";
+import {
+  FIELD_PATH_SEPARATOR,
+  collectionAt,
+  isContentObject,
+  isRecordId,
+  newRecord,
+  recordAt,
+  recordPageAt
+} from "./chunk-I3HOJE3S.js";
+
 // src/preview-requests.ts
 var MAX_DRAFT_BYTES = 1024 * 1024;
 var BAD_REQUEST = 400;
@@ -22,6 +35,25 @@ async function readDraft(request) {
     return refused(BAD_REQUEST);
   }
 }
+function isPageAddress(description, rest) {
+  const path = pagePathOf(rest);
+  const isOwnPage = description.pages.some((page) => page.path === path);
+  const recordPage = recordPageAt(description.recordPages ?? [], path);
+  return isOwnPage || recordPage !== void 0;
+}
+function previewContentAt(description, content, rest) {
+  const recordPages = description.recordPages ?? [];
+  const found = recordPageAt(recordPages, pagePathOf(rest));
+  if (found === void 0 || !isRecordId(found.address)) return content;
+  const { collection: path } = found.page;
+  const records = collectionAt(description.schema, content, path);
+  if (records === void 0) return content;
+  const isPublished = recordAt(records.collection, records.records, found.address) !== void 0;
+  if (isPublished) return content;
+  const blank = newRecord(records.collection, found.address);
+  const names = path.split(FIELD_PATH_SEPARATOR);
+  return withRecordsAt(content, names, [...records.records, blank]);
+}
 function isUploadedPhoto(fileName) {
   return fileName !== void 0 && UPLOADED_PHOTO.test(fileName);
 }
@@ -51,6 +83,13 @@ function concatenated(chunks, size) {
   }
   return bytes;
 }
+function withRecordsAt(content, names, records) {
+  const [name, ...rest] = names;
+  if (name === void 0) return content;
+  if (rest.length === 0) return { ...content, [name]: records };
+  const group = content[name];
+  return isContentObject(group) ? { ...content, [name]: withRecordsAt(group, rest, records) } : content;
+}
 function refused(status) {
   return { isRead: false, response: new Response(null, { status }) };
 }
@@ -59,5 +98,7 @@ export {
   MAX_DRAFT_BYTES,
   previewHeadersOf,
   readDraft,
+  isPageAddress,
+  previewContentAt,
   isUploadedPhoto
 };

package/dist/cli.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
+import {
+  SITE_MODULE_FILE
+} from "./chunk-QCVWHHJC.js";
 import {
   SITE_CONFIG_FILE,
   isSiteId,
   readSiteConfig
-} from "./chunk-ZS32CW5F.js";
-import {
-  SITE_MODULE_FILE
-} from "./chunk-QCVWHHJC.js";
+} from "./chunk-I3HOJE3S.js";
 
 // src/cli.ts
 import process from "process";

package/dist/index.js

@@ -1,12 +1,6 @@
 import {
   OWN_PHOTOS_PATH
 } from "./chunk-W2LIOR2C.js";
-import {
-  SITE_CONFIG_FILE,
-  SITE_DESCRIPTION_PATH,
-  isJsonObject,
-  readSiteConfig
-} from "./chunk-ZS32CW5F.js";
 import {
   PREVIEW_PATH,
   SITE_MODULE_FILE,
@@ -14,7 +8,14 @@ import {
 } from "./chunk-QCVWHHJC.js";
 import {
   isUploadedPhoto
-} from "./chunk-QL4K4HR6.js";
+} from "./chunk-QXPXIMIM.js";
+import "./chunk-G6Z44LGA.js";
+import {
+  SITE_CONFIG_FILE,
+  SITE_DESCRIPTION_PATH,
+  isJsonObject,
+  readSiteConfig
+} from "./chunk-I3HOJE3S.js";
 
 // src/index.ts
 import process from "process";

package/dist/{messages-CvZhLRSE.d.ts → messages-Bqgs_mic.d.ts}

@@ -1,4 +1,4 @@
-import { R as RichText, F as Fields, a as Content, b as FieldPath } from './parse-content-Eg8yRq_t.js';
+import { R as RichText, F as Fields, C as Content, a as FieldPath } from './parse-content-IOJxgKLB.js';
 
 interface Box {
     readonly top: number;