jazz-vue 0.11.5 → 0.11.6

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> jazz-vue@0.11.5 build /home/runner/_work/jazz/jazz/packages/jazz-vue
+> jazz-vue@0.11.6 build /home/runner/_work/jazz/jazz/packages/jazz-vue
 > rm -rf ./dist && vite build
 
 vite v6.0.11 building for production...
@@ -11,7 +11,7 @@ rendering chunks...
 computing gzip size...
 dist/testing.js             1.19 kB │ gzip: 0.52 kB │ map:  1.70 kB
 dist/provider-CkA-a4Og.js   2.32 kB │ gzip: 0.81 kB │ map:  4.54 kB
-dist/index.js              13.97 kB │ gzip: 3.54 kB │ map: 22.38 kB
-[vite:dts] Declaration files built in 4380ms.
+dist/index.js              14.03 kB │ gzip: 3.55 kB │ map: 22.48 kB
+[vite:dts] Declaration files built in 5383ms.
 
-✓ built in 4.50s
+✓ built in 5.52s

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # jazz-react
 
+## 0.11.6
+
+### Patch Changes
+
+- e7c85b7: Add targetWidth to highestResAvailable to add a way to fetch the next size up
+- Updated dependencies [e7c85b7]
+- Updated dependencies [8ed144e]
+  - jazz-tools@0.11.6
+  - cojson@0.11.6
+  - jazz-browser@0.11.6
+
 ## 0.11.5
 
 ### Patch Changes

package/dist/index.js

@@ -363,7 +363,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     maxWidth: {}
   },
   setup(__props) {
-    function useProgressiveImg(image, maxWidth) {
+    function useProgressiveImg(image, maxWidth, targetWidth) {
       const current2 = ref({});
       let cleanup;
       const unsubscribe = watch(
@@ -376,7 +376,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!image.value) return;
           const unsub = image.value.subscribe({}, (update) => {
             var _a, _b;
-            const highestRes = update == null ? void 0 : update.highestResAvailable({ maxWidth });
+            const highestRes = update == null ? void 0 : update.highestResAvailable({
+              maxWidth,
+              targetWidth
+            });
             if (highestRes) {
               if (highestRes.res !== lastHighestRes) {
                 lastHighestRes = highestRes.res;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n  Account,\n  AnonymousJazzAgent,\n  AuthSecretStorage,\n  CoValue,\n  CoValueClass,\n  DeeplyLoaded,\n  DepthsIn,\n  ID,\n  JazzAuthContext,\n  JazzContextType,\n  JazzGuestContext,\n  subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  ComputedRef,\n  MaybeRef,\n  Ref,\n  ShallowRef,\n  computed,\n  inject,\n  onMounted,\n  onUnmounted,\n  ref,\n  shallowRef,\n  toRaw,\n  unref,\n  watch,\n} from \"vue\";\nimport {\n  JazzAuthContextSymbol,\n  JazzContextSymbol,\n  RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext() {\n  const context =\n    inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n  if (!context?.value) {\n    throw new Error(\"useJazzContext must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function useAuthSecretStorage() {\n  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n  if (!context) {\n    throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function createUseAccountComposables<Acc extends Account>() {\n  function useAccount(): {\n    me: ComputedRef<Acc>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccount must be used within a JazzProvider\");\n    }\n\n    if (!(\"me\" in context.value)) {\n      throw new Error(\n        \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n      );\n    }\n\n    const contextMe = context.value.me as Acc;\n\n    const me = useCoState<Acc, D>(\n      contextMe.constructor as CoValueClass<Acc>,\n      contextMe.id,\n      depth,\n    );\n\n    return {\n      me: computed(() => {\n        const value =\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value;\n\n        return value ? toRaw(value) : value;\n      }),\n      logOut: context.value.logOut,\n    };\n  }\n\n  function useAccountOrGuest(): {\n    me: ComputedRef<Acc | AnonymousJazzAgent>;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<\n      DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<\n      Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n    }\n\n    const contextMe = computed(() =>\n      \"me\" in context.value ? (context.value.me as Acc) : undefined,\n    );\n\n    const me = useCoState<Acc, D>(\n      contextMe.value?.constructor as CoValueClass<Acc>,\n      contextMe.value?.id,\n      depth,\n    );\n\n    if (\"me\" in context.value) {\n      return {\n        me: computed(() =>\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value,\n        ),\n      };\n    } else {\n      return {\n        me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n      };\n    }\n  }\n\n  return {\n    useAccount,\n    useAccountOrGuest,\n  };\n}\n\nconst { useAccount, useAccountOrGuest } =\n  createUseAccountComposables<RegisteredAccount>();\n\nexport { useAccount, useAccountOrGuest };\n\nexport function useCoState<V extends CoValue, D>(\n  Schema: CoValueClass<V>,\n  id: MaybeRef<ID<CoValue> | undefined>,\n  depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,\n): Ref<DeeplyLoaded<V, D> | undefined | null> {\n  const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =\n    shallowRef(undefined);\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useCoState must be used within a JazzProvider\");\n  }\n\n  let unsubscribe: (() => void) | undefined;\n\n  watch(\n    [() => unref(id), () => context, () => Schema, () => depth],\n    () => {\n      if (unsubscribe) unsubscribe();\n\n      const idValue = unref(id);\n      if (!idValue) return;\n\n      unsubscribe = subscribeToCoValue(\n        Schema,\n        idValue,\n        \"me\" in context.value\n          ? toRaw(context.value.me)\n          : toRaw(context.value.guest),\n        depth,\n        (value) => {\n          state.value = value;\n        },\n        () => {\n          state.value = null;\n        },\n        true,\n      );\n    },\n    { deep: true, immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (unsubscribe) unsubscribe();\n  });\n\n  const computedState = computed(() => state.value);\n\n  return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n  invitedObjectSchema,\n  onAccept,\n  forValueHint,\n}: {\n  invitedObjectSchema: CoValueClass<V>;\n  onAccept: (projectID: ID<V>) => void;\n  forValueHint?: string;\n}): void {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n  }\n\n  if (!(\"me\" in context.value)) {\n    throw new Error(\n      \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n    );\n  }\n\n  const runInviteAcceptance = () => {\n    const result = consumeInviteLinkFromWindowLocation({\n      as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n      invitedObjectSchema,\n      forValueHint,\n    });\n\n    result\n      .then((res) => res && onAccept(res.valueID))\n      .catch((e) => {\n        console.error(\"Failed to accept invite\", e);\n      });\n  };\n\n  onMounted(() => {\n    runInviteAcceptance();\n  });\n\n  watch(\n    () => onAccept,\n    (newOnAccept, oldOnAccept) => {\n      if (newOnAccept !== oldOnAccept) {\n        runInviteAcceptance();\n      }\n    },\n  );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n  const handleUpdate = () => {\n    isAuthenticated.value = authSecretStorage.isAuthenticated;\n  };\n\n  onMounted(() => {\n    const cleanup = authSecretStorage.onUpdate(handleUpdate);\n    onUnmounted(cleanup);\n  });\n\n  return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Demo auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(\n    () => new DemoAuth(context.value.authenticate, authSecretStorage),\n  );\n\n  const existingUsers = ref<string[]>([]);\n  const isAuthenticated = useIsAuthenticated();\n\n  watch(authMethod, () => {\n    authMethod.value.getExistingUsers().then((users) => {\n      existingUsers.value = users;\n    });\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn(username: string) {\n      authMethod.value.logIn(username);\n    },\n    signUp(username: string) {\n      authMethod.value.signUp(username);\n    },\n    existingUsers: existingUsers.value,\n  }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n  wordlist,\n}: {\n  wordlist: string[];\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passphrase auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new PassphraseAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      context.value.register,\n      authSecretStorage,\n      wordlist,\n    );\n  });\n\n  const passphrase = ref(authMethod.value.passphrase);\n\n  watchEffect((onCleanup) => {\n    authMethod.value.loadCurrentAccountPassphrase();\n\n    const unsubscribe = authMethod.value.subscribe(() => {\n      passphrase.value = authMethod.value.passphrase;\n    });\n\n    onCleanup(unsubscribe);\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n    registerNewAccount: authMethod.value.registerNewAccount,\n    generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n    passphrase: passphrase.value,\n  }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n  appName,\n  appHostname,\n}: {\n  appName: string;\n  appHostname?: string;\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passkey auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new BrowserPasskeyAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      authSecretStorage,\n      appName,\n      appHostname,\n    );\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n  }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n  appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    : false;\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n  <slot v-if=\"auth.state === 'signedIn'\" />\n  <div\n    v-else\n    :style=\"{\n      minHeight: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      width: '18rem',\n      maxWidth: 'calc(100vw - 2rem)',\n      gap: '2rem',\n      margin: '0 auto'\n    }\"\n  >\n    <h1\n      :style=\"{\n        color: darkMode ? '#fff' : '#000',\n        textAlign: 'center',\n        fontSize: '1.5rem',\n        fontWeight: 'bold'\n      }\"\n    >\n      {{ appName }}\n    </h1>\n\n    <form\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n      @submit=\"handleSubmit\"\n    >\n      <input\n        v-model=\"username\"\n        placeholder=\"Display name\"\n        autocomplete=\"webauthn\"\n        :style=\"{\n          border: darkMode ? '1px solid #444' : '1px solid #ddd',\n          padding: '11px 8px',\n          borderRadius: '6px',\n          background: darkMode ? '#000' : '#fff',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n      <input\n        type=\"submit\"\n        value=\"Sign up\"\n        :style=\"{\n          padding: '13px 5px',\n          border: 'none',\n          borderRadius: '6px',\n          cursor: 'pointer',\n          background: darkMode ? '#444' : '#ddd',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n    </form>\n\n    <div\n      v-if=\"auth.existingUsers.length > 0\"\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n    >\n      <p\n        :style=\"{\n          color: darkMode ? '#e2e2e2' : '#000',\n          textAlign: 'center',\n          paddingTop: '0.5rem',\n          borderTop: '1px solid',\n          borderColor: darkMode ? '#111' : '#e2e2e2'\n        }\"\n      >\n        Log in as\n      </p>\n      <button\n        v-for=\"user in auth.existingUsers\"\n        :key=\"user\"\n        @click=\"auth.logIn(user)\"\n        type=\"button\"\n        :aria-label=\"`Log in as ${user}`\"\n        :style=\"{\n          background: darkMode ? '#0d0d0d' : '#eee',\n          color: darkMode ? '#fff' : '#000',\n          padding: '0.5rem',\n          border: 'none',\n          borderRadius: '6px'\n        }\"\n      >\n        {{ user }}\n      </button>\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n  src?: string;\n  res?: `${number}x${number}` | \"placeholder\";\n  originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n  image: Ref<ImageDefinition | null | undefined>,\n  maxWidth?: number,\n) {\n  const current = ref<ImageState>({});\n\n  let cleanup: (() => void) | undefined;\n  const unsubscribe = watch(\n    () => [image.value?.id, maxWidth],\n    () => {\n      let lastHighestRes: string | undefined;\n\n      if (!image.value) return;\n\n      const unsub = image.value.subscribe({}, (update) => {\n        const highestRes = update?.highestResAvailable({ maxWidth });\n\n        if (highestRes) {\n          if (highestRes.res !== lastHighestRes) {\n            lastHighestRes = highestRes.res;\n            const blob = highestRes.stream.toBlob();\n\n            if (blob) {\n              const blobURI = URL.createObjectURL(blob);\n              current.value = {\n                src: blobURI,\n                res: highestRes.res,\n                originalSize: image.value?.originalSize,\n              };\n\n              if (cleanup) cleanup();\n              cleanup = () => {\n                setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n              };\n            }\n          }\n        } else {\n          current.value = {\n            src: update?.placeholderDataURL,\n            res: \"placeholder\",\n            originalSize: image.value?.originalSize,\n          };\n        }\n      });\n\n      return unsub;\n    },\n  );\n\n  onUnmounted(() => {\n    unsubscribe();\n    if (cleanup) cleanup();\n  });\n\n  return current;\n}\n\nconst props = defineProps<{\n  image: ImageDefinition | null | undefined;\n  maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n  <slot\n    :src=\"current.src\"\n    :res=\"current.res\"\n    :original-size=\"current.originalSize\"\n  />\n</template>"],"names":["useAccount","useAccountOrGuest","current"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n  Account,\n  AnonymousJazzAgent,\n  AuthSecretStorage,\n  CoValue,\n  CoValueClass,\n  DeeplyLoaded,\n  DepthsIn,\n  ID,\n  JazzAuthContext,\n  JazzContextType,\n  JazzGuestContext,\n  subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  ComputedRef,\n  MaybeRef,\n  Ref,\n  ShallowRef,\n  computed,\n  inject,\n  onMounted,\n  onUnmounted,\n  ref,\n  shallowRef,\n  toRaw,\n  unref,\n  watch,\n} from \"vue\";\nimport {\n  JazzAuthContextSymbol,\n  JazzContextSymbol,\n  RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext() {\n  const context =\n    inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n  if (!context?.value) {\n    throw new Error(\"useJazzContext must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function useAuthSecretStorage() {\n  const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n  if (!context) {\n    throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n  }\n  return context;\n}\n\nexport function createUseAccountComposables<Acc extends Account>() {\n  function useAccount(): {\n    me: ComputedRef<Acc>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  };\n  function useAccount<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;\n    logOut: () => void;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccount must be used within a JazzProvider\");\n    }\n\n    if (!(\"me\" in context.value)) {\n      throw new Error(\n        \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n      );\n    }\n\n    const contextMe = context.value.me as Acc;\n\n    const me = useCoState<Acc, D>(\n      contextMe.constructor as CoValueClass<Acc>,\n      contextMe.id,\n      depth,\n    );\n\n    return {\n      me: computed(() => {\n        const value =\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value;\n\n        return value ? toRaw(value) : value;\n      }),\n      logOut: context.value.logOut,\n    };\n  }\n\n  function useAccountOrGuest(): {\n    me: ComputedRef<Acc | AnonymousJazzAgent>;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth: D,\n  ): {\n    me: ComputedRef<\n      DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  };\n  function useAccountOrGuest<D extends DepthsIn<Acc>>(\n    depth?: D,\n  ): {\n    me: ComputedRef<\n      Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n    >;\n  } {\n    const context = useJazzContext();\n\n    if (!context.value) {\n      throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n    }\n\n    const contextMe = computed(() =>\n      \"me\" in context.value ? (context.value.me as Acc) : undefined,\n    );\n\n    const me = useCoState<Acc, D>(\n      contextMe.value?.constructor as CoValueClass<Acc>,\n      contextMe.value?.id,\n      depth,\n    );\n\n    if (\"me\" in context.value) {\n      return {\n        me: computed(() =>\n          depth === undefined\n            ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n            : me.value,\n        ),\n      };\n    } else {\n      return {\n        me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n      };\n    }\n  }\n\n  return {\n    useAccount,\n    useAccountOrGuest,\n  };\n}\n\nconst { useAccount, useAccountOrGuest } =\n  createUseAccountComposables<RegisteredAccount>();\n\nexport { useAccount, useAccountOrGuest };\n\nexport function useCoState<V extends CoValue, D>(\n  Schema: CoValueClass<V>,\n  id: MaybeRef<ID<CoValue> | undefined>,\n  depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,\n): Ref<DeeplyLoaded<V, D> | undefined | null> {\n  const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =\n    shallowRef(undefined);\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useCoState must be used within a JazzProvider\");\n  }\n\n  let unsubscribe: (() => void) | undefined;\n\n  watch(\n    [() => unref(id), () => context, () => Schema, () => depth],\n    () => {\n      if (unsubscribe) unsubscribe();\n\n      const idValue = unref(id);\n      if (!idValue) return;\n\n      unsubscribe = subscribeToCoValue(\n        Schema,\n        idValue,\n        \"me\" in context.value\n          ? toRaw(context.value.me)\n          : toRaw(context.value.guest),\n        depth,\n        (value) => {\n          state.value = value;\n        },\n        () => {\n          state.value = null;\n        },\n        true,\n      );\n    },\n    { deep: true, immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (unsubscribe) unsubscribe();\n  });\n\n  const computedState = computed(() => state.value);\n\n  return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n  invitedObjectSchema,\n  onAccept,\n  forValueHint,\n}: {\n  invitedObjectSchema: CoValueClass<V>;\n  onAccept: (projectID: ID<V>) => void;\n  forValueHint?: string;\n}): void {\n  const context = useJazzContext();\n\n  if (!context.value) {\n    throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n  }\n\n  if (!(\"me\" in context.value)) {\n    throw new Error(\n      \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n    );\n  }\n\n  const runInviteAcceptance = () => {\n    const result = consumeInviteLinkFromWindowLocation({\n      as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n      invitedObjectSchema,\n      forValueHint,\n    });\n\n    result\n      .then((res) => res && onAccept(res.valueID))\n      .catch((e) => {\n        console.error(\"Failed to accept invite\", e);\n      });\n  };\n\n  onMounted(() => {\n    runInviteAcceptance();\n  });\n\n  watch(\n    () => onAccept,\n    (newOnAccept, oldOnAccept) => {\n      if (newOnAccept !== oldOnAccept) {\n        runInviteAcceptance();\n      }\n    },\n  );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n  const handleUpdate = () => {\n    isAuthenticated.value = authSecretStorage.isAuthenticated;\n  };\n\n  onMounted(() => {\n    const cleanup = authSecretStorage.onUpdate(handleUpdate);\n    onUnmounted(cleanup);\n  });\n\n  return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Demo auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(\n    () => new DemoAuth(context.value.authenticate, authSecretStorage),\n  );\n\n  const existingUsers = ref<string[]>([]);\n  const isAuthenticated = useIsAuthenticated();\n\n  watch(authMethod, () => {\n    authMethod.value.getExistingUsers().then((users) => {\n      existingUsers.value = users;\n    });\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn(username: string) {\n      authMethod.value.logIn(username);\n    },\n    signUp(username: string) {\n      authMethod.value.signUp(username);\n    },\n    existingUsers: existingUsers.value,\n  }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n  wordlist,\n}: {\n  wordlist: string[];\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passphrase auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new PassphraseAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      context.value.register,\n      authSecretStorage,\n      wordlist,\n    );\n  });\n\n  const passphrase = ref(authMethod.value.passphrase);\n\n  watchEffect((onCleanup) => {\n    authMethod.value.loadCurrentAccountPassphrase();\n\n    const unsubscribe = authMethod.value.subscribe(() => {\n      passphrase.value = authMethod.value.passphrase;\n    });\n\n    onCleanup(unsubscribe);\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n    registerNewAccount: authMethod.value.registerNewAccount,\n    generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n    passphrase: passphrase.value,\n  }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n  appName,\n  appHostname,\n}: {\n  appName: string;\n  appHostname?: string;\n}) {\n  const context = useJazzContext();\n  const authSecretStorage = useAuthSecretStorage();\n  const isAuthenticated = useIsAuthenticated();\n\n  if (\"guest\" in context.value) {\n    throw new Error(\"Passkey auth is not supported in guest mode\");\n  }\n\n  const authMethod = computed(() => {\n    return new BrowserPasskeyAuth(\n      context.value.node.crypto,\n      context.value.authenticate,\n      authSecretStorage,\n      appName,\n      appHostname,\n    );\n  });\n\n  return computed(() => ({\n    state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n    logIn: authMethod.value.logIn,\n    signUp: authMethod.value.signUp,\n  }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n  appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    : false;\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n  <slot v-if=\"auth.state === 'signedIn'\" />\n  <div\n    v-else\n    :style=\"{\n      minHeight: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      width: '18rem',\n      maxWidth: 'calc(100vw - 2rem)',\n      gap: '2rem',\n      margin: '0 auto'\n    }\"\n  >\n    <h1\n      :style=\"{\n        color: darkMode ? '#fff' : '#000',\n        textAlign: 'center',\n        fontSize: '1.5rem',\n        fontWeight: 'bold'\n      }\"\n    >\n      {{ appName }}\n    </h1>\n\n    <form\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n      @submit=\"handleSubmit\"\n    >\n      <input\n        v-model=\"username\"\n        placeholder=\"Display name\"\n        autocomplete=\"webauthn\"\n        :style=\"{\n          border: darkMode ? '1px solid #444' : '1px solid #ddd',\n          padding: '11px 8px',\n          borderRadius: '6px',\n          background: darkMode ? '#000' : '#fff',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n      <input\n        type=\"submit\"\n        value=\"Sign up\"\n        :style=\"{\n          padding: '13px 5px',\n          border: 'none',\n          borderRadius: '6px',\n          cursor: 'pointer',\n          background: darkMode ? '#444' : '#ddd',\n          color: darkMode ? '#fff' : '#000'\n        }\"\n      >\n    </form>\n\n    <div\n      v-if=\"auth.existingUsers.length > 0\"\n      :style=\"{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.5rem'\n      }\"\n    >\n      <p\n        :style=\"{\n          color: darkMode ? '#e2e2e2' : '#000',\n          textAlign: 'center',\n          paddingTop: '0.5rem',\n          borderTop: '1px solid',\n          borderColor: darkMode ? '#111' : '#e2e2e2'\n        }\"\n      >\n        Log in as\n      </p>\n      <button\n        v-for=\"user in auth.existingUsers\"\n        :key=\"user\"\n        @click=\"auth.logIn(user)\"\n        type=\"button\"\n        :aria-label=\"`Log in as ${user}`\"\n        :style=\"{\n          background: darkMode ? '#0d0d0d' : '#eee',\n          color: darkMode ? '#fff' : '#000',\n          padding: '0.5rem',\n          border: 'none',\n          borderRadius: '6px'\n        }\"\n      >\n        {{ user }}\n      </button>\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n  src?: string;\n  res?: `${number}x${number}` | \"placeholder\";\n  originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n  image: Ref<ImageDefinition | null | undefined>,\n  maxWidth?: number,\n  targetWidth?: number,\n) {\n  const current = ref<ImageState>({});\n\n  let cleanup: (() => void) | undefined;\n  const unsubscribe = watch(\n    () => [image.value?.id, maxWidth],\n    () => {\n      let lastHighestRes: string | undefined;\n\n      if (!image.value) return;\n\n      const unsub = image.value.subscribe({}, (update) => {\n        const highestRes = update?.highestResAvailable({\n          maxWidth,\n          targetWidth,\n        });\n\n        if (highestRes) {\n          if (highestRes.res !== lastHighestRes) {\n            lastHighestRes = highestRes.res;\n            const blob = highestRes.stream.toBlob();\n\n            if (blob) {\n              const blobURI = URL.createObjectURL(blob);\n              current.value = {\n                src: blobURI,\n                res: highestRes.res,\n                originalSize: image.value?.originalSize,\n              };\n\n              if (cleanup) cleanup();\n              cleanup = () => {\n                setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n              };\n            }\n          }\n        } else {\n          current.value = {\n            src: update?.placeholderDataURL,\n            res: \"placeholder\",\n            originalSize: image.value?.originalSize,\n          };\n        }\n      });\n\n      return unsub;\n    },\n  );\n\n  onUnmounted(() => {\n    unsubscribe();\n    if (cleanup) cleanup();\n  });\n\n  return current;\n}\n\nconst props = defineProps<{\n  image: ImageDefinition | null | undefined;\n  maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n  <slot\n    :src=\"current.src\"\n    :res=\"current.res\"\n    :original-size=\"current.originalSize\"\n  />\n</template>"],"names":["useAccount","useAccountOrGuest","current"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-vue",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -16,9 +16,9 @@
     }
   },
   "dependencies": {
-    "cojson": "0.11.5",
-    "jazz-browser": "0.11.5",
-    "jazz-tools": "0.11.5"
+    "cojson": "0.11.6",
+    "jazz-tools": "0.11.6",
+    "jazz-browser": "0.11.6"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",

package/src/ProgressiveImg.vue

@@ -11,6 +11,7 @@ interface ImageState {
 function useProgressiveImg(
   image: Ref<ImageDefinition | null | undefined>,
   maxWidth?: number,
+  targetWidth?: number,
 ) {
   const current = ref<ImageState>({});
 
@@ -23,7 +24,10 @@ function useProgressiveImg(
       if (!image.value) return;
 
       const unsub = image.value.subscribe({}, (update) => {
-        const highestRes = update?.highestResAvailable({ maxWidth });
+        const highestRes = update?.highestResAvailable({
+          maxWidth,
+          targetWidth,
+        });
 
         if (highestRes) {
           if (highestRes.res !== lastHighestRes) {