create-mithaq 0.0.0-stage → 0.1.1

package/template/apps/asas-tanstack/src/components/mithaq/relationship-cell.tsx

@@ -0,0 +1,127 @@
+import { use, useEffect, useState, type ReactNode } from 'react'
+import type { ClientField, ClientKayan } from 'mithaq/admin'
+import { ScreenContext } from 'mithaq/admin/react'
+import type { CellProps } from './cells.tsx'
+import { isForbidden, listed, type FindApi } from './controls.tsx'
+import { findByIds, idsOf, nameOfRow, titleFieldOf } from './relationship-control.tsx'
+
+/**
+ * What the table knows about the rows its relationship columns point at, keyed by target and id.
+ * `null` is loading, a string is the row's title, `false` is a row the read did not answer for
+ * (the access answer), an `Error` is a failed read, and an absent key was never asked for.
+ */
+export type RelationshipTitles = ReadonlyMap<string, string | Record<string, unknown> | null | false | Error>
+
+export const titleKey = (target: string, id: string): string => `${target}:${id}`
+
+/** Where the same map holds the row itself, for a cell that draws more than a title. */
+export const rowKey = (target: string, id: string): string => `row:${target}:${id}`
+
+/** Every id one page points at, grouped by the kayan it points into and counted once each, so a page costs one read per target. */
+export const relationshipIdsOf = (
+  fields: readonly ClientField[],
+  docs: readonly Record<string, unknown>[],
+): ReadonlyMap<string, readonly string[]> => {
+  const byTarget = new Map<string, Set<string>>()
+  for (const field of fields) {
+    if ((field.kind !== 'relationship' && field.kind !== 'upload') || !field.relationTo) continue
+    const held = byTarget.get(field.relationTo) ?? new Set<string>()
+    for (const row of docs) for (const id of idsOf(row[field.name])) held.add(id)
+    if (held.size) byTarget.set(field.relationTo, held)
+  }
+  return new Map([...byTarget].map(([target, ids]) => [target, [...ids]]))
+}
+
+/**
+ * One read per target per page, keyed on the grouped ids so an unchanged page asks for nothing.
+ * Cells read as loading until the browser's effect answers; with no `api` or screen, ids settle
+ * as rows the viewer cannot see. No cell renders the raw id.
+ */
+export const useRelationshipTitles = ({
+  fields,
+  docs,
+  context = {},
+}: {
+  fields: readonly ClientField[]
+  docs: readonly Record<string, unknown>[]
+  context?: { api?: FindApi; client?: readonly ClientKayan[]; locale?: string }
+}): RelationshipTitles => {
+  const { api, client, locale } = context
+  const maxLimit = use(ScreenContext)?.screen.maxLimit
+  const groups = relationshipIdsOf(fields, docs)
+  const asked = JSON.stringify([...groups])
+  const [titles, setTitles] = useState<RelationshipTitles>(() => new Map())
+
+  useEffect(() => {
+    let live = true
+    const answers = new Map<string, string | Record<string, unknown> | null | false | Error>()
+    // A target with no reader or no known read cap settles as `false` now, rather than loading on a read that is never made.
+    for (const [target, ids] of groups) {
+      for (const id of ids) {
+        const asks = api?.[target] && maxLimit !== undefined ? null : false
+        answers.set(titleKey(target, id), asks)
+        answers.set(rowKey(target, id), asks)
+      }
+    }
+    if (!answers.size) return
+    setTitles(new Map(answers))
+    void Promise.all(
+      [...groups].map(async ([target, ids]) => {
+        const reads = api?.[target]
+        if (!reads || maxLimit === undefined) return
+        const kayan = client?.find((one) => one.name === target)
+        const title = titleFieldOf(kayan)
+        const kind = kayan?.fields.find((one) => one.name === title)?.kind
+        // A forbidden read is the same answer as a missing row; any other failure is held as its Error. Neither may reject: that would leave every cell loading.
+        const found = await findByIds({ reads, ids, maxLimit }).catch((thrown: unknown) => (isForbidden(thrown) ? [] : thrown instanceof Error ? thrown : new Error(String(thrown))))
+        if (found instanceof Error) {
+          for (const id of ids) {
+            answers.set(titleKey(target, id), found)
+            answers.set(rowKey(target, id), found)
+          }
+          return
+        }
+        const byId = new Map(found.map((row) => [String(row.id ?? ''), row]))
+        // An id the answer lacks is a row this actor may not read, so `false`, never left `null`.
+        for (const id of ids) {
+          const row = byId.get(id)
+          answers.set(titleKey(target, id), row ? nameOfRow({ row, title, locale, kind }) : false)
+          answers.set(rowKey(target, id), row ?? false)
+        }
+      }),
+    ).then(() => {
+      if (live) setTitles(new Map(answers))
+    })
+    return () => {
+      live = false
+    }
+    // `groups` is rebuilt every render; `asked` is its content.
+  }, [api, asked, locale])
+
+  return titles
+}
+
+const totalToShow = 3
+
+export function RelationshipCell({ field, locale, t, titles, value }: CellProps): ReactNode {
+  const target = field.relationTo ?? ''
+  const ids = idsOf(value)
+  if (!ids.length) return ''
+  const names = ids.slice(0, totalToShow).map((id) => {
+    const found = titles?.get(titleKey(target, id))
+    if (found === null || found === undefined) return t('admin.loading', 'Loading…') ?? 'Loading…'
+    if (found instanceof Error) return '—'
+    // A row not answered for reads as unseeable, never as the raw id the column holds.
+    return typeof found === 'string' ? found : (t('admin.cannotSee', 'You can\'t see this') ?? 'You can\'t see this')
+  })
+  const rest = ids.length - names.length
+  return (
+    <span>
+      {listed(names, locale)}
+      {rest > 0
+        ? ` ${(t('admin.andMore', 'and {count} more') ?? 'and {count} more').replace('{count}', String(rest))}`
+        : ''}
+    </span>
+  )
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 9f18a8922be32e3a3671aed05e4f723d7e31d040d0c9ca341418aeaf6ab15cc4

package/template/apps/asas-tanstack/src/components/mithaq/relationship-control.tsx

@@ -0,0 +1,400 @@
+import { createContext, use, useEffect, useRef, useState, type ReactElement, type ReactNode } from 'react'
+import type { ClientKayan } from 'mithaq/admin'
+import { ScreenContext } from 'mithaq/admin/react'
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from '@/components/ui/combobox'
+import { Spinner } from '@/components/ui/spinner'
+import { ariaRequired, changeOf, comboboxPhone, formatDate, isForbidden, type ControlProps, type FindApi } from './controls.tsx'
+
+/**
+ * A chip's remove button is 24 pixels and a phone's finger needs 44: its hit area is widened by an
+ * inset over the chip, which the box around it keeps at 22 pixels.
+ */
+const chipRemovePhone = 'max-sm:[&_[data-slot=combobox-chip-remove]]:relative max-sm:[&_[data-slot=combobox-chip-remove]]:after:absolute max-sm:[&_[data-slot=combobox-chip-remove]]:after:-inset-[11px]'
+
+/**
+ * What a row of the target is shown as, and what a search runs over. `??` rather than `||` because
+ * `useAsTitle` is either a field's name or absent, and `buildAsas` refuses a name that is not a field
+ * of the kayan.
+ */
+export const titleFieldOf = (target?: ClientKayan): string => target?.useAsTitle ?? 'id'
+
+/**
+ * Every row of `ids` the target answers for, `maxLimit` ids at a time, so a set past the cap is answered in full.
+ * `maxLimit` is the build's own, as the server refuses a limit past it rather than clamping.
+ */
+export const findByIds = async ({ reads, ids, maxLimit }: { reads: NonNullable<FindApi[string]>; ids: readonly string[]; maxLimit: number }) => {
+  const docs: Record<string, unknown>[] = []
+  for (let at = 0; at < ids.length; at += maxLimit) {
+    const piece = ids.slice(at, at + maxLimit)
+    docs.push(...(await reads.find({ where: { id: { in: piece } }, limit: piece.length })).docs)
+  }
+  return docs
+}
+
+/**
+ * Whether a term typed here can be turned into a condition at all: `like` takes text and email and
+ * nothing else, so a target whose title is its `id`, a uuid, offers a list to scroll and no search.
+ * Without this the first keystroke on such a picker is a 400.
+ */
+export const searchableTitle = (target: ClientKayan | undefined, title: string): boolean => {
+  const kind = target?.fields.find((field) => field.name === title)?.kind
+  return kind === 'text' || kind === 'email'
+}
+
+/**
+ * Whether the title is a localized field: one value per locale, which no sort can name and a `like`
+ * names by one locale, `name.ar`.
+ */
+export const localizedTitle = (target: ClientKayan | undefined, title: string): boolean =>
+  target?.fields.find((field) => field.name === title)?.rules.localized === true
+
+/**
+ * What one row of the target reads as: the title field's value, and the row's own id where the target
+ * declares no title or the read masked the column.
+ */
+export const nameOfRow = ({ row, title, locale, kind }: { row: Record<string, unknown>; title: string; locale?: string; kind?: string }): string => {
+  const held = row[title]
+  // A localized title is read in the viewer's locale and in no other: a row short of that locale shows
+  // its id, never another locale's words. A date is drawn in the format its column draws it in rather
+  // than as the wire's ISO string.
+  const shown = held !== null && typeof held === 'object' && !(held instanceof Date) ? (held as Record<string, unknown>)[locale ?? ''] : held
+  if (shown === null || shown === undefined || shown === '') return String(row.id ?? '')
+  const date = kind === 'datetime' || kind === 'date' ? formatDate({ value: shown, locale: locale ?? '', day: kind === 'date' }) : undefined
+  return date ?? String(shown)
+}
+
+/**
+ * How a project names a picker's rows beyond their title: a hook, given the target kayan's name and the rows held,
+ * that returns a namer or `undefined` to keep the title. A hook because the name may need a read of its own.
+ */
+export type UseRowLabel = (target: string, rows: readonly Record<string, unknown>[]) => ((row: Record<string, unknown>) => string | undefined) | undefined
+export const RowLabelContext = createContext<UseRowLabel>(() => undefined)
+
+/** How many rows one page of the picker holds. */
+const perPage = 10
+
+/**
+ * The ids one value holds: none, the one a many-to-one field carries, or the set a `hasMany` field
+ * carries, in the order the store answered with.
+ */
+export const idsOf = (value: unknown): readonly string[] =>
+  value === null || value === undefined ? [] : Array.isArray(value) ? value.map(String) : [String(value)]
+
+/** One row of the target as the combobox's own item: base-ui reads a label off the shape `{ value, label }` without being told how. */
+type Option = { value: string; label: string }
+
+/**
+ * The picker, and what each row of its list is drawn as beside its title where the caller draws more
+ * than the title, such as the upload control's thumbnail.
+ */
+export function RelationshipControl(props: ControlProps & { drawRow?: (row: Record<string, unknown>, label: string) => ReactNode }): ReactElement {
+  const { api, client, describedBy, drawRow, error, field, id, locale, placeholder, readOnly, t, value } = props
+  const change = changeOf(props)
+  const target = client?.find((one) => one.name === field.relationTo)
+  const title = titleFieldOf(target)
+  const searchable = searchableTitle(target, title)
+  const localized = localizedTitle(target, title)
+  const reads = target && api ? api[target.name] : undefined
+  // The most rows one read asks for: the build's `maxLimit`, off the screen. A form drawn with no
+  // screen has no such number, so it holds to the picker's own page of ten.
+  const most = use(ScreenContext)?.screen.maxLimit ?? perPage
+  /** Every id this field is holding, which is at most one unless the field said otherwise. */
+  const held = idsOf(value)
+  const many = field.hasMany === true
+
+  const [open, setOpen] = useState(false)
+  const [term, setTerm] = useState('')
+  /** The term a query has been run for, which is the typed one 300 ms later. */
+  const [searched, setSearched] = useState('')
+  const [rows, setRows] = useState<readonly Record<string, unknown>[]>([])
+  /** The page a scroll to the bottom loads next, off the answer's own `nextPage`. */
+  const [next, setNext] = useState<number | null>(null)
+  const [loading, setLoading] = useState(false)
+  /**
+   * Whether the last page read came back refused rather than empty, so the list does not say "no rows
+   * match this filter" for a target this actor may not read at all.
+   */
+  const [refused, setRefused] = useState(false)
+  /**
+   * The chosen rows by id: one picked off a page needs no read, one the field was seeded with is read once.
+   * A map, since a `hasMany` field holds a set and a many-to-one field a set of one.
+   */
+  const [chosen, setChosen] = useState<ReadonlyMap<string, Record<string, unknown>>>(() => new Map())
+
+  /**
+   * What the popup is anchored on where the box is a chip list: the list itself and not the input
+   * inside it, which shrinks to the width the typed term needs, so a listbox that followed it would
+   * hang off the middle of the field.
+   */
+  const chipsRef = useRef<HTMLDivElement | null>(null)
+
+  /**
+   * Held ids the read settled without a row: `unseen` when refused or left out (as is every id of a target the screen
+   * does not cross), `failed` on a 500 or lost network, which says nothing about access.
+   */
+  const [settled, setSettled] = useState<ReadonlyMap<string, 'unseen' | 'failed'>>(() => new Map())
+
+  const titleKind = target?.fields.find((one) => one.name === title)?.kind
+  const named = use(RowLabelContext)(field.relationTo ?? '', [...rows, ...chosen.values()])
+  const nameOf = (row: Record<string, unknown>) => named?.(row) ?? nameOfRow({ row, title, locale, kind: titleKind })
+  const rowOf = (held: string) => chosen.get(held) ?? rows.find((one) => String(one.id ?? '') === held)
+  const stateOf = (held: string) => (reads ? settled.get(held) : 'unseen')
+  /**
+   * What one held id reads as: the row's own title where something named it, a row this viewer cannot
+   * see where the read settled without it, a dash where the read failed, and loading until then. Never
+   * the raw id, which reads as data and is none of the viewer's.
+   */
+  const labelOf = (held: string) => {
+    const row = rowOf(held)
+    if (row) return nameOf(row)
+    const state = stateOf(held)
+    if (state === 'failed') return '—'
+    return state === 'unseen'
+      ? (t('admin.cannotSee', 'You can\'t see this') ?? 'You can\'t see this')
+      : (t('admin.loading', 'Loading…') ?? 'Loading…')
+  }
+  /**
+   * A set whose every row the viewer cannot see says so once, in place of one chip for each. The chips
+   * are not drawn but are still the field's value, so `pick` refuses a shorter set while this holds:
+   * a row can be added, never taken off.
+   */
+  const allRefused = many && held.length > 0 && held.every((one) => !rowOf(one) && stateOf(one) === 'unseen')
+
+  /**
+   * One page of the target, which is the whole query. The `not_in` keeps every chosen row out of the
+   * list; an empty list of ids is no special case, because the store writes `not_in []` as `true`.
+   */
+  const queryFor = (page: number, search: string) => ({
+    limit: Math.min(perPage, most),
+    page,
+    ...(!localized && { sort: title }),
+    where: {
+      id: { not_in: held },
+      ...(searchable && search ? { [localized ? `${title}.${locale}` : title]: { like: search } } : {}),
+    },
+  })
+  /**
+   * The ids the query above is keyed on, as one string: `held` is rebuilt on every render, so an effect
+   * watching the array would read every page again on every keystroke.
+   */
+  const excluded = held.join(',')
+
+  useEffect(() => {
+    if (term === searched) return
+    const timer = setTimeout(() => setSearched(term), 300)
+    return () => clearTimeout(timer)
+  }, [searched, term])
+
+  // Page one, on open and on every term the debounce settles.
+  useEffect(() => {
+    if (!open || !reads) return
+    let live = true
+    setLoading(true)
+    void reads
+      .find(queryFor(1, searched))
+      .then((found) => {
+        if (!live) return
+        setRefused(false)
+        setRows(found.docs)
+        setNext(found.hasNextPage ? found.nextPage : null)
+      })
+      // A read the server refuses leaves the list as it was rather than rejecting into nothing, and
+      // the list says it was refused rather than that nothing matched.
+      .catch(() => {
+        if (live) setRefused(true)
+      })
+      .finally(() => {
+        if (live) setLoading(false)
+      })
+    return () => {
+      live = false
+    }
+  }, [excluded, locale, open, reads, searched, title])
+
+  /**
+   * The chosen rows, for every id the option list does not already hold: one read, in pieces the read
+   * cap admits (`findByIds`). A row picked off a page is never asked for, as picking it puts the row
+   * in `chosen`.
+   */
+  const asked = useRef(new Set<string>())
+  useEffect(() => {
+    if (!reads) return
+    // Once per id, whatever the answer: an id the target does not answer for would otherwise be asked
+    // for again on every page the list loads, as the loaded rows are watched.
+    const missing = held.filter(
+      (one) => !chosen.has(one) && !rows.some((row) => String(row.id ?? '') === one) && !asked.current.has(one),
+    )
+    if (!missing.length) return
+    for (const one of missing) asked.current.add(one)
+    // No cleanup drops the answer: each id is asked for once, so an answer dropped because the effect
+    // ran again would never be asked for again, and the box would show the id for good.
+    void findByIds({ reads, ids: missing, maxLimit: most })
+      .then((docs) => {
+        const found = new Set(docs.map((row) => String(row.id ?? '')))
+        setSettled((already) => new Map([...already, ...missing.filter((one) => !found.has(one)).map((one) => [one, 'unseen'] as const)]))
+        if (!docs.length) return
+        setChosen((already) => new Map([...already, ...docs.map((row) => [String(row.id ?? ''), row] as const)]))
+      })
+      // A refusal is the same answer as a row not returned: the viewer cannot see it. A failure says
+      // only that the read did not answer.
+      .catch((thrown: unknown) => {
+        const state = isForbidden(thrown) ? 'unseen' : 'failed'
+        setSettled((already) => new Map([...already, ...missing.map((one) => [one, state] as const)]))
+      })
+  }, [chosen, excluded, reads, rows])
+
+  const selected = held.map((one) => ({ value: one, label: labelOf(one) }))
+  const searchLabel = t('admin.search', 'Search') ?? 'Search'
+  const options: Option[] = rows.map((row) => ({ value: String(row.id ?? ''), label: nameOf(row) }))
+
+  /**
+   * What a pick reports. Picked rows are remembered, so hydration does not re-ask for names the list showed.
+   * A `hasMany` field reports an array, never `null`: a `[]` seed against `null` would read as a change forever.
+   */
+  const pick = (next: readonly Option[]) => {
+    // A set drawn as one note cannot be shortened: Backspace in the empty box takes the last chip off,
+    // and it would drop an id nobody sees.
+    if (allRefused && next.length < held.length) return
+    const picked = next.flatMap((one) => {
+      const row = rows.find((each) => String(each.id ?? '') === one.value)
+      return row ? [[one.value, row] as const] : []
+    })
+    if (picked.length) setChosen((already) => new Map([...already, ...picked]))
+    setTerm('')
+    const ids = next.map((one) => one.value)
+    change(many ? ids : (ids[0] ?? null))
+  }
+
+  /**
+   * Everything both boxes hand the root, written once. `filter={null}` because the filtering is the
+   * target kayan's `find` and not a pass over the page; `items` is the page as it arrived.
+   */
+  const root = {
+    items: options,
+    filter: null,
+    // The first row is highlighted as the list opens, so Enter picks a row rather than nothing. The
+    // cast: base-ui's root types `autoHighlight` as a boolean while the combobox behind it reads
+    // `'always'`, and `true` alone highlights nothing until a term is typed.
+    autoHighlight: 'always' as unknown as boolean,
+    open,
+    onOpenChange: setOpen,
+    disabled: readOnly,
+    // The items are objects, so equal ids in two objects have to be told to match: the default is `Object.is`.
+    isItemEqualToValue: (one: Option, other: Option) => one.value === other.value,
+    // The typed term alone. base-ui writes the selected row's label into the input when the selection
+    // changes and when the list opens, and each of those calls this too; taking them as a search term
+    // would read the target for a name it is already showing.
+    onInputValueChange: (next: string, details: { reason: string }) =>
+      details.reason === 'input-change' && setTerm(next),
+  }
+
+  /** The listbox, which is the same page of rows whichever box is above it. */
+  const list = (
+    <ComboboxContent anchor={many ? chipsRef : undefined}>
+      <ComboboxList
+        onScroll={(event) => {
+          const list = event.currentTarget
+          if (loading || next === null || !reads) return
+          if (list.scrollTop + list.clientHeight < list.scrollHeight - 8) return
+          const page = next
+          setLoading(true)
+          void reads
+            .find(queryFor(page, searched))
+            .then((found) => {
+              setRows((already) => [...already, ...found.docs])
+              setNext(found.hasNextPage ? found.nextPage : null)
+            })
+            .catch(() => {})
+            .finally(() => setLoading(false))
+        }}
+      >
+        {options.map((option) => {
+          const row = drawRow && rows.find((one) => String(one.id ?? '') === option.value)
+          return (
+            <ComboboxItem key={option.value} value={option}>
+              {row ? drawRow(row, option.label) : option.label}
+            </ComboboxItem>
+          )
+        })}
+      </ComboboxList>
+      {loading ? (
+        <p className="flex items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground">
+          <Spinner />
+          {t('admin.loading', 'Loading…') ?? 'Loading…'}
+        </p>
+      ) : null}
+      {!loading && rows.length === 0 ? (
+        <p className="px-3 py-1.5 text-sm text-muted-foreground">
+          {refused
+            ? (t('admin.refused', 'That list could not be read.') ?? 'That list could not be read.')
+            : (t('admin.noMatches', 'No rows match this filter.') ?? 'No rows match this filter.')}
+        </p>
+      ) : null}
+    </ComboboxContent>
+  )
+
+  // A set: one chip per chosen row, rendered in the order `value` holds because base-ui removes a
+  // chip by its position among them.
+  if (many) {
+    return (
+      <Combobox {...root} multiple value={selected} onValueChange={pick}>
+        <ComboboxChips ref={chipsRef} aria-invalid={error ? true : undefined}>
+          {allRefused ? (
+            <span className="text-muted-foreground px-1 text-sm">{selected[0]!.label}</span>
+          ) : selected.map((one) => (
+            <ComboboxChip key={one.value} className={chipRemovePhone} removeLabel={t('admin.remove', 'Remove')} showRemove={!readOnly}>
+              {one.label}
+            </ComboboxChip>
+          ))}
+          <ComboboxChipsInput
+            id={id}
+            // A hint is for an empty box: beside a chip it reads as a value nobody chose, so the box keeps
+            // its name in `aria-label` and says nothing once a row is held.
+            placeholder={selected.length ? undefined : (placeholder ?? searchLabel)}
+            disabled={readOnly}
+            readOnly={!searchable}
+            aria-label={searchLabel}
+            aria-describedby={describedBy}
+            aria-invalid={error ? true : undefined}
+            aria-required={ariaRequired(field)}
+          />
+        </ComboboxChips>
+        {list}
+      </Combobox>
+    )
+  }
+
+  return (
+    // The keyboard model (roles, aria wiring, arrows, Enter, Escape) is base-ui's, so none is here.
+    <Combobox {...root} value={selected[0] ?? null} onValueChange={(next) => pick(next ? [next] : [])}>
+      <ComboboxInput
+        id={id}
+        className={comboboxPhone}
+        placeholder={placeholder ?? searchLabel}
+        disabled={readOnly}
+        // A target whose title cannot take `like` offers a list and no search, so the box takes no term
+        // and still takes the focus, the arrows and Enter.
+        readOnly={!searchable}
+        aria-label={searchLabel}
+        aria-describedby={describedBy}
+        aria-invalid={error ? true : undefined}
+        aria-required={ariaRequired(field)}
+        // The two icon-only buttons of the addon are named here because base-ui names neither.
+        clearLabel={t('admin.clear', 'Clear')}
+        triggerLabel={t('admin.showOptions', 'Show options')}
+        showClear={held.length > 0 && !readOnly}
+      />
+      {list}
+    </Combobox>
+  )
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 379037afe9749f23307c507f39a782a9fa4e232e83f63894be6f9aef24f76cb5

package/template/apps/asas-tanstack/src/components/mithaq/rich-text-nodes.ts

@@ -0,0 +1,6 @@
+export { defaultNodes } from 'mithaq/rich-text'
+
+// A project's own list spreads this, in a file both the editor and the server import:
+//
+//   export const richTextNodes = [...defaultNodes, CalloutNode]
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 12555780fdbc7bc6b283e1c56c498b12265f7c417359a0d4eff71d8207bdb3cd